danielmorrisey.com
https://altly.madebydanny.uk
1import { useEffect } from "react";
2import { useNavigate } from "react-router-dom";
3import { Eye, Zap, Shield, Clock } from "lucide-react";
4import { Button } from "@/components/ui/button";
5import { Card } from "@/components/ui/card";
6import { supabase } from "@/integrations/supabase/client";
7export default function Landing() {
8 const navigate = useNavigate();
9 useEffect(() => {
10 // Check if user is already logged in
11 supabase.auth.getSession().then(({
12 data: {
13 session
14 }
15 }) => {
16 if (session) {
17 navigate("/app");
18 }
19 });
20 }, [navigate]);
21 return <div className="min-h-screen bg-background">
22 {/* Header */}
23 <header className="border-b border-border/50 bg-card/50 backdrop-blur-sm sticky top-0 z-50">
24 <div className="container mx-auto px-4 py-4 flex items-center justify-between">
25 <div className="flex items-center gap-2">
26 <div className="w-10 h-10 rounded-xl bg-primary/20 flex items-center justify-center">
27 <Eye className="w-6 h-6 text-primary" />
28 </div>
29 <span className="text-xl font-bold text-foreground">ALTly</span>
30 </div>
31 <div className="flex gap-2">
32 <Button variant="ghost" onClick={() => navigate("/auth")}>
33 Sign In
34 </Button>
35 <Button onClick={() => navigate("/auth")}>
36 Get Started
37 </Button>
38 </div>
39 </div>
40 </header>
41
42 {/* Hero Section */}
43 <section className="container mx-auto px-4 py-20 text-center">
44 <div className="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-primary/20 mb-8">
45 <Eye className="w-10 h-10 text-primary" />
46 </div>
47 <h1 className="text-5xl md:text-7xl font-bold text-foreground mb-6 max-w-4xl mx-auto">
48 AI-Powered Alt Text
49 <br />
50 <span className="text-primary">Made Simple</span>
51 </h1>
52 <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
53 Generate perfect alt text for your images using Claude AI. Free, fast, and accessible for everyone.
54 </p>
55 <div className="flex gap-4 justify-center">
56 <Button size="lg" onClick={() => navigate("/auth")} className="text-lg px-8">
57 Start Generating
58 </Button>
59 <Button size="lg" variant="outline" onClick={() => navigate("/auth")} className="text-lg px-8">
60 Sign In
61 </Button>
62 </div>
63 </section>
64
65 {/* Features Section */}
66 <section className="container mx-auto px-4 py-20">
67 <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
68 <Card className="p-6 text-center">
69 <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/20 mb-4">
70 <Zap className="w-7 h-7 text-primary" />
71 </div>
72 <h3 className="text-xl font-semibold text-foreground mb-2">Lightning Fast</h3>
73 <p className="text-muted-foreground">
74 Generate alt text in seconds using Claude's powerful AI. No waiting, no hassle.
75 </p>
76 </Card>
77
78 <Card className="p-6 text-center">
79 <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/20 mb-4">
80 <Shield className="w-7 h-7 text-primary" />
81 </div>
82 <h3 className="text-xl font-semibold text-foreground mb-2">Secure & Private</h3>
83 <p className="text-muted-foreground">
84 Your images are secure. Only you can see your generations and history.
85 </p>
86 </Card>
87
88 <Card className="p-6 text-center">
89 <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/20 mb-4">
90 <Clock className="w-7 h-7 text-primary" />
91 </div>
92 <h3 className="text-xl font-semibold text-foreground mb-2">20 Per Day</h3>
93 <p className="text-muted-foreground">
94 Generate up to 20 alt texts daily. Perfect for content creators and developers.
95 </p>
96 </Card>
97 </div>
98 </section>
99
100 {/* CTA Section */}
101 <section className="container mx-auto px-4 py-20">
102 <Card className="max-w-3xl mx-auto p-12 text-center bg-gradient-to-br from-primary/10 to-primary/5">
103 <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
104 Ready to Make Your Images Accessible?
105 </h2>
106 <p className="text-lg text-muted-foreground mb-8">
107 Join others who are making the web more accessible, one image at a time.
108 </p>
109 <Button size="lg" onClick={() => navigate("/auth")} className="text-lg px-8">
110 Get Started Free
111 </Button>
112 </Card>
113 </section>
114
115 {/* Footer */}
116 <footer className="border-t border-border/50 py-8 mt-20">
117 <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
118 © 2024-2025 Made with ❤️ by{" "}
119 <a href="https://madebydanny.uk" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Made by Danny UK, by Daniel Morrisey</a>
120 </div>
121 </footer>
122 </div>;
123}