194 lines
12 KiB
TypeScript
194 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
|
|
import BlogCardOne from "@/components/sections/blog/BlogCardOne";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
|
import Link from "next/link";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Beyond The Wall"
|
|
navItems={[
|
|
{ name: "Shop", id: "shop" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Stories", id: "stories" },
|
|
{ name: "Impact", id: "impact" },
|
|
]}
|
|
button={{ text: "Explore Collection", href: "#shop" }}
|
|
animateOnLoad={true}
|
|
navItemClassName="text-sm font-medium tracking-wide"
|
|
buttonClassName="font-medium tracking-wide"
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
tag="Breaking Barriers"
|
|
title="Beyond The Wall: Reclaiming Identity Through Fashion"
|
|
description="A global movement born in Berlin from Palestinian creativity. We design clothing that speaks to resilience, freedom, and the power of cultural identity. Every piece is a statement—breaking walls, building bridges, and celebrating the beauty of human heritage."
|
|
background={{ variant: "plain" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/game-with-shadows-fashion-portrait-african-american-woman-long-dress-eyeglasses-indoor_627829-5502.jpg", imageAlt: "Beyond The Wall flagship collection"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/decoration-with-sweater-ice-skates-hanger_23-2148350148.jpg", imageAlt: "Cultural heritage in fashion"},
|
|
]}
|
|
rating={5}
|
|
ratingText="Trusted by global change-makers"
|
|
buttons={[
|
|
{ text: "Explore Collection", href: "#shop" },
|
|
{ text: "Read Our Story", href: "/about" },
|
|
]}
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
ariaLabel="Beyond The Wall brand hero section"
|
|
/>
|
|
</div>
|
|
|
|
{/* Featured Products */}
|
|
<div id="shop" data-section="shop">
|
|
<ProductCardFour
|
|
title="Featured Collection"
|
|
description="Discover our curated selection of premium apparel, from timeless hoodies to limited-edition drops. Each piece carries meaning—crafted with intention, designed for impact."
|
|
tag="Shop Now"
|
|
products={[
|
|
{
|
|
id: "1", name: "Breaking Walls Hoodie", price: "$89", variant: "Black 5 Colors", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-white-hoodie-winter-fashion_53876-119757.jpg", imageAlt: "Breaking Walls premium hoodie collection", isFavorited: false,
|
|
},
|
|
{
|
|
id: "2", name: "Identity Graphic T-Shirt", price: "$49", variant: "Off-White 3 Colors", imageSrc: "http://img.b2bpic.net/free-photo/portrait-os-stylish-woman-sunglasses-walking-street-she-is-wearing-white-tshirt-has-red-lips-looking-down_291650-2102.jpg", imageAlt: "Identity graphic t-shirt with cultural design", isFavorited: false,
|
|
},
|
|
{
|
|
id: "3", name: "Limited Drop: Heritage Series", price: "$129", variant: "Olive Green Exclusive", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-choosing-cloth-shop_1303-19847.jpg", imageAlt: "Limited edition heritage series collection", isFavorited: false,
|
|
},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "View All Products", href: "/shop" }]}
|
|
ariaLabel="Featured products section"
|
|
/>
|
|
</div>
|
|
|
|
{/* Social Impact */}
|
|
<div id="impact" data-section="impact">
|
|
<FeatureCardTwentyOne
|
|
tag="Social Impact"
|
|
title="Fashion as a Tool for Cultural Change"
|
|
description="At Beyond The Wall, fashion transcends aesthetics. It's a vehicle for storytelling, cultural preservation, and social transformation. We partner with communities to create lasting impact through ethical production, cultural storytelling, and advocacy."
|
|
accordionItems={[
|
|
{
|
|
id: "1", title: "Cultural Heritage & Storytelling", content: "Every design draws inspiration from Palestinian art, history, and contemporary culture. We collaborate with local artists to ensure authentic representation and celebrate the richness of our heritage through wearable art."},
|
|
{
|
|
id: "2", title: "Ethical Production & Fair Wages", content: "We are committed to transparent, ethical manufacturing practices. Our artisans are paid fair wages, work in safe conditions, and receive recognition for their craft. No compromises on human dignity."},
|
|
{
|
|
id: "3", title: "Community Investment", content: "A percentage of every sale supports cultural initiatives, educational programs, and grassroots organizations working toward social justice and cultural preservation."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/team-young-colleagues-having-meeting-cafe_273609-15655.jpg"
|
|
imageAlt="Community impact and cultural collaboration"
|
|
mediaAnimation="slide-up"
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
mediaPosition="right"
|
|
buttons={[{ text: "Learn More About Our Impact", href: "/about" }]}
|
|
ariaLabel="Social impact and values section"
|
|
/>
|
|
</div>
|
|
|
|
{/* Stories Section */}
|
|
<div id="stories" data-section="stories">
|
|
<BlogCardOne
|
|
title="Stories & Journal"
|
|
description="Dive into the narratives behind our collections. Read interviews with our founders, explore cultural deep-dives, and discover the stories that inspire Beyond The Wall."
|
|
tag="Cultural Storytelling"
|
|
blogs={[
|
|
{
|
|
id: "1", category: "Design Philosophy", title: "Breaking Barriers: How Fashion Reclaims Identity", excerpt: "Exploring the intersection of Palestinian heritage and contemporary fashion design. We discuss how cultural identity becomes a radical act of resistance and beauty.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-women-sitting-table_23-2148975046.jpg", imageAlt: "Design philosophy and cultural identity", authorName: "Layla Mansour", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "15 Jan 2025"},
|
|
{
|
|
id: "2", category: "Collections", title: "The Heritage Series: A Journey Through Palestinian Art", excerpt: "Behind the scenes of our limited-edition Heritage Series. Discover the artists, the inspirations, and the meaning woven into every stitch.", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style-lights-evening-cafes_1321-3400.jpg", imageAlt: "Heritage series collection inspiration", authorName: "Rashid Al-Qadri", authorAvatar: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg", date: "8 Jan 2025"},
|
|
{
|
|
id: "3", category: "Sustainability", title: "Ethical Fashion is Political: Our Production Story", excerpt: "Why we choose ethical production over profit margins. A transparent look at how Beyond The Wall builds fashion that respects people and the planet.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-posing-fast-fashion-concept_23-2150805333.jpg", imageAlt: "Ethical production and sustainability", authorName: "Noor Khalil", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "25 Dec 2024"},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
buttons={[{ text: "Read All Stories", href: "/stories" }]}
|
|
ariaLabel="Blog and stories section"
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials */}
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Amara Johnson", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Amara Johnson"},
|
|
{
|
|
id: "2", name: "Hassan Al-Mansouri", imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg", imageAlt: "Hassan Al-Mansouri"},
|
|
{
|
|
id: "3", name: "Sofia Rossi", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Sofia Rossi"},
|
|
{
|
|
id: "4", name: "James Chen", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "James Chen"},
|
|
]}
|
|
cardTitle="Thousands of global change-makers, creatives, and conscious consumers trust Beyond The Wall to make a statement."
|
|
cardTag="Join the Movement"
|
|
cardAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Customer testimonials and social proof section"
|
|
/>
|
|
</div>
|
|
|
|
{/* Newsletter */}
|
|
<div id="newsletter" data-section="newsletter">
|
|
<ContactCenter
|
|
tag="Stay Connected"
|
|
title="Be Part of the Movement"
|
|
description="Subscribe to our newsletter for exclusive drops, cultural stories, and behind-the-scenes insights into Beyond The Wall. Be the first to know about limited releases and join a global community of change-makers."
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your inbox. Unsubscribe anytime. By subscribing, you agree to receive updates about our collections and cultural initiatives."
|
|
ariaLabel="Newsletter subscription section"
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Beyond The Wall"
|
|
leftLink={{ text: "Privacy & Ethics", href: "#" }}
|
|
rightLink={{ text: "Contact Us", href: "/contact" }}
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |