From 84d01c987c0b71e8653d1c0a3f5af55b00beea21 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 18 Oct 2025 02:23:50 +0000
Subject: [PATCH] Prettier format pending files

---
 client/pages/GetStarted.tsx | 157 +++++++++++++++++++++++++++++-------
 1 file changed, 128 insertions(+), 29 deletions(-)

diff --git a/client/pages/GetStarted.tsx b/client/pages/GetStarted.tsx
index fc961a6c..3b9f580d 100644
--- a/client/pages/GetStarted.tsx
+++ b/client/pages/GetStarted.tsx
@@ -1,11 +1,26 @@
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Link, useNavigate } from "react-router-dom";
 import { useEffect } from "react";
 import { useAuth } from "@/contexts/AuthContext";
-import { UserPlus, Settings, LayoutDashboard, BookOpen, Users, LifeBuoy, ArrowRight, CheckCircle } from "lucide-react";
+import {
+  UserPlus,
+  Settings,
+  LayoutDashboard,
+  BookOpen,
+  Users,
+  LifeBuoy,
+  ArrowRight,
+  CheckCircle,
+} from "lucide-react";
 
 export default function GetStarted() {
   const steps = [
@@ -13,7 +28,11 @@ export default function GetStarted() {
       title: "Create your account",
       description: "Sign up with email or GitHub/Google.",
       icon: UserPlus,
-      points: ["Secure auth via Supabase", "Email verification", "OAuth supported"],
+      points: [
+        "Secure auth via Supabase",
+        "Email verification",
+        "OAuth supported",
+      ],
       cta: { label: "Join AeThex", href: "/onboarding" },
       color: "from-aethex-500 to-neon-blue",
     },
@@ -29,16 +48,38 @@ export default function GetStarted() {
       title: "Explore your dashboard",
       description: "Manage profile, projects, applications, and rewards.",
       icon: LayoutDashboard,
-      points: ["Profile & settings", "Community feed", "Achievements & rewards"],
+      points: [
+        "Profile & settings",
+        "Community feed",
+        "Achievements & rewards",
+      ],
       cta: { label: "Open Dashboard", href: "/dashboard" },
       color: "from-emerald-500 to-teal-500",
     },
   ];
 
   const quickLinks = [
-    { title: "Documentation", desc: "Guides and API reference", icon: BookOpen, href: "/docs", color: "from-cyan-500 to-sky-500" },
-    { title: "Community", desc: "Share progress & find collaborators", icon: Users, href: "/community", color: "from-indigo-500 to-purple-500" },
-    { title: "Support", desc: "We’re here to help", icon: LifeBuoy, href: "/support", color: "from-amber-500 to-orange-500" },
+    {
+      title: "Documentation",
+      desc: "Guides and API reference",
+      icon: BookOpen,
+      href: "/docs",
+      color: "from-cyan-500 to-sky-500",
+    },
+    {
+      title: "Community",
+      desc: "Share progress & find collaborators",
+      icon: Users,
+      href: "/community",
+      color: "from-indigo-500 to-purple-500",
+    },
+    {
+      title: "Support",
+      desc: "We’re here to help",
+      icon: LifeBuoy,
+      href: "/support",
+      color: "from-amber-500 to-orange-500",
+    },
   ];
 
   const navigate = useNavigate();
@@ -60,15 +101,23 @@ export default function GetStarted() {
               <span className="text-gradient">Get Started</span>
             </h1>
             <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-              Create your account, personalize your experience, and ship faster with AeThex.
+              Create your account, personalize your experience, and ship faster
+              with AeThex.
             </p>
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-              <Button asChild className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift">
+              <Button
+                asChild
+                className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift"
+              >
                 <Link to="/onboarding" className="flex items-center gap-2">
                   <CheckCircle className="h-5 w-5" /> Join AeThex
                 </Link>
               </Button>
-              <Button asChild variant="outline" className="border-aethex-400/50 hover:border-aethex-400">
+              <Button
+                asChild
+                variant="outline"
+                className="border-aethex-400/50 hover:border-aethex-400"
+              >
                 <Link to="/dashboard">Explore Dashboard</Link>
               </Button>
             </div>
@@ -83,12 +132,21 @@ export default function GetStarted() {
             {steps.map((step, idx) => {
               const Icon = step.icon;
               return (
-                <Card key={idx} className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/50 transition-all duration-300 group">
-                  <div className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${step.color} opacity-0 group-hover:opacity-10 transition-opacity`} />
+                <Card
+                  key={idx}
+                  className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/50 transition-all duration-300 group"
+                >
+                  <div
+                    className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${step.color} opacity-0 group-hover:opacity-10 transition-opacity`}
+                  />
                   <CardHeader className="space-y-3">
                     <div className="flex items-center justify-between">
-                      <CardTitle className="text-lg font-semibold">{step.title}</CardTitle>
-                      <div className={`w-10 h-10 rounded-md bg-gradient-to-r ${step.color} grid place-items-center`}>
+                      <CardTitle className="text-lg font-semibold">
+                        {step.title}
+                      </CardTitle>
+                      <div
+                        className={`w-10 h-10 rounded-md bg-gradient-to-r ${step.color} grid place-items-center`}
+                      >
                         <Icon className="h-5 w-5 text-white" />
                       </div>
                     </div>
@@ -98,12 +156,19 @@ export default function GetStarted() {
                     <ul className="space-y-2 text-sm text-muted-foreground">
                       {step.points.map((p) => (
                         <li key={p} className="flex items-center gap-2">
-                          <span className="h-1.5 w-1.5 rounded-full bg-aethex-400/70" /> {p}
+                          <span className="h-1.5 w-1.5 rounded-full bg-aethex-400/70" />{" "}
+                          {p}
                         </li>
                       ))}
                     </ul>
-                    <Button asChild className={`w-full bg-gradient-to-r ${step.color}`}>
-                      <Link to={step.cta.href} className="flex items-center justify-center gap-2">
+                    <Button
+                      asChild
+                      className={`w-full bg-gradient-to-r ${step.color}`}
+                    >
+                      <Link
+                        to={step.cta.href}
+                        className="flex items-center justify-center gap-2"
+                      >
                         {step.cta.label}
                         <ArrowRight className="h-4 w-4" />
                       </Link>
@@ -120,27 +185,47 @@ export default function GetStarted() {
       <section className="py-8 sm:py-12">
         <div className="container mx-auto px-4 max-w-6xl">
           <div className="text-center mb-8">
-            <h2 className="text-2xl font-bold text-gradient-purple">Helpful Resources</h2>
-            <p className="text-sm text-muted-foreground">Jump into docs, community, or support</p>
+            <h2 className="text-2xl font-bold text-gradient-purple">
+              Helpful Resources
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              Jump into docs, community, or support
+            </p>
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
             {quickLinks.map((q) => {
               const Icon = q.icon;
               return (
-                <Card key={q.title} className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/50 transition-all duration-300 group">
-                  <div className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${q.color} opacity-0 group-hover:opacity-10 transition-opacity`} />
+                <Card
+                  key={q.title}
+                  className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/50 transition-all duration-300 group"
+                >
+                  <div
+                    className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${q.color} opacity-0 group-hover:opacity-10 transition-opacity`}
+                  />
                   <CardContent className="p-6 space-y-3">
                     <div className="flex items-center gap-3">
-                      <div className={`w-10 h-10 rounded-md bg-gradient-to-r ${q.color} grid place-items-center`}>
+                      <div
+                        className={`w-10 h-10 rounded-md bg-gradient-to-r ${q.color} grid place-items-center`}
+                      >
                         <Icon className="h-5 w-5 text-white" />
                       </div>
                       <div>
                         <h3 className="font-semibold">{q.title}</h3>
-                        <p className="text-sm text-muted-foreground">{q.desc}</p>
+                        <p className="text-sm text-muted-foreground">
+                          {q.desc}
+                        </p>
                       </div>
                     </div>
-                    <Button asChild variant="outline" className="w-full border-border/60 hover:border-aethex-400/60">
-                      <Link to={q.href} className="flex items-center justify-center gap-2">
+                    <Button
+                      asChild
+                      variant="outline"
+                      className="w-full border-border/60 hover:border-aethex-400/60"
+                    >
+                      <Link
+                        to={q.href}
+                        className="flex items-center justify-center gap-2"
+                      >
                         Open
                         <ArrowRight className="h-4 w-4" />
                       </Link>
@@ -156,13 +241,27 @@ export default function GetStarted() {
       {/* Footer CTA */}
       <section className="py-10 sm:py-14">
         <div className="container mx-auto px-4 max-w-4xl text-center space-y-5">
-          <Badge variant="outline" className="border-aethex-400/40 text-aethex-300">Next up</Badge>
-          <h3 className="text-2xl font-bold">Create your account and start building</h3>
+          <Badge
+            variant="outline"
+            className="border-aethex-400/40 text-aethex-300"
+          >
+            Next up
+          </Badge>
+          <h3 className="text-2xl font-bold">
+            Create your account and start building
+          </h3>
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <Button asChild className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue">
+            <Button
+              asChild
+              className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue"
+            >
               <Link to="/onboarding">Join AeThex</Link>
             </Button>
-            <Button asChild variant="outline" className="border-aethex-400/50 hover:border-aethex-400">
+            <Button
+              asChild
+              variant="outline"
+              className="border-aethex-400/50 hover:border-aethex-400"
+            >
               <Link to="/dashboard">Explore Dashboard</Link>
             </Button>
           </div>