Merge pull request #29 from bhavik-goplani/develop

Develop: Landing page and survey UI improvements

package.json

@@ -21,12 +21,15 @@
  "@supabase/auth-ui-shared": "^0.1.6",
  "@supabase/supabase-js": "^2.33.1",
  "@tanstack/react-table": "^8.11.2",
+ "@tsparticles/engine": "^3.3.0",
+ "@tsparticles/react": "^3.0.0",
+ "@tsparticles/slim": "^3.3.0",
  "@types/node": "18.16.3",
  "@types/react": "18.2.0",
  "@types/react-dom": "18.2.1",
  "autoprefixer": "10.4.14",
  "class-variance-authority": "^0.7.0",
- "clsx": "^2.0.0",
+ "clsx": "^2.1.0",
  "eslint": "8.39.0",
  "eslint-config-next": "13.3.2",
  "framer-motion": "^11.0.8",

src/app/participant/[participant_id]/page.tsx

@@ -3,13 +3,18 @@ import { Survey } from '@/components/survey/survey'
 import { SurveyContext } from '@/components/survey/survey-context'
 import * as React from 'react'
 import { useRouter } from "next/navigation"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+import { motion } from 'framer-motion';
+import { SparklesPreview } from '@/components/survey/sparkles-page'
 
 export const dynamic = 'force-dynamic'
 
 export default function Page({ params }: { params: { participant_id: string } }) {
 
  const participant_id = params.participant_id
  const [submission, setSubmission] = React.useState<string | null>(null);
+ const [start, setStart] = React.useState(false);
 
  React.useEffect(() => {
  if (typeof window !== 'undefined') {
@@ -139,10 +144,30 @@ export default function Page({ params }: { params: { participant_id: string } })
  return (
  <> 
  <SurveyContext.Provider value={{ ...context }}>
- <div className="container mx-auto py-10">
- <h1 className="text-2xl font-semibold tracking-tight">Welcome to the Survey!</h1>
- <Survey/>
- </div>
+ <motion.div className="flex items-center justify-center" style={{ height: 'calc(100vh - 88px)' }} layout>
+ {!start && (
+ <SparklesPreview />
+ )}
+ {!start && (
+ <motion.button
+ whileHover={{ scale: 1.1 }}
+ whileTap={{ scale: 0.9 }}
+ onClick={() => setStart(true)}
+ className={cn(buttonVariants({ variant: "default", size: "user" }))}
+ >
+ Start
+ </motion.button>
+ )}
+ {start && (
+ <motion.div
+ initial={{ opacity: 0 }}
+ animate={{ opacity: 1 }}
+ transition={{ duration: 1 }}
+ >
+ <Survey />
+ </motion.div>
+ )}
+ </motion.div>
  </SurveyContext.Provider>
  </>
  )

src/components/icons.tsx

@@ -228,6 +228,7 @@ export const Icons = {
  xmlnsXlink="http://www.w3.org/1999/xlink" 
  viewBox="0 0 512.001 512.001" 
  xmlSpace="preserve"
+ {...props}
  >
 
  <path style={{fill: "#A9AFBF"}} d="M259.486,262.366c0.001-0.001,0.002-0.003,0.003-0.004l-41.697,5.995l-8.785-41.593L363.142,8.187
@@ -240,7 +241,7 @@ export const Icons = {
  c16.98,0,30.794,13.814,30.794,30.794L188.592,430.194L188.592,430.194z"/>
  <path style={{fill: "#C7CFE2"}} d="M252.516,262.366c-0.001-0.001-0.002-0.003-0.003-0.004l41.697,5.995l8.785-41.593L148.861,8.187
  C91.316,48.766,200.22,189.071,252.516,262.366z"/>
- <path style={{fill: "E65A5B"}} d="M354.204,297.269c-0.495,0-0.981,0.027-1.474,0.037h0.007l-49.744-70.542l-50.482,35.598
+ <path style={{fill: "#E65A5B"}} d="M354.204,297.269c-0.495,0-0.981,0.027-1.474,0.037h0.007l-49.744-70.542l-50.482,35.598
  c1.473,2.064,2.904,4.078,4.281,6.033c18.819,26.688,28.432,49.109,33.096,66.724c-5.918,10.598-9.305,22.793-9.305,35.768v59.305
  c0,40.593,33.025,73.618,73.619,73.618c40.593,0,73.618-33.025,73.618-73.618v-59.305
  C427.822,330.294,394.797,297.269,354.204,297.269z M384.997,430.194c0,16.979-13.814,30.792-30.792,30.792

src/components/survey/game.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { Button } from "@/components/ui/button"
 import { useSurvey } from '@/components/survey/survey-context'
+import { Icons } from "@/components/icons"
 
 interface Section {
  section_id: string
@@ -88,12 +89,17 @@ export function Game ( {onComplete, section_details, isLastTrial, onUserMadeChoi
  }
 
  return (
- <div>
- <h3>Rock, Paper, Scissors</h3>
- <div>
- <Button onClick={() => handleUserChoice('rock')} disabled={hasUserMadeChoice}>Rock</Button>
- <Button onClick={() => handleUserChoice('paper')} disabled={hasUserMadeChoice}>Paper</Button>
- <Button onClick={() => handleUserChoice('scissors')} disabled={hasUserMadeChoice}>Scissors</Button>
+ <div className='container mx-auto py-20'>
+ <div className='flex justify-center space-x-4'>
+ <button onClick={() => handleUserChoice('rock')} disabled={hasUserMadeChoice}>
+ <Icons.rock className= "h-64 w-64"/>
+ </button>
+ <button onClick={() => handleUserChoice('paper')} disabled={hasUserMadeChoice}>
+ <Icons.paper className='h-64 w-64'/>
+ </button>
+ <button onClick={() => handleUserChoice('scissors')} disabled={hasUserMadeChoice}>
+ <Icons.scissors className='h-64 w-64'/>
+ </button>
  </div>
  {userChoice && computerChoice && result && (
  <div>

src/components/survey/section.tsx

@@ -60,41 +60,37 @@ export function Section({ section_details, onComplete, isLastSection }: { sectio
 
  return (
  <>
- <div className="container mx-auto py-10">
- <h3 className="text-2xl font-semibold tracking-tight">Section - {section_id}</h3>
- <br />
- <div> 
- {Array.from({ length: trial_no },).map((_, i) => {
- if (i !== currentTrial) return null
- return (
- <div key={i}>
- <Game
- onComplete={() => setCurrentTrial(currentTrial + 1)}
- section_details={section_details}
- isLastTrial={currentTrial === trial_no - 1}
- onUserMadeChoice={handleUserMadeChoice}
- />
- </div>
- )
- })}
- </div>
- <br />
- <p>Current Trial: {currentTrial+1}</p>
- <div className="fixed bottom-0 right-0 m-6">
- { hasUserMadeChoice && (isLastSection && (currentTrial+1 === trial_no))? (
- <Button onClick={handleComplete} disabled={isLoading}>
- {isLoading && (
- <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
- )}
- Complete Survey
- </Button>
- ) : ( hasUserMadeChoice && currentTrial+1 === trial_no)? (
- <Button onClick={handleComplete}>
- Next Section
- </Button>
- ) : null
- }
- </div>
+ <div> 
+ {Array.from({ length: trial_no },).map((_, i) => {
+ if (i !== currentTrial) return null
+ return (
+ <div key={i}>
+ <Game
+ onComplete={() => setCurrentTrial(currentTrial + 1)}
+ section_details={section_details}
+ isLastTrial={currentTrial === trial_no - 1}
+ onUserMadeChoice={handleUserMadeChoice}
+ />
+ </div>
+ )
+ })}
+ </div>
+ <br />
+ <p>Current Trial: {currentTrial+1}</p>
+ <div className="fixed bottom-0 right-0 m-6">
+ { hasUserMadeChoice && (isLastSection && (currentTrial+1 === trial_no))? (
+ <Button onClick={handleComplete} disabled={isLoading}>
+ {isLoading && (
+ <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+ )}
+ Complete Survey
+ </Button>
+ ) : ( hasUserMadeChoice && currentTrial+1 === trial_no)? (
+ <Button onClick={handleComplete}>
+ Next Section
+ </Button>
+ ) : null
+ }
  </div>
  </>
  )

src/components/survey/sparkles-page.tsx

@@ -0,0 +1,30 @@
+"use client";
+import React from "react";
+import { SparklesCore } from "@/components/ui/sparkles";
+import { motion } from "framer-motion";
+
+export function SparklesPreview() {
+ return (
+ <>
+ <div className="w-full absolute top-[88px] h-[calc(100vh-88px)]">
+ <SparklesCore
+ id="tsparticlesfullpage"
+ background="transparent"
+ minSize={0.6}
+ maxSize={1.4}
+ particleDensity={100}
+ className="w-full h-full"
+ particleColor="#FFFFFF"
+ />
+ </div>
+ <motion.h1 
+ className="text-6xl font-semibold tracking-tight"
+ initial={{ y: -50, opacity: 0 }}
+ animate={{ y: 0, opacity: 1 }}
+ transition={{ type: 'spring', stiffness: 120 }}
+ >
+ Welcome to the Survey!
+ </motion.h1>
+ </>
+ );
+}

src/components/survey/survey.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { Section } from '@/components/survey/section'
 import { useSurvey } from '@/components/survey/survey-context'
+import { motion } from 'framer-motion';
 
 export function Survey() {
  const [currentSectionIndex, setCurrentSectionIndex] = React.useState(0)
@@ -11,23 +12,16 @@ export function Survey() {
  const isLastSection = currentSectionIndex === sections.length - 1
 
  return (
- <>
- <div className="container mx-auto py-10">
- {survey_id ? (
- <h1 className="text-2xl font-semibold tracking-tight">Survey {survey_id}</h1>
- ) : (
- <h1 className="text-2xl font-semibold tracking-tight">Survey Loading...</h1>
- )}
+ <motion.div layout>
  {sections.length > 0 && (
- <div key={sections[currentSectionIndex].section_id}>
+ <motion.div key={sections[currentSectionIndex].section_id} layout>
  <Section 
  section_details={sections[currentSectionIndex]} 
  onComplete={() => setCurrentSectionIndex(currentSectionIndex + 1)}
  isLastSection={isLastSection}
  />
- </div>
+ </motion.div>
  )}
- </div>
- </>
+ </motion.div>
  )
 }

src/components/ui/button.tsx

@@ -24,6 +24,7 @@ const buttonVariants = cva(
  sm: "h-9 rounded-md px-3",
  lg: "h-11 rounded-md px-8",
  icon: "h-10 w-10",
+ user: "h-10 px-4 py-2 fixed bottom-0 right-0 m-6"
  },
  },
  defaultVariants: {