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

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_4
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1

14 Commits
version_1 ... version_4

Author SHA1 Message Date
bender
42485fc2cf Update src/app/styles/variables.css 2026-03-03 07:03:16 +00:00
bender
8f044e8bc2 Update src/app/page.tsx 2026-03-03 07:03:15 +00:00
bender
430b239c6e Update src/app/layout.tsx 2026-03-03 07:03:15 +00:00
bender
2f20d938ed Merge version_3 into main 
Merge version_3 into main
 2026-03-03 06:58:27 +00:00
bender
9e29cbaa8c Update src/app/page.tsx 2026-03-03 06:58:23 +00:00
bender
40d895e222 Merge version_2 into main 
Merge version_2 into main
 2026-03-03 06:53:30 +00:00
bender
16dbd0fa09 Update src/app/styles/variables.css 2026-03-03 06:53:26 +00:00
bender
4c375d68d7 Update src/app/styles/base.css 2026-03-03 06:53:25 +00:00
bender
2ca35ac6b3 Update src/app/page.tsx 2026-03-03 06:53:24 +00:00
bender
6525066940 Update src/app/layout.tsx 2026-03-03 06:53:24 +00:00
bender
5a9fc3a28a Merge version_1 into main 
Merge version_1 into main
 2026-03-03 06:50:18 +00:00
bender
48c8aede9e Merge version_1 into main 
Merge version_1 into main
 2026-03-03 06:46:19 +00:00
bender
e4ab5ba43b Merge version_1 into main 
Merge version_1 into main
 2026-03-03 06:44:47 +00:00
bender
57bcce139c Merge version_1 into main 
Merge version_1 into main
 2026-03-03 06:43:26 +00:00
4 changed files with 236 additions and 83 deletions
Expand all files Collapse all files

104
src/app/layout.tsx
View File

