Merge version_1 into main #2
@@ -21,72 +21,38 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "/shop",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "/faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
]}
|
||||
brandName="XouT"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }]}
|
||||
brandName="XouT"
|
||||
button={{ text: "Get Started", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do I receive my items?",
|
||||
content: "Instant delivery via automated system.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Is XouT secure?",
|
||||
content: "We prioritize privacy and data protection.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I request a refund?",
|
||||
content: "Refunds handled per our terms of service.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Information regarding our shop operations and policies."
|
||||
faqsAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/earth-display-futuristic-infographic-collection_23-2148203353.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How do I receive my items?", content: "Instant delivery via automated system." },
|
||||
{ id: "f2", title: "Is XouT secure?", content: "We prioritize privacy and data protection." },
|
||||
{ id: "f3", title: "Can I request a refund?", content: "Refunds handled per our terms of service." }
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Information regarding our shop operations and policies."
|
||||
faqsAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/earth-display-futuristic-infographic-collection_23-2148203353.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="XouT"
|
||||
leftLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="XouT"
|
||||
leftLink={{ text: "Terms of Service", href: "#" }}
|
||||
rightLink={{ text: "Privacy Policy", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
226
src/app/page.tsx
226
src/app/page.tsx
@@ -25,160 +25,90 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "/shop",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "/faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
]}
|
||||
brandName="XouT"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }]}
|
||||
brandName="XouT"
|
||||
button={{ text: "Get Started", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero-section" data-section="hero-section">
|
||||
<HeroOverlayTestimonial
|
||||
title="Digital Assets for the Modern Gamer."
|
||||
description="Experience curated discord items and games. Precision, trust, and a touch of Zen in every transaction."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Haruto S.",
|
||||
handle: "@haruto",
|
||||
testimonial: "The Zen-like simplicity of XouT is refreshing.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-background-with-low-poly-plexus-design_1048-14317.jpg?_wi=1",
|
||||
imageAlt: "zen minimalist background dark green",
|
||||
},
|
||||
{
|
||||
name: "Ayaka T.",
|
||||
handle: "@ayaka",
|
||||
testimonial: "Prompt delivery and exceptional items.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777528.jpg",
|
||||
imageAlt: "zen minimalist background dark green",
|
||||
},
|
||||
{
|
||||
name: "Kenji M.",
|
||||
handle: "@kenji",
|
||||
testimonial: "The best place for unique discord items.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-social-media-logo-collection_23-2148293231.jpg?_wi=1",
|
||||
imageAlt: "zen minimalist background dark green",
|
||||
},
|
||||
{
|
||||
name: "Yuki K.",
|
||||
handle: "@yuki",
|
||||
testimonial: "Trustworthy and professional shop.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/web-page-design-user-interface-template-copy-space_53876-120721.jpg?_wi=1",
|
||||
imageAlt: "zen minimalist background dark green",
|
||||
},
|
||||
{
|
||||
name: "Sora H.",
|
||||
handle: "@sora",
|
||||
testimonial: "A truly superior digital shopping experience.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-cyber-monday-labels-collection_52683-72967.jpg?_wi=1",
|
||||
imageAlt: "zen minimalist background dark green",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-render-network-communications-background-with-low-poly-plexus-design_1048-14317.jpg?_wi=2"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/futuristic-galaxy-border-background-gray-minimal-style_53876-125209.jpg",
|
||||
alt: "User 1 avatar",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/artistic-blurry-colorful-wallpaper-background_58702-10062.jpg",
|
||||
alt: "User 2 avatar",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-background-with-patterned-glass-texture_53876-134131.jpg",
|
||||
alt: "User 3 avatar",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133168.jpg",
|
||||
alt: "User 4 avatar",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/corporate-building-with-minimalist-empty-room_23-2148727505.jpg",
|
||||
alt: "User 5 avatar",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 5,000+ gamers"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero-section" data-section="hero-section">
|
||||
<HeroOverlayTestimonial
|
||||
title="Digital Assets for the Modern Gamer."
|
||||
description="Experience curated discord items and games. Precision, trust, and a touch of Zen in every transaction."
|
||||
testimonials={[
|
||||
{ name: "Haruto S.", handle: "@haruto", testimonial: "The Zen-like simplicity of XouT is refreshing.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-background-with-low-poly-plexus-design_1048-14317.jpg", imageAlt: "zen minimalist background dark green" },
|
||||
{ name: "Ayaka T.", handle: "@ayaka", testimonial: "Prompt delivery and exceptional items.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777528.jpg", imageAlt: "zen minimalist background dark green" },
|
||||
{ name: "Kenji M.", handle: "@kenji", testimonial: "The best place for unique discord items.", rating: 5, imageSrc: "http://img.b2bpic.net/free-vector/gradient-social-media-logo-collection_23-2148293231.jpg", imageAlt: "zen minimalist background dark green" },
|
||||
{ name: "Yuki K.", handle: "@yuki", testimonial: "Trustworthy and professional shop.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/web-page-design-user-interface-template-copy-space_53876-120721.jpg", imageAlt: "zen minimalist background dark green" },
|
||||
{ name: "Sora H.", handle: "@sora", testimonial: "A truly superior digital shopping experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-vector/gradient-cyber-monday-labels-collection_52683-72967.jpg", imageAlt: "zen minimalist background dark green" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-render-network-communications-background-with-low-poly-plexus-design_1048-14317.jpg"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/futuristic-galaxy-border-background-gray-minimal-style_53876-125209.jpg", alt: "User 1 avatar" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/artistic-blurry-colorful-wallpaper-background_58702-10062.jpg", alt: "User 2 avatar" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/abstract-background-with-patterned-glass-texture_53876-134131.jpg", alt: "User 3 avatar" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133168.jpg", alt: "User 4 avatar" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/corporate-building-with-minimalist-empty-room_23-2148727505.jpg", alt: "User 5 avatar" }
|
||||
]}
|
||||
avatarText="Trusted by 5,000+ gamers"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777521.jpg"
|
||||
imageAlt="Modern and minimalist office in black and white"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="XouT"
|
||||
description="Premium digital assets marketplace."
|
||||
buttons={[{ text: "Explore", href: "/shop" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777521.jpg"
|
||||
imageAlt="Modern and minimalist office in black and white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Our Philosophy: ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777528.jpg",
|
||||
alt: "Zen office",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " We balance technical performance with aesthetic intent.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Our Philosophy: " },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777528.jpg", alt: "Zen office" },
|
||||
{ type: "text", content: " We balance technical performance with aesthetic intent." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="feature" data-section="feature">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="feature" data-section="feature">
|
||||
<FeatureCardTwentyNine
|
||||
title="Core Features"
|
||||
description="What sets us apart."
|
||||
features={[
|
||||
{ title: "Speed", description: "Lightning fast transactions" },
|
||||
{ title: "Security", description: "Bank grade protection" }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
title="Customer Trust"
|
||||
description="Join 10,000+ happy customers."
|
||||
names={["Alex", "Jordan", "Taylor", "Morgan"]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="XouT"
|
||||
leftLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="XouT"
|
||||
leftLink={{ text: "Terms of Service", href: "#" }}
|
||||
rightLink={{ text: "Privacy Policy", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -22,135 +22,51 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "/shop",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "/faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
]}
|
||||
brandName="XouT"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }, { name: "FAQ", id: "/faq" }, { name: "Contact", id: "/contact" }]}
|
||||
brandName="XouT"
|
||||
button={{ text: "Get Started", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-grid" data-section="product-grid">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Elite Nitro Pack",
|
||||
price: "$19.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-social-media-logo-collection_23-2148293231.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Pro Gaming License",
|
||||
price: "$29.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/web-page-design-user-interface-template-copy-space_53876-120721.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Hacker Identity Badge",
|
||||
price: "$9.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-cyber-monday-labels-collection_52683-72967.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Zen Status Pack",
|
||||
price: "$14.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/business-infographic-with-photo_23-2148339283.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Rare Collector Box",
|
||||
price: "$49.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-cubes-background-abstract_1123-401.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Starter Bundle",
|
||||
price: "$5.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-elements_23-2149061049.jpg",
|
||||
},
|
||||
]}
|
||||
title="Premium Marketplace"
|
||||
description="Browse our curated selection of digital assets and games."
|
||||
/>
|
||||
</div>
|
||||
<div id="product-grid" data-section="product-grid">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Elite Nitro Pack", price: "$19.99", imageSrc: "http://img.b2bpic.net/free-vector/gradient-social-media-logo-collection_23-2148293231.jpg" },
|
||||
{ id: "p2", name: "Pro Gaming License", price: "$29.99", imageSrc: "http://img.b2bpic.net/free-photo/web-page-design-user-interface-template-copy-space_53876-120721.jpg" },
|
||||
{ id: "p3", name: "Hacker Identity Badge", price: "$9.99", imageSrc: "http://img.b2bpic.net/free-vector/gradient-cyber-monday-labels-collection_52683-72967.jpg" }
|
||||
]}
|
||||
title="Premium Marketplace"
|
||||
description="Browse our curated selection of digital assets and games."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Choose Your Tier"
|
||||
description="Select the plan that fits your digital lifestyle."
|
||||
plans={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Essential",
|
||||
price: "$9",
|
||||
features: [
|
||||
"Basic Assets",
|
||||
"24/7 Access",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Elite",
|
||||
price: "$29",
|
||||
features: [
|
||||
"Advanced Assets",
|
||||
"Priority Support",
|
||||
"Discord Badge",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Choose Your Tier"
|
||||
description="Select the plan that fits your digital lifestyle."
|
||||
plans={[
|
||||
{ id: "t1", name: "Essential", price: "$9", features: ["Basic Assets", "24/7 Access"], buttons: [{ text: "Select", href: "#" }] },
|
||||
{ id: "t2", name: "Elite", price: "$29", features: ["Advanced Assets", "Priority Support", "Discord Badge"], buttons: [{ text: "Select", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="XouT"
|
||||
leftLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="XouT"
|
||||
leftLink={{ text: "Terms of Service", href: "#" }}
|
||||
rightLink={{ text: "Privacy Policy", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user