Fixed quiz ui

src/App.css

@@ -1,6 +1,18 @@
 #root {
+  width: 100%;
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem;
-  text-align: center;
+}
+
+@media (min-width: 640px) {
+  #root {
+    padding: 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  #root {
+    padding: 3rem;
+  }
 }

src/components/Navbar.tsx

@@ -41,7 +41,7 @@ const Navbar = () => {
             </NavigationMenuItem>
             <NavigationMenuItem>
               <Link to="/quiz">
-                <Button variant="ghost">
+                <Button variant="secondary" size="sm">
                   <Users className="mr-2 h-4 w-4" />
                   Quiz
                 </Button>
@@ -49,7 +49,7 @@ const Navbar = () => {
             </NavigationMenuItem>
             <NavigationMenuItem>
               <Link to="/success-stories">
-                <Button variant="ghost">
+                <Button variant="secondary" size="sm">
                   <Heart className="mr-2 h-4 w-4" />
                   Success Stories
                 </Button>
@@ -62,4 +62,4 @@ const Navbar = () => {
   );
 }
 
-export default Navbar;
+export default Navbar;

src/components/ui/button.tsx

@@ -5,26 +5,26 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
         default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+          'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm',
         destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground shadow-sm',
         secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2',
+        default: 'h-10 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
+        sm: 'h-9 rounded-md px-3',
-        lg: 'h-10 rounded-md px-8',
+        lg: 'h-11 rounded-md px-8',
-        icon: 'h-9 w-9',
+        icon: 'h-10 w-10',
       },
     },
     defaultVariants: {

src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-xl border bg-card text-card-foreground shadow',
+      'rounded-lg border bg-card text-card-foreground shadow-sm transition-all hover:shadow-md',
       className
     )}
     {...props}
@@ -35,7 +35,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn('font-semibold leading-none tracking-tight', className)}
+    className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
     {...props}
   />
 ));

src/components/ui/radio-group.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { CheckIcon } from '@radix-ui/react-icons';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 
@@ -26,13 +26,13 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'aspect-square h-5 w-5 rounded-full border-2 border-primary text-primary ring-offset-background transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary/10',
         className
       )}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="h-3.5 w-3.5 fill-primary" />
+        <Circle className="h-3 w-3 fill-primary text-primary" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );

src/index.css

@@ -9,7 +9,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #1a1a1a;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -74,56 +74,47 @@ button:focus-visible {
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
+    --popover-foreground: 240 10% 3.9%;
-    --primary: 0 0% 9%;
+    --primary: 240 5.9% 10%;
     --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
+    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 0 0% 9%;
+    --secondary-foreground: 240 5.9% 10%;
-    --muted: 0 0% 96.1%;
+    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 0 0% 45.1%;
+    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 0 0% 96.1%;
+    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 0 0% 9%;
+    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
+    --border: 240 5.9% 90%;
-    --input: 0 0% 89.8%;
+    --input: 240 5.9% 90%;
-    --ring: 0 0% 3.9%;
+    --ring: 240 5.9% 10%;
-    --chart-1: 12 76% 61%;
+    --radius: 0.75rem;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
   }
+
   .dark {
-    --background: 0 0% 3.9%;
+    --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
+    --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
+    --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
+    --primary-foreground: 240 5.9% 10%;
-    --secondary: 0 0% 14.9%;
+    --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
+    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 0 0% 63.9%;
+    --muted-foreground: 240 5% 64.9%;
-    --accent: 0 0% 14.9%;
+    --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
+    --border: 240 3.7% 15.9%;
-    --input: 0 0% 14.9%;
+    --input: 240 3.7% 15.9%;
-    --ring: 0 0% 83.1%;
+    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
   }
 }
 
@@ -132,6 +123,6 @@ button:focus-visible {
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground min-h-screen;
   }
 }

src/pages/Quiz.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Label } from '@/components/ui/label';
 import { quizQuestions, type QuizResult } from '@/data/quiz';
+import { quizResults } from '@/data/quiz';
 
 const Quiz = () => {
   const [currentQuestion, setCurrentQuestion] = useState(0);
@@ -31,7 +32,7 @@ const Quiz = () => {
       return acc;
     }, {} as Record<string, number>);
 
-    const result = Object.entries(counts).reduce((a, b) => 
+    const result = Object.entries(counts).reduce((a, b) =>
       counts[a[0]] > counts[b[0]] ? a : b
     )[0];
 
@@ -55,7 +56,7 @@ const Quiz = () => {
           <CardContent className="space-y-4">
             <p className="italic text-muted-foreground">{result.quote}</p>
             <p>{result.description}</p>
-            <Button 
+            <Button
               className="w-full mt-4"
               onClick={() => {
                 setCurrentQuestion(0);
@@ -94,14 +95,24 @@ const Quiz = () => {
             className="space-y-4"
           >
             {quizQuestions[currentQuestion].options.map((option) => (
-              <div key={option.value} className="flex items-center space-x-2">
+              <div
-                <RadioGroupItem value={option.value} id={option.value} />
+                key={option.value}
-                <Label htmlFor={option.value}>{option.label}</Label>
+                className="flex items-start space-x-3 rounded-lg border p-4 transition-colors hover:bg-accent cursor-pointer"
+                onClick={() => handleAnswer(option.value)}
+              >
+                <RadioGroupItem value={option.value} id={option.value} className="mt-1" />
+                <Label
+                  htmlFor={option.value}
+                  className="cursor-pointer flex-grow text-base leading-relaxed"
+                >
+                  {option.label}
+                </Label>
               </div>
             ))}
           </RadioGroup>
           <Button
-            className="w-full mt-6"
+            className="w-full mt-8"
+            size="lg"
             onClick={handleNext}
             disabled={!answers[currentQuestion]}
           >
@@ -111,6 +122,6 @@ const Quiz = () => {
       </Card>
     </div>
   );
-};
+}
 
-export default Quiz;
+export default Quiz;