Coming Soon 1

1"use client";
2 
3import { useState, useEffect } from "react";
4import { Button } from "@/registry/default/ui/button";
5import { Input } from "@/registry/default/ui/input";
6import { TextEffect } from "@/registry/default/ui/motion-primitives/text-effect";
7import { AnimatedGroup } from "@/registry/default/ui/motion-primitives/animated-group";
8import type { ComingSoon_1_Block } from "~/payload-types";
9 
10import { cn } from "@/registry/default/utils";
11import SocialIcon from "@/registry/default/lib/fields/socialLinks";
12import { Mail } from "lucide-react";
13 
14interface TimeLeft {
15	days: number;
16	hours: number;
17	minutes: number;
18	seconds: number;
19}
20 
21const transitionVariants = {
22	item: {
23		hidden: {
24			opacity: 0,
25			filter: "blur(12px)",
26			y: 12,
27		},
28		visible: {
29			opacity: 1,
30			filter: "blur(0px)",
31			y: 0,
32			transition: {
33				type: "spring",
34				bounce: 0.3,
35				duration: 1.5,
36			},
37		},
38	},
39};
40 
41function calculateTimeLeft(targetDate: string): TimeLeft {
42	const difference = +new Date(targetDate) - +new Date();
43 
44	if (difference > 0) {
45		return {
46			days: Math.floor(difference / (1000 * 60 * 60 * 24)),
47			hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
48			minutes: Math.floor((difference / 1000 / 60) % 60),
49			seconds: Math.floor((difference / 1000) % 60),
50		};
51	}
52 
53	return { days: 0, hours: 0, minutes: 0, seconds: 0 };
54}
55 
56export default function ComingSoonSection(props: ComingSoon_1_Block) {
57	const [timeLeft, setTimeLeft] = useState<TimeLeft>({
58		days: 0,
59		hours: 0,
60		minutes: 0,
61		seconds: 0,
62	});
63	const [email, setEmail] = useState("");
64	const [isSubmitted, setIsSubmitted] = useState(false);
65 
66	useEffect(() => {
67		if (!props.launchDate) return;
68 
69		const timer = setInterval(() => {
70			setTimeLeft(calculateTimeLeft(props.launchDate));
71		}, 1000);
72 
73		return () => clearInterval(timer);
74	}, [props.launchDate]);
75 
76	const handleEmailSubmit = (e: React.FormEvent) => {
77		e.preventDefault();
78		// Handle email submission here
79		console.log("Email submitted:", email);
80		setIsSubmitted(true);
81		setEmail("");
82	};
83 
84	return (
85		<div
86			className={cn(
87				"relative flex min-h-screen items-center justify-center overflow-hidden",
88			)}
89		>
90			<section className="relative z-10 w-full">
91				<div className="mx-auto max-w-4xl px-6 text-center">
92					<AnimatedGroup
93						variants={{
94							container: {
95								visible: {
96									transition: {
97										staggerChildren: 0.1,
98									},
99								},
100							},
101							item: {
102								hidden: {
103									opacity: 0,
104									y: 20,
105// … truncated