Merge version_2 into main #2
173
src/app/page.tsx
173
src/app/page.tsx
@@ -4,15 +4,16 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Shield, Sparkles, Star } from "lucide-react";
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import { Shield, Sparkles, Star, Zap, Palette, Users } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,12 +33,9 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Catalog", id: "products"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Catalog", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Grayline"
|
||||
/>
|
||||
@@ -45,25 +43,14 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Grayline: Inspired Silhouettes"
|
||||
description="A collection of inspired silhouettes crafted from the finest fibers."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now", href: "#products"},
|
||||
]}
|
||||
buttons={[{ text: "Shop Now", href: "#products" }]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-friends-2000s-fashion-style-posing-together-with-camera_23-2149442899.jpg", imageAlt: "Streetwear vibe 1"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/paint-background-poster-dirty-spotted_1194-8092.jpg", imageAlt: "Streetwear vibe 2"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-friends-2000s-fashion-style-posing-together_23-2149442898.jpg", imageAlt: "Streetwear vibe 3"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-african-american-woman-printed-tshirt-posed-indoor-steel-stairs_627829-2160.jpg", imageAlt: "Streetwear vibe 4"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wavy-smoke-black-background_23-2148210927.jpg", imageAlt: "Streetwear vibe 5"},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-friends-2000s-fashion-style-posing-together-with-camera_23-2149442899.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/paint-background-poster-dirty-spotted_1194-8092.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-friends-2000s-fashion-style-posing-together_23-2149442898.jpg" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
@@ -74,108 +61,78 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
title="The Grayline Standard"
|
||||
metrics={[
|
||||
{
|
||||
icon: Sparkles,
|
||||
label: "Designs Crafted", value: "150+"},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Quality Grade", value: "A++"},
|
||||
{
|
||||
icon: Star,
|
||||
label: "Happy Fans", value: "10K+"},
|
||||
{ icon: Sparkles, label: "Designs Crafted", value: "150+" },
|
||||
{ icon: Shield, label: "Quality Grade", value: "A++" },
|
||||
{ icon: Star, label: "Happy Fans", value: "10K+" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="design-showcase" data-section="design-showcase">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
title="Design Philosophy"
|
||||
description="We believe in the intersection of classic tailoring and urban edge."
|
||||
metrics={[
|
||||
{ id: "d1", value: "Avant-Garde", title: "Aesthetic", description: "Experimental silhouettes", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-touching-marble-bust_171337-16535.jpg" },
|
||||
{ id: "d2", value: "Sustainable", title: "Material", description: "Ethically sourced textiles", imageSrc: "http://img.b2bpic.net/free-photo/pink-hair-girl-avantgarde-style-wearing-sunglasses_114579-17674.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Premium Fibers", description: "Ethically sourced materials designed for maximum comfort and longevity.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-touching-marble-bust_171337-16535.jpg", imageAlt: "Fiber detail"},
|
||||
{
|
||||
title: "Modern Silhouettes", description: "Unique cuts that push the boundaries of streetwear.", imageSrc: "http://img.b2bpic.net/free-photo/pink-hair-girl-avantgarde-style-wearing-sunglasses_114579-17674.jpg", imageAlt: "Silhouette detail"},
|
||||
{
|
||||
title: "Limited Drops", description: "Each piece is part of a curated, limited-release collection.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8q7h58", imageAlt: "Drop detail"},
|
||||
{ title: "Premium Fibers", description: "Ethically sourced materials.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-touching-marble-bust_171337-16535.jpg" },
|
||||
{ title: "Modern Silhouettes", description: "Unique cuts.", imageSrc: "http://img.b2bpic.net/free-photo/pink-hair-girl-avantgarde-style-wearing-sunglasses_114579-17674.jpg" },
|
||||
]}
|
||||
title="Redefining Drip"
|
||||
description="Exclusively crafted for the modern generation."
|
||||
description="Exclusively crafted."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Luxury Hoodie", price: "$150", variant: "Midnight", imageSrc: "http://img.b2bpic.net/free-photo/teenager-outside-enjoying-music-headphones-while-sitting-skateboard_23-2148758496.jpg"},
|
||||
{
|
||||
id: "p2", name: "Tech Joggers", price: "$120", variant: "Slate", imageSrc: "http://img.b2bpic.net/free-photo/female-holding-hand-forehead-orange-hoodie-looking-forgetful_176474-86783.jpg"},
|
||||
{
|
||||
id: "p3", name: "Graphic Icon Tee", price: "$85", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=09auns"},
|
||||
{
|
||||
id: "p4", name: "Bomber Jacket", price: "$290", variant: "Black", imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-k-pop-clothing-urban-scene_23-2149096946.jpg"},
|
||||
{
|
||||
id: "p5", name: "Chain Accessory", price: "$65", variant: "Silver", imageSrc: "http://img.b2bpic.net/free-photo/front-view-friends-posing-together_52683-88926.jpg"},
|
||||
{
|
||||
id: "p6", name: "Designer Kicks", price: "$350", variant: "Neon Blue", imageSrc: "http://img.b2bpic.net/free-photo/young-man-posing-with-skateboard_23-2147995905.jpg"},
|
||||
]}
|
||||
title="Shop the Collection"
|
||||
description="Browse our latest high-end apparel."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Vogue Street", "Hypebeast", "Highsnobiety", "Complex", "GQ Style", "The Drip Hub", "Urban Culture"]}
|
||||
title="Seen on the Streets"
|
||||
description="Featured in leading fashion circles."
|
||||
products={[
|
||||
{ id: "p1", brand: "Grayline", name: "Luxury Hoodie", price: "$150", rating: 5, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/teenager-outside-enjoying-music-headphones-while-sitting-skateboard_23-2148758496.jpg" },
|
||||
{ id: "p2", brand: "Grayline", name: "Tech Joggers", price: "$120", rating: 4, reviewCount: "28", imageSrc: "http://img.b2bpic.net/free-photo/female-holding-hand-forehead-orange-hoodie-looking-forgetful_176474-86783.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", title: "Amazing quality!", quote: "The fit is absolutely perfect, never seen anything like it.", name: "Alex R.", role: "Fashion Influencer", imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-violet-dress-cap-posed-outdoor-sitting-bench-making-selfie-phone_627829-13729.jpg"},
|
||||
{
|
||||
id: "t2", title: "New favorite brand", quote: "Grayline defines the modern streetwear aesthetic.", name: "Jamie L.", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-outside-black-hat-beige-coat-with-folder-hand_627829-5454.jpg"},
|
||||
{
|
||||
id: "t3", title: "Insane drip", quote: "The textures and cuts are premium level.", name: "Casey P.", role: "Creator", imageSrc: "http://img.b2bpic.net/free-photo/blogger-influencer-shooting-herself_1268-21898.jpg"},
|
||||
{
|
||||
id: "t4", title: "Worth every cent", quote: "Quality exceeds expectations, highly recommend.", name: "Jordan M.", role: "Model", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-people-2000s-fashion-style_23-2149442832.jpg"},
|
||||
{
|
||||
id: "t5", title: "Top tier apparel", quote: "Finally, streetwear that feels as good as it looks.", name: "Sam K.", role: "Photographer", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-skateboard_23-2148937849.jpg"},
|
||||
]}
|
||||
title="What They Say"
|
||||
description="The community loves the Grayline aesthetic."
|
||||
/>
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="Community Favorites"
|
||||
cardTag="Reviews"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex R.", imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-violet-dress-cap-posed-outdoor-sitting-bench-making-selfie-phone_627829-13729.jpg" },
|
||||
{ id: "t2", name: "Jamie L.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-outside-black-hat-beige-coat-with-folder-hand_627829-5454.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
<FaqSplitMedia
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "How long is shipping?", content: "Most orders are shipped within 48 hours."},
|
||||
{
|
||||
id: "f2", title: "Do you offer returns?", content: "Yes, within 30 days of purchase in original condition."},
|
||||
{
|
||||
id: "f3", title: "Where are you based?", content: "We operate from global creative hubs to serve you best."},
|
||||
{ id: "f1", title: "Shipping?", content: "48 hours." },
|
||||
{ id: "f2", title: "Returns?", content: "30 days." },
|
||||
]}
|
||||
sideTitle="Grayline Questions"
|
||||
title="Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/town-square_1359-1083.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -183,37 +140,19 @@ export default function LandingPage() {
|
||||
<ContactSplit
|
||||
tag="Connect"
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Join the Drop List"
|
||||
description="Get exclusive early access to our limited collections."
|
||||
description="Get exclusive early access."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/town-square_1359-1083.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{
|
||||
label: "All", href: "#products"},
|
||||
{
|
||||
label: "New Arrivals", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "Contact Us", href: "#contact"},
|
||||
{
|
||||
label: "FAQ", href: "#"},
|
||||
],
|
||||
},
|
||||
{ title: "Shop", items: [{ label: "All", href: "#products" }] },
|
||||
{ title: "Support", items: [{ label: "Contact Us", href: "#contact" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 Grayline"
|
||||
bottomRightText="All rights reserved"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user