bender/04a2a8fa-a0ec-493b-bfcd-d8e8c4760813
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-03 06:53:24 +00:00
parent 6525066940
commit 2ca35ac6b3
1 changed files with 156 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/app/page.tsx
View File

@@ -6,20 +6,49 @@ import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarou
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Instagram } from "lucide-react";
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="text-shift"
defaultTextAnimation="background-highlight"
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="smallMedium"
sizing="largeSmall"
background="circleGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="solid"
contentWidth="medium"
sizing="large"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
@@ -40,35 +69,134 @@ export default function LandingPage() {
tag="PRE-ORDER COMING SOON"
tagAnimation="slide-up"
title="UNBRKABLE"
description="Countdown to launch"
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 Hero"},
{
imageSrc: "http://img.b2bpic.net/free-photo/water-drop-body-water_417767-87.jpg", imageAlt: "dark cinematic luxury premium background"},
{
imageSrc: "http://img.b2bpic.net/free-photo/burning-paper-background-still-life_23-2150093336.jpg", imageAlt: "glass molten preview product teaser"},
{
imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=1", imageAlt: "product coming soon glass display"},
{
imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=2", imageAlt: "product coming soon glass display"},
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: "BE THE FIRST TO KNOW", href: "#email-capture" }]}
className="min-h-screen flex items-center justify-center"
containerClassName="max-w-4xl mx-auto px-6"
titleClassName="text-6xl md:text-8xl font-bold tracking-wide mb-8 drop-shadow-lg"
descriptionClassName="hidden"
tagClassName="text-sm md:text-base font-semibold tracking-widest uppercase mb-6 text-accent"
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 what's next"
tag="PRODUCT TEASER"
description="Discover our premium collection launching exclusively on March 15, 2026"
tag="PRODUCT PREVIEW"
tagAnimation="slide-up"
animationType="slide-up"
textboxLayout="default"
@@ -93,12 +221,12 @@ export default function LandingPage() {
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="FOLLOW THE MOVEMENT"
description="Stay connected with UNBRKABLE updates and exclusive previews"
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"]}
names={["@UNBRKABLE", "PREMIUM", "EXCLUSIVE", "LAUNCH", "MARCH 2026"]}
speed={40}
showCard={true}
containerClassName="py-16 px-6"
@@ -117,7 +245,7 @@ export default function LandingPage() {
href: "https://instagram.com/unbrkable", ariaLabel: "Instagram"},
]}
containerClassName="py-12 px-6"
cardClassName="max-w-4xl mx-auto backdrop-blur-md bg-white/10 rounded-2xl border border-white/20"
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"
/>