|
| 1 | +"use client" |
| 2 | + |
| 3 | +import type React from "react" |
| 4 | + |
| 5 | +import { useState } from "react" |
| 6 | +import Link from "next/link" |
| 7 | +import { ArrowLeft, CheckCircle2, Loader2 } from "lucide-react" |
| 8 | +import { Button } from "@/components/ui/button" |
| 9 | +import { Input } from "@/components/ui/input" |
| 10 | +import { motion } from "framer-motion" |
| 11 | + |
| 12 | +export default function ComingSoonPage() { |
| 13 | + const [email, setEmail] = useState("") |
| 14 | + const [isSubmitting, setIsSubmitting] = useState(false) |
| 15 | + const [isSubmitted, setIsSubmitted] = useState(false) |
| 16 | + const [error, setError] = useState("") |
| 17 | + |
| 18 | + const handleSubmit = async (e: React.FormEvent) => { |
| 19 | + e.preventDefault() |
| 20 | + |
| 21 | + if (!email || !/^\S+@\S+\.\S+$/.test(email)) { |
| 22 | + setError("Please enter a valid email address") |
| 23 | + return |
| 24 | + } |
| 25 | + |
| 26 | + setError("") |
| 27 | + setIsSubmitting(true) |
| 28 | + |
| 29 | + // Simulate API call |
| 30 | + setTimeout(() => { |
| 31 | + setIsSubmitting(false) |
| 32 | + setIsSubmitted(true) |
| 33 | + setEmail("") |
| 34 | + |
| 35 | + // Reset success message after 5 seconds |
| 36 | + setTimeout(() => { |
| 37 | + setIsSubmitted(false) |
| 38 | + }, 5000) |
| 39 | + }, 1500) |
| 40 | + } |
| 41 | + |
| 42 | + return ( |
| 43 | + <div className="min-h-screen flex flex-col"> |
| 44 | + <main className="flex-1 flex flex-col"> |
| 45 | + {/* Header */} |
| 46 | + <div className="container px-4 md:px-6 py-6"> |
| 47 | + <Link |
| 48 | + href="/" |
| 49 | + className="inline-flex items-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:text-primary/80" |
| 50 | + > |
| 51 | + <ArrowLeft className="mr-1 h-4 w-4" /> |
| 52 | + Back to Home |
| 53 | + </Link> |
| 54 | + </div> |
| 55 | + |
| 56 | + {/* Coming Soon Content */} |
| 57 | + <div className="flex-1 flex items-center justify-center relative overflow-hidden"> |
| 58 | + <motion.div |
| 59 | + className="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-primary/20 blur-3xl" |
| 60 | + animate={{ scale: [1, 1.2, 1], opacity: [0.5, 0.8, 0.5] }} |
| 61 | + transition={{ |
| 62 | + duration: 8, |
| 63 | + repeat: Number.POSITIVE_INFINITY, |
| 64 | + repeatType: "reverse", |
| 65 | + }} |
| 66 | + /> |
| 67 | + <motion.div |
| 68 | + className="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-primary/20 blur-3xl" |
| 69 | + animate={{ scale: [1, 1.3, 1], opacity: [0.5, 0.7, 0.5] }} |
| 70 | + transition={{ |
| 71 | + duration: 10, |
| 72 | + repeat: Number.POSITIVE_INFINITY, |
| 73 | + repeatType: "reverse", |
| 74 | + delay: 1, |
| 75 | + }} |
| 76 | + /> |
| 77 | + |
| 78 | + <div className="container px-4 md:px-6 relative z-10"> |
| 79 | + <div className="flex flex-col items-center text-center max-w-[600px] mx-auto"> |
| 80 | + <motion.div |
| 81 | + initial={{ opacity: 0, y: 20 }} |
| 82 | + animate={{ opacity: 1, y: 0 }} |
| 83 | + transition={{ duration: 0.5 }} |
| 84 | + className="inline-flex items-center rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-sm font-medium text-primary mb-6" |
| 85 | + > |
| 86 | + Coming Soon |
| 87 | + </motion.div> |
| 88 | + |
| 89 | + <motion.h1 |
| 90 | + initial={{ opacity: 0, y: 20 }} |
| 91 | + animate={{ opacity: 1, y: 0 }} |
| 92 | + transition={{ duration: 0.5, delay: 0.1 }} |
| 93 | + className="text-4xl md:text-6xl font-bold tracking-tighter mb-6" |
| 94 | + > |
| 95 | + We're Working on Something{" "} |
| 96 | + <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80"> |
| 97 | + Amazing |
| 98 | + </span> |
| 99 | + </motion.h1> |
| 100 | + |
| 101 | + <motion.p |
| 102 | + initial={{ opacity: 0, y: 20 }} |
| 103 | + animate={{ opacity: 1, y: 0 }} |
| 104 | + transition={{ duration: 0.5, delay: 0.2 }} |
| 105 | + className="text-xl text-muted-foreground mb-8" |
| 106 | + > |
| 107 | + This page is under construction. We're working hard to bring you an exceptional experience. Stay tuned! |
| 108 | + </motion.p> |
| 109 | + |
| 110 | + <motion.div |
| 111 | + initial={{ opacity: 0, y: 20 }} |
| 112 | + animate={{ opacity: 1, y: 0 }} |
| 113 | + transition={{ duration: 0.5, delay: 0.3 }} |
| 114 | + className="w-full max-w-md" |
| 115 | + > |
| 116 | + <div className="space-y-2"> |
| 117 | + <h2 className="text-lg font-medium">Get notified when we launch</h2> |
| 118 | + <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-2"> |
| 119 | + <div className="flex-1"> |
| 120 | + <Input |
| 121 | + type="email" |
| 122 | + placeholder="Enter your email" |
| 123 | + value={email} |
| 124 | + onChange={(e) => setEmail(e.target.value)} |
| 125 | + className={`w-full ${error ? "border-red-500 focus-visible:ring-red-500" : ""}`} |
| 126 | + disabled={isSubmitting || isSubmitted} |
| 127 | + /> |
| 128 | + {error && <p className="text-red-500 text-sm mt-1 text-left">{error}</p>} |
| 129 | + </div> |
| 130 | + <Button |
| 131 | + type="submit" |
| 132 | + className="rounded-full bg-gradient-to-r from-primary to-primary/80" |
| 133 | + disabled={isSubmitting || isSubmitted} |
| 134 | + > |
| 135 | + {isSubmitting ? ( |
| 136 | + <> |
| 137 | + <Loader2 className="mr-2 h-4 w-4 animate-spin" /> |
| 138 | + Submitting |
| 139 | + </> |
| 140 | + ) : isSubmitted ? ( |
| 141 | + <> |
| 142 | + <CheckCircle2 className="mr-2 h-4 w-4" /> |
| 143 | + Subscribed |
| 144 | + </> |
| 145 | + ) : ( |
| 146 | + "Notify Me" |
| 147 | + )} |
| 148 | + </Button> |
| 149 | + </form> |
| 150 | + <p className="text-xs text-muted-foreground"> |
| 151 | + We'll notify you when this page is ready. No spam, we promise. |
| 152 | + </p> |
| 153 | + </div> |
| 154 | + </motion.div> |
| 155 | + |
| 156 | + <motion.div |
| 157 | + initial={{ opacity: 0, y: 20 }} |
| 158 | + animate={{ opacity: 1, y: 0 }} |
| 159 | + transition={{ duration: 0.5, delay: 0.4 }} |
| 160 | + className="mt-12" |
| 161 | + > |
| 162 | + <p className="text-muted-foreground mb-4">In the meantime, check out our other pages</p> |
| 163 | + <div className="flex flex-wrap gap-2 justify-center"> |
| 164 | + <Button variant="outline" size="sm" className="rounded-full" asChild> |
| 165 | + <Link href="/">Home</Link> |
| 166 | + </Button> |
| 167 | + <Button variant="outline" size="sm" className="rounded-full" asChild> |
| 168 | + <Link href="/about">About</Link> |
| 169 | + </Button> |
| 170 | + <Button variant="outline" size="sm" className="rounded-full" asChild> |
| 171 | + <Link href="/contact">Contact</Link> |
| 172 | + </Button> |
| 173 | + </div> |
| 174 | + </motion.div> |
| 175 | + </div> |
| 176 | + </div> |
| 177 | + </div> |
| 178 | + </main> |
| 179 | + |
| 180 | + {/* Footer */} |
| 181 | + <footer className="w-full py-6 bg-muted/50"> |
| 182 | + <div className="container px-4 md:px-6"> |
| 183 | + <div className="flex flex-col md:flex-row justify-between items-center gap-4"> |
| 184 | + <p className="text-sm text-muted-foreground"> |
| 185 | + © {new Date().getFullYear()} TaskPilot Labs. All rights reserved. |
| 186 | + </p> |
| 187 | + {/* <div className="flex gap-6"> |
| 188 | + <Link href="/privacy" className="text-sm text-muted-foreground hover:text-foreground transition-colors"> |
| 189 | + Privacy Policy |
| 190 | + </Link> |
| 191 | + <Link href="/terms" className="text-sm text-muted-foreground hover:text-foreground transition-colors"> |
| 192 | + Terms of Service |
| 193 | + </Link> |
| 194 | + <Link href="/cookies" className="text-sm text-muted-foreground hover:text-foreground transition-colors"> |
| 195 | + Cookie Policy |
| 196 | + </Link> |
| 197 | + </div> */} |
| 198 | + </div> |
| 199 | + </div> |
| 200 | + </footer> |
| 201 | + </div> |
| 202 | + ) |
| 203 | +} |
| 204 | + |
0 commit comments