@@ -1,14 +1,17 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Halant } from "next/font/google"; import { DM_Sans } from "next/font/google";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import { Nunito_Sans } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag"; import Tag from "@/tag/Tag";
import { Open_Sans } from "next/font/google";
const dmSans = DM_Sans({
variable: "--font-dm-sans", subsets: ["latin"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "UNBRKABLE Pre-Order Waitlist - March 15, 2026", description: "Join the UNBRKABLE waitlist and be the first to know. Exclusive pre-order access launching March 15, 2026. Limited availability.", keywords: "UNBRKABLE, pre-order, waitlist, exclusive, launch, 2026", metadataBase: new URL("https://unbrkable.com"), title: "UNBRKABLE Pre-Order Waitlist - March 15, 2026", description: "Join the UNBRKABLE waitlist and be the first to know. Exclusive pre-order access launching March 15, 2026. Limited availability.", keywords: "UNBRKABLE, pre-order, waitlist, exclusive, launch, 2026", metadataBase: new URL("https://unbrkable.com"),
@@ -24,15 +27,6 @@ export const metadata: Metadata = {
}, },
}; };
const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
});
const openSans = Open_Sans({
variable: "--font-open-sans",
subsets: ["latin"],
});
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
@@ -41,7 +35,7 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<ServiceWrapper> <ServiceWrapper>
<body className={`${inter.variable} ${openSans.variable} antialiased`}> <body className={`${dmSans.variable} ${inter.variable} antialiased`}>
<Tag /> <Tag />
{children} {children}
@@ -286,7 +280,9 @@ export default function RootLayout({
const getElementInfo = (element, assignId = false) => { const getElementInfo = (element, assignId = false) => {
const rect = element.getBoundingClientRect(); const rect = element.getBoundingClientRect();
const tagName = element.tagName.toLowerCase(); const tagName = element.tagName.toLowerCase();
const selector = getUniqueSelector(element, assignId);
const sectionId = getSectionId(element);
let className = undefined; let className = undefined;
try { try {
if (element.className) { if (element.className) {
@@ -314,7 +310,8 @@ export default function RootLayout({
}; };
if (tagName === 'img') { if (tagName === 'img') {
info.imageData = { const originalSrc = extractOriginalUrl(element.src);
info.imageData = {
src: originalSrc, src: originalSrc,
alt: element.alt || undefined, alt: element.alt || undefined,
naturalWidth: element.naturalWidth, naturalWidth: element.naturalWidth,
@@ -325,7 +322,8 @@ export default function RootLayout({
if (tagName === 'video') { if (tagName === 'video') {
const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || ''; const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
info.imageData = { const resolvedSrc = extractOriginalUrl(rawSrc);
info.imageData = {
src: resolvedSrc, src: resolvedSrc,
alt: element.getAttribute('aria-label') || undefined, alt: element.getAttribute('aria-label') || undefined,
isBackground: false, isBackground: false,
@@ -338,7 +336,8 @@ export default function RootLayout({
if (backgroundImage && backgroundImage !== 'none') { if (backgroundImage && backgroundImage !== 'none') {
const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/); const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
if (urlMatch) { if (urlMatch) {
if (tagName !== 'img') { const originalBgSrc = extractOriginalUrl(urlMatch[1]);
if (tagName !== 'img') {
info.imageData = { info.imageData = {
src: originalBgSrc, src: originalBgSrc,
isBackground: true isBackground: true
@@ -350,7 +349,8 @@ export default function RootLayout({
} }
} }
info.elementType = elementType; const elementType = getElementType(element);
info.elementType = elementType;
if (elementType === 'Button') { if (elementType === 'Button') {
const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || ''; const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
@@ -443,11 +443,13 @@ export default function RootLayout({
}; };
const isTextElement = (element) => { const isTextElement = (element) => {
return elementType === 'Text'; const elementType = getElementType(element);
return elementType === 'Text';
}; };
const isButtonElement = (element) => { const isButtonElement = (element) => {
return elementType === 'Button'; const elementType = getElementType(element);
return elementType === 'Button';
}; };
const updateButtonText = (element, newText) => { const updateButtonText = (element, newText) => {
@@ -522,7 +524,8 @@ export default function RootLayout({
}; };
const handleInput = () => { const handleInput = () => {
let currentText = element.textContent; const elementInfo = getElementInfo(element);
let currentText = element.textContent;
// Ensure there's always at least a space to keep the element editable // Ensure there's always at least a space to keep the element editable
if (currentText === '' || currentText === null || currentText.length === 0) { if (currentText === '' || currentText === null || currentText.length === 0) {
@@ -635,7 +638,8 @@ export default function RootLayout({
}, '*'); }, '*');
if (save && originalContent !== element.textContent) { if (save && originalContent !== element.textContent) {
let finalText = element.textContent; const elementInfo = getElementInfo(element);
let finalText = element.textContent;
// Trim the final text and convert space-only to empty string for saving // Trim the final text and convert space-only to empty string for saving
if (finalText === ' ' || finalText.trim() === '') { if (finalText === ' ' || finalText.trim() === '') {
@@ -764,7 +768,7 @@ export default function RootLayout({
lastMouseX = e.clientX; lastMouseX = e.clientX;
lastMouseY = e.clientY; lastMouseY = e.clientY;
|| e.target; const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
if (!isValidElement(target) || target === hoveredElement || target === selectedElement) { if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
return; return;
@@ -796,7 +800,8 @@ export default function RootLayout({
hoverOverlay = createHoverOverlay(target); hoverOverlay = createHoverOverlay(target);
} }
showElementTypeLabel(target, elementType); const elementType = getElementType(target);
showElementTypeLabel(target, elementType);
window.parent.postMessage({ window.parent.postMessage({
type: 'webild-element-hover', type: 'webild-element-hover',
@@ -838,7 +843,7 @@ export default function RootLayout({
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
|| e.target; const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
if (!isValidElement(target)) return; if (!isValidElement(target)) return;
if (selectedElement && selectedElement !== target) { if (selectedElement && selectedElement !== target) {
@@ -883,7 +888,8 @@ export default function RootLayout({
hoveredElement = null; hoveredElement = null;
} }
selectedElement.dataset.webildSelector = elementInfo.selector; const elementInfo = getElementInfo(target, true);
selectedElement.dataset.webildSelector = elementInfo.selector;
showElementTypeLabel(target, elementInfo.elementType); showElementTypeLabel(target, elementInfo.elementType);
window.parent.postMessage({ window.parent.postMessage({
@@ -966,7 +972,8 @@ export default function RootLayout({
isScrolling = false; isScrolling = false;
if (lastMouseX > 0 && lastMouseY > 0) { if (lastMouseX > 0 && lastMouseY > 0) {
if (target && isValidElement(target) && target !== selectedElement) { const target = getMostSpecificElement(lastMouseX, lastMouseY);
if (target && isValidElement(target) && target !== selectedElement) {
hoveredElement = target; hoveredElement = target;
const computedStyle = window.getComputedStyle(target); const computedStyle = window.getComputedStyle(target);
@@ -980,7 +987,8 @@ export default function RootLayout({
hoveredElement.classList.add(hoverClass); hoveredElement.classList.add(hoverClass);
hoverOverlay = createHoverOverlay(target); hoverOverlay = createHoverOverlay(target);
showElementTypeLabel(target, elementType); const elementType = getElementType(target);
showElementTypeLabel(target, elementType);
window.parent.postMessage({ window.parent.postMessage({
type: 'webild-element-hover', type: 'webild-element-hover',
@@ -1003,7 +1011,8 @@ export default function RootLayout({
const saveChangeToStorage = (change) => { const saveChangeToStorage = (change) => {
try { try {
const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]'); const storageKey = getStorageKey();
const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
const filteredChanges = existingChanges.filter(c => { const filteredChanges = existingChanges.filter(c => {
return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId); return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
@@ -1023,7 +1032,8 @@ export default function RootLayout({
const clearLocalChanges = () => { const clearLocalChanges = () => {
try { try {
localStorage.removeItem(storageKey); const storageKey = getStorageKey();
localStorage.removeItem(storageKey);
window.parent.postMessage({ window.parent.postMessage({
type: 'webild-local-changes-cleared', type: 'webild-local-changes-cleared',
data: {} data: {}
@@ -1072,7 +1082,8 @@ export default function RootLayout({
if (e.data.type === 'webild-cancel-changes') { if (e.data.type === 'webild-cancel-changes') {
try { try {
const savedChanges = localStorage.getItem(storageKey); const storageKey = getStorageKey();
const savedChanges = localStorage.getItem(storageKey);
if (savedChanges) { if (savedChanges) {
const changes = JSON.parse(savedChanges); const changes = JSON.parse(savedChanges);
changes.forEach(change => { changes.forEach(change => {
@@ -1094,7 +1105,8 @@ export default function RootLayout({
if (isBackground) { if (isBackground) {
element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : ''; element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
} else { } else {
if (revertTag === 'video' && oldMediaType === 'image') { const oldMediaType = getMediaTypeFromUrl(change.oldValue);
if (revertTag === 'video' && oldMediaType === 'image') {
swapMediaElement(element, 'img', change.oldValue); swapMediaElement(element, 'img', change.oldValue);
} else if (revertTag === 'img' && oldMediaType === 'video') { } else if (revertTag === 'img' && oldMediaType === 'video') {
swapMediaElement(element, 'video', change.oldValue); swapMediaElement(element, 'video', change.oldValue);
@@ -1142,7 +1154,8 @@ export default function RootLayout({
const el = textElements[i]; const el = textElements[i];
if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) { if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
element = el; element = el;
if (newSelector) { const newSelector = getUniqueSelector(element, true);
if (newSelector) {
element.dataset.webildSelector = newSelector; element.dataset.webildSelector = newSelector;
} }
break; break;
@@ -1233,8 +1246,10 @@ export default function RootLayout({
replaced = true; replaced = true;
} else if (element.tagName.toLowerCase() === 'img') { } else if (element.tagName.toLowerCase() === 'img') {
oldValue = element.src; oldValue = element.src;
if (newMediaType === 'video' && allowMediaTypeSwap) { const newMediaType = getMediaTypeFromUrl(newSrc);
if (selectedElement === element) selectedElement = swapped; if (newMediaType === 'video' && allowMediaTypeSwap) {
const swapped = swapMediaElement(element, 'video', newSrc);
if (selectedElement === element) selectedElement = swapped;
element = swapped; element = swapped;
} else { } else {
element.src = newSrc; element.src = newSrc;
@@ -1242,9 +1257,11 @@ export default function RootLayout({
replaced = true; replaced = true;
} else if (element.tagName.toLowerCase() === 'video') { } else if (element.tagName.toLowerCase() === 'video') {
oldValue = element.src || element.currentSrc || ''; oldValue = element.src || element.currentSrc || '';
const sources = element.querySelectorAll('source'); const newMediaType = getMediaTypeFromUrl(newSrc);
const sources = element.querySelectorAll('source');
if (newMediaType === 'image' && allowMediaTypeSwap) { if (newMediaType === 'image' && allowMediaTypeSwap) {
if (selectedElement === element) selectedElement = swapped; const swapped = swapMediaElement(element, 'img', newSrc);
if (selectedElement === element) selectedElement = swapped;
element = swapped; element = swapped;
} else { } else {
if (sources.length > 0) { if (sources.length > 0) {
@@ -1266,7 +1283,8 @@ export default function RootLayout({
} }
if (replaced) { if (replaced) {
const elementInfo = getElementInfo(element);
let cleanOldValue = oldValue; let cleanOldValue = oldValue;
if (oldValue.includes('url(')) { if (oldValue.includes('url(')) {
const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/); const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
@@ -1337,7 +1355,13 @@ export default function RootLayout({
} }
}, true); }, true);
const urlCheckInterval = setInterval(() => {
if (lastPathname !== window.location.pathname) {
lastPathname = window.location.pathname;
notifyPageChange();
}
}, 500);
notifyPageChange(); notifyPageChange();
window.webildCleanup = () => { window.webildCleanup = () => {

187
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 ProductCardThree from "@/components/sections/product/ProductCardThree";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne"; import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterCard from "@/components/sections/footer/FooterCard"; 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() { 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 ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="text-shift" defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight" defaultTextAnimation="reveal-blur"
borderRadius="rounded" borderRadius="rounded"
contentWidth="smallMedium" contentWidth="medium"
sizing="largeSmall" sizing="large"
background="circleGradient" background="none"
cardStyle="gradient-mesh" cardStyle="glass-elevated"
primaryButtonStyle="primary-glow" primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid" secondaryButtonStyle="glass"
headingFontWeight="bold" headingFontWeight="bold"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
@@ -40,35 +69,135 @@ export default function LandingPage() {
tag="PRE-ORDER COMING SOON" tag="PRE-ORDER COMING SOON"
tagAnimation="slide-up" tagAnimation="slide-up"
title="UNBRKABLE" title="UNBRKABLE"
description="Countdown to launch" description="Resilience Engineered. Premium Streetwear Redefined."
background={{ variant: "sparkles-gradient" }} background={{ variant: "sparkles-gradient" }}
mediaItems={[ mediaItems={[
{ {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7wU63U5Z6xUyQgGM5ThlIUPo/uploaded-1772520151997-tdn3qcwt.png", imageAlt: "UNBRKABLE Hero"}, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7wU63U5Z6xUyQgGM5ThlIUPo/uploaded-1772520151997-tdn3qcwt.png", imageAlt: "UNBRKABLE Logo"},
{
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"},
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
buttons={[{ text: "BE THE FIRST TO KNOW", href: "#email-capture" }]} buttons={[{ text: "JOIN WAITLIST NOW", href: "#email-capture" }]}
className="min-h-screen flex items-center justify-center" className="min-h-screen flex items-center justify-center"
containerClassName="max-w-4xl mx-auto px-6" containerClassName="max-w-6xl mx-auto px-6"
titleClassName="text-6xl md:text-8xl font-bold tracking-wide mb-8 drop-shadow-lg" titleClassName="text-6xl md:text-8xl font-bold tracking-wider mb-8 drop-shadow-2xl"
descriptionClassName="hidden" descriptionClassName="text-lg md:text-2xl text-accent/80 mb-12 font-light tracking-wide"
tagClassName="text-sm md:text-base font-semibold tracking-widest uppercase mb-6 text-accent" tagClassName="text-xs md:text-sm font-semibold tracking-widest uppercase mb-6 text-accent"
/> />
</div> </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, 255, 255, 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, 255, 255, 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, 255, 255, 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, 255, 255, 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, 255, 255, 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"> <div id="teaser" data-section="teaser">
<ProductCardThree <ProductCardThree
title="COMING SOON" title="COMING SOON"
description="Discover what's next" description="Discover our premium collection launching exclusively on March 15, 2026"
tag="PRODUCT TEASER" tag="PRODUCT PREVIEW"
tagAnimation="slide-up" tagAnimation="slide-up"
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
@@ -93,12 +222,12 @@ export default function LandingPage() {
<div id="social-proof" data-section="social-proof"> <div id="social-proof" data-section="social-proof">
<SocialProofOne <SocialProofOne
title="FOLLOW THE MOVEMENT" 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" tag="INSTAGRAM"
tagAnimation="slide-up" tagAnimation="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
names={["UNBRKABLE", "PREMIUM", "EXCLUSIVE", "LAUNCH", "MARCH 2026"]} names={["@UNBRKABLE", "PREMIUM", "EXCLUSIVE", "LAUNCH", "MARCH 2026"]}
speed={40} speed={40}
showCard={true} showCard={true}
containerClassName="py-16 px-6" containerClassName="py-16 px-6"
@@ -117,7 +246,7 @@ export default function LandingPage() {
href: "https://instagram.com/unbrkable", ariaLabel: "Instagram"}, href: "https://instagram.com/unbrkable", ariaLabel: "Instagram"},
]} ]}
containerClassName="py-12 px-6" 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" logoClassName="text-2xl font-bold tracking-widest text-accent mb-6"
copyrightTextClassName="text-sm text-accent/60" copyrightTextClassName="text-sm text-accent/60"
/> />

4
src/app/styles/base.css
View File

@@ -11,7 +11,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-open-sans), sans-serif; font-family: var(--font-dm-sans), sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-inter), sans-serif; font-family: var(--font-dm-sans), sans-serif;
} }

24
src/app/styles/variables.css
View File

@@ -2,23 +2,23 @@
/* Base units */ /* Base units */
/* --vw is set by ThemeProvider */ /* --vw is set by ThemeProvider */
/* --background: #f5f4ef;; /* --background: #000000;;
--card: #dad6cd;; --card: #0c0c0c;;
--foreground: #2a2928;; --foreground: #ffffff;;
--primary-cta: #2a2928;; --primary-cta: #ffffff;;
--secondary-cta: #ecebea;; --secondary-cta: #000000;;
--accent: #ffffff;; --accent: #ffffff;;
--background-accent: #c6b180;; */ --background-accent: #ffffff;; */
--background: #f5f4ef;; --background: #000000;;
--card: #dad6cd;; --card: #0c0c0c;;
--foreground: #2a2928;; --foreground: #ffffff;;
--primary-cta: #2a2928;; --primary-cta: #ffffff;;
--primary-cta-text: #f5f4ef;; --primary-cta-text: #f5f4ef;;
--secondary-cta: #ecebea;; --secondary-cta: #000000;;
--secondary-cta-text: #2a2928;; --secondary-cta-text: #2a2928;;
--accent: #ffffff;; --accent: #ffffff;;
--background-accent: #c6b180;; --background-accent: #ffffff;;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);