256 lines
11 KiB
TypeScript
256 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Instagram, Clock } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function LandingPage() {
|
|
const [timeLeft, setTimeLeft] = useState({
|
|
days: 0,
|
|
hours: 0,
|
|
minutes: 0,
|
|
seconds: 0,
|
|
});
|
|
|
|
useEffect(() => {
|
|
const calculateTimeLeft = () => {
|
|
const targetDate = new Date("2026-03-15T15:00:00+01:00").getTime();
|
|
const now = new Date().getTime();
|
|
const difference = targetDate - now;
|
|
|
|
if (difference > 0) {
|
|
setTimeLeft({
|
|
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
|
|
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
|
|
minutes: Math.floor((difference / 1000 / 60) % 60),
|
|
seconds: Math.floor((difference / 1000) % 60),
|
|
});
|
|
}
|
|
};
|
|
|
|
calculateTimeLeft();
|
|
const timer = setInterval(calculateTimeLeft, 1000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="large"
|
|
background="none"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="UNBRKABLE"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Product", id: "product" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{ text: "JOIN WAITLIST", href: "#email-capture" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
tag="PRE-ORDER COMING SOON"
|
|
tagAnimation="slide-up"
|
|
title="UNBRKABLE"
|
|
description="Resilience Engineered. Premium Streetwear Redefined."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7wU63U5Z6xUyQgGM5ThlIUPo/uploaded-1772520151997-tdn3qcwt.png", imageAlt: "UNBRKABLE Logo"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
buttons={[{ text: "JOIN WAITLIST NOW", href: "#email-capture" }]}
|
|
className="min-h-screen flex items-center justify-center"
|
|
containerClassName="max-w-6xl mx-auto px-6"
|
|
titleClassName="text-6xl md:text-8xl font-bold tracking-wider mb-8 drop-shadow-2xl"
|
|
descriptionClassName="text-lg md:text-2xl text-accent/80 mb-12 font-light tracking-wide"
|
|
tagClassName="text-xs md:text-sm font-semibold tracking-widest uppercase mb-6 text-accent"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
id="countdown"
|
|
data-section="countdown"
|
|
className="relative w-full py-20 px-6 overflow-hidden"
|
|
style={{
|
|
background: "radial-gradient(circle at 50% 50%, rgba(255, 107, 107, 0.1) 0%, transparent 70%)"}}
|
|
>
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="flex items-center justify-center gap-4 mb-12">
|
|
<Clock className="w-6 h-6 text-accent" />
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground">LAUNCHING MARCH 15, 2026 AT 3:00 PM CET</h2>
|
|
</div>
|
|
<div className="grid grid-cols-4 gap-4 md:gap-6">
|
|
{[
|
|
{ label: "DAYS", value: timeLeft.days },
|
|
{ label: "HOURS", value: timeLeft.hours },
|
|
{ label: "MINUTES", value: timeLeft.minutes },
|
|
{ label: "SECONDS", value: timeLeft.seconds },
|
|
].map((unit, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="relative group backdrop-blur-xl bg-gradient-to-b from-white/20 to-white/5 border border-white/30 rounded-2xl p-4 md:p-6 text-center"
|
|
style={{
|
|
boxShadow:
|
|
"0 8px 32px rgba(255, 107, 107, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.2)"}}
|
|
>
|
|
<div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" style={{
|
|
background: "radial-gradient(circle at 50% 0%, rgba(255, 107, 107, 0.3) 0%, transparent 70%)"}} />
|
|
<div className="relative">
|
|
<div className="text-4xl md:text-5xl font-bold text-accent mb-2">
|
|
{String(unit.value).padStart(2, "0")}
|
|
</div>
|
|
<div className="text-xs md:text-sm font-semibold tracking-widest text-foreground/60 uppercase">
|
|
{unit.label}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="email-capture" data-section="email-capture" className="relative w-full py-20 px-6">
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="backdrop-blur-xl bg-gradient-to-b from-white/20 to-white/5 border border-white/30 rounded-3xl p-8 md:p-12"
|
|
style={{
|
|
boxShadow:
|
|
"0 8px 32px rgba(255, 107, 107, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2)"}}>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4 text-center">
|
|
GET EXCLUSIVE ACCESS
|
|
</h2>
|
|
<p className="text-base md:text-lg text-foreground/70 text-center mb-8">
|
|
Join our waitlist and be among the first to experience UNBRKABLE
|
|
</p>
|
|
<form
|
|
className="flex flex-col gap-4 mb-6"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
console.log("Email captured");
|
|
}}
|
|
>
|
|
<input
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
className="w-full px-6 py-3 rounded-lg bg-white/10 border border-white/20 text-foreground placeholder:text-foreground/50 focus:outline-none focus:border-accent/50 transition-colors"
|
|
required
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="w-full px-6 py-3 rounded-lg bg-gradient-to-r from-accent to-accent/80 text-background font-bold hover:shadow-lg transition-shadow"
|
|
>
|
|
JOIN WAITLIST
|
|
</button>
|
|
</form>
|
|
<p className="text-xs text-foreground/50 text-center">
|
|
✓ We respect your privacy. Unsubscribe at any time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="video-teaser" data-section="video-teaser" className="relative w-full py-20 px-6">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
|
|
UNBREAKABLE RESILIENCE
|
|
</h2>
|
|
<p className="text-base md:text-lg text-foreground/70">
|
|
Designed for those who never back down. Premium streetwear built to last through anything.
|
|
</p>
|
|
</div>
|
|
<div className="backdrop-blur-xl bg-gradient-to-b from-white/10 to-white/5 border border-white/30 rounded-3xl overflow-hidden"
|
|
style={{
|
|
boxShadow:
|
|
"0 8px 32px rgba(255, 107, 107, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2)"}}>
|
|
<div className="aspect-video bg-gradient-to-b from-black/40 to-black/60 flex items-center justify-center">
|
|
<div className="text-center text-white">
|
|
<svg className="w-20 h-20 mx-auto mb-4 opacity-80" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
|
|
</svg>
|
|
<p className="text-sm font-semibold">TEASER VIDEO</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="teaser" data-section="teaser">
|
|
<ProductCardThree
|
|
title="COMING SOON"
|
|
description="Discover our premium collection launching exclusively on March 15, 2026"
|
|
tag="PRODUCT PREVIEW"
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
products={[
|
|
{
|
|
id: "1", name: "UNBRKABLE PRO", price: "COMING SOON", imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=3", imageAlt: "UNBRKABLE PRO"},
|
|
{
|
|
id: "2", name: "UNBRKABLE LITE", price: "COMING SOON", imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=4", imageAlt: "UNBRKABLE LITE"},
|
|
{
|
|
id: "3", name: "UNBRKABLE ELITE", price: "COMING SOON", imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=5", imageAlt: "UNBRKABLE ELITE"},
|
|
{
|
|
id: "4", name: "UNBRKABLE MAX", price: "COMING SOON", imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=6", imageAlt: "UNBRKABLE MAX"},
|
|
]}
|
|
containerClassName="py-20 px-6"
|
|
textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4 tracking-wide"
|
|
textBoxDescriptionClassName="text-lg text-accent/75 mb-12 max-w-2xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="FOLLOW THE MOVEMENT"
|
|
description="Stay connected with UNBRKABLE updates and exclusive previews on Instagram"
|
|
tag="INSTAGRAM"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["@UNBRKABLE", "PREMIUM", "EXCLUSIVE", "LAUNCH", "MARCH 2026"]}
|
|
speed={40}
|
|
showCard={true}
|
|
containerClassName="py-16 px-6"
|
|
textBoxTitleClassName="text-3xl md:text-4xl font-bold mb-4 tracking-wide"
|
|
textBoxDescriptionClassName="text-base text-accent/75 mb-8"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="UNBRKABLE"
|
|
copyrightText="© 2025 UNBRKABLE. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/unbrkable", ariaLabel: "Instagram"},
|
|
]}
|
|
containerClassName="py-12 px-6"
|
|
cardClassName="max-w-4xl mx-auto backdrop-blur-xl bg-gradient-to-b from-white/20 to-white/5 rounded-3xl border border-white/30 p-8"
|
|
logoClassName="text-2xl font-bold tracking-widest text-accent mb-6"
|
|
copyrightTextClassName="text-sm text-accent/60"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|