|
1
|
import { Button } from "@/components/ui/button"; |
|
2
|
import Footer from "@/components/layout/footer"; |
|
3
|
import { Wrench, BookOpen, Heart, Zap, Shield, Laptop, Monitor, ArrowRight } from "lucide-react"; |
|
4
|
|
|
5
|
import { useLocation } from "wouter"; |
|
6
|
|
|
7
|
export default function Landing() { |
|
8
|
const [, setLocation] = useLocation(); |
|
9
|
return ( |
|
10
|
<div className="min-h-screen bg-background flex flex-col relative overflow-hidden"> |
|
11
|
|
|
12
|
{/* Background Decorative Elements */} |
|
13
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-full -z-10 pointer-events-none"> |
|
14
|
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px]" /> |
|
15
|
<div className="absolute bottom-[10%] right-[-5%] w-[30%] h-[30%] bg-indigo-500/5 rounded-full blur-[100px]" /> |
|
16
|
</div> |
|
17
|
|
|
18
|
<main className="flex-1 flex flex-col items-center pt-20 pb-16 px-4"> |
|
19
|
|
|
20
|
{/* Hero Section */} |
|
21
|
<div className="w-full max-w-4xl text-center space-y-8 mb-20 animate-in fade-in slide-in-from-bottom-8 duration-1000"> |
|
22
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold uppercase tracking-wider mb-4 border border-primary/20"> |
|
23
|
<Zap className="h-3 w-3" /> v1.0.0 is Live |
|
24
|
</div> |
|
25
|
|
|
26
|
<h1 className="text-5xl md:text-7xl font-extrabold tracking-tighter bg-gradient-to-br from-foreground to-foreground/60 bg-clip-text text-transparent leading-[1.1]"> |
|
27
|
Master Your Tech.<br /> |
|
28
|
<span className="text-primary italic">Repair with Confidence.</span> |
|
29
|
</h1> |
|
30
|
|
|
31
|
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed"> |
|
32
|
The professional repair companion for laptops and PCs. Interactive guides, expert troubleshooting, and a modern community at your fingertips. |
|
33
|
</p> |
|
34
|
|
|
35
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4"> |
|
36
|
<Button |
|
37
|
onClick={() => setLocation("/auth")} |
|
38
|
size="lg" |
|
39
|
className="h-14 px-8 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-bold text-lg shadow-glass transition-all hover:scale-105" |
|
40
|
> |
|
41
|
Start Repairing Free |
|
42
|
<ArrowRight className="ml-2 h-5 w-5" /> |
|
43
|
</Button> |
|
44
|
<Button |
|
45
|
variant="outline" |
|
46
|
size="lg" |
|
47
|
className="h-14 px-8 rounded-full border-border/60 hover:bg-muted font-semibold text-lg" |
|
48
|
> |
|
49
|
Browse Public Guides |
|
50
|
</Button> |
|
51
|
</div> |
|
52
|
</div> |
|
53
|
|
|
54
|
{/* Feature Grid */} |
|
55
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-6xl mx-auto mb-24"> |
|
56
|
<div className="group p-8 rounded-3xl bg-card/50 backdrop-blur-sm border border-border/40 hover:border-primary/40 transition-all hover:shadow-glass duration-500"> |
|
57
|
<div className="h-12 w-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform"> |
|
58
|
<BookOpen className="h-6 w-6" /> |
|
59
|
</div> |
|
60
|
<h3 className="text-xl font-bold mb-3">Precision Guides</h3> |
|
61
|
<p className="text-muted-foreground leading-relaxed"> |
|
62
|
Step-by-step visual instructions tailored for specific laptop and desktop models. |
|
63
|
</p> |
|
64
|
</div> |
|
65
|
|
|
66
|
<div className="group p-8 rounded-3xl bg-card/50 backdrop-blur-sm border border-border/40 hover:border-primary/40 transition-all hover:shadow-glass duration-500"> |
|
67
|
<div className="h-12 w-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-500 mb-6 group-hover:scale-110 transition-transform"> |
|
68
|
<Wrench className="h-6 w-6" /> |
|
69
|
</div> |
|
70
|
<h3 className="text-xl font-bold mb-3">Pro Toolkits</h3> |
|
71
|
<p className="text-muted-foreground leading-relaxed"> |
|
72
|
Interactive decision trees that help you diagnose hardware issues like a seasoned technician. |
|
73
|
</p> |
|
74
|
</div> |
|
75
|
|
|
76
|
<div className="group p-8 rounded-3xl bg-card/50 backdrop-blur-sm border border-border/40 hover:border-primary/40 transition-all hover:shadow-glass duration-500"> |
|
77
|
<div className="h-12 w-12 rounded-2xl bg-emerald-500/10 flex items-center justify-center text-emerald-500 mb-6 group-hover:scale-110 transition-transform"> |
|
78
|
<Shield className="h-6 w-6" /> |
|
79
|
</div> |
|
80
|
<h3 className="text-xl font-bold mb-3">Community First</h3> |
|
81
|
<p className="text-muted-foreground leading-relaxed"> |
|
82
|
Verified guides reviewed by experts to ensure safety and success in every repair. |
|
83
|
</p> |
|
84
|
</div> |
|
85
|
</div> |
|
86
|
|
|
87
|
{/* Device Support Preview */} |
|
88
|
<div className="w-full max-w-5xl bg-muted/30 border border-border/40 rounded-[2.5rem] p-8 md:p-12 text-center overflow-hidden relative"> |
|
89
|
<div className="relative z-10"> |
|
90
|
<h2 className="text-3xl font-bold mb-8">Supporting Every Build</h2> |
|
91
|
<div className="flex flex-wrap justify-center gap-8 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-700"> |
|
92
|
<div className="flex flex-col items-center gap-2"> |
|
93
|
<Laptop className="h-10 w-10 text-primary" /> |
|
94
|
<span className="text-xs font-bold tracking-widest uppercase">Laptops</span> |
|
95
|
</div> |
|
96
|
<div className="flex flex-col items-center gap-2"> |
|
97
|
<Monitor className="h-10 w-10 text-primary" /> |
|
98
|
<span className="text-xs font-bold tracking-widest uppercase">Desktops</span> |
|
99
|
</div> |
|
100
|
</div> |
|
101
|
</div> |
|
102
|
</div> |
|
103
|
|
|
104
|
</main> |
|
105
|
|
|
106
|
<div className="mt-auto"> |
|
107
|
<Footer /> |
|
108
|
</div> |
|
109
|
</div> |
|
110
|
); |
|
111
|
} |