Prettier format pending files
This commit is contained in:
Builder.io
parent
5b3304f6b8
commit
84d01c987c
1 changed files with 128 additions and 29 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue