Merge version_3 into main #4
221
src/app/page.tsx
221
src/app/page.tsx
@@ -7,7 +7,7 @@ import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import { Sparkles } from "lucide-react";
|
||||
|
||||
@@ -19,155 +19,92 @@ export default function LandingPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="medium"
|
||||
background="blurBottom"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
background="none"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Collections", id: "collections"},
|
||||
{
|
||||
name: "Reviews", id: "testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "faq"},
|
||||
]}
|
||||
brandName="StickerJoy"
|
||||
button={{ text: "Shop Now", href: "#collections" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Stickers", id: "collections" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="StickerShop"
|
||||
button={{ text: "Shop Now", href: "#collections" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
title="Express Yourself with Every Sticker"
|
||||
description="High-quality, waterproof vinyl stickers for your laptop, water bottle, and more. Join our community of collectors."
|
||||
tag="New Designs Daily"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcCdVEE03En0fWsKBtIIgDUVgP/a-vibrant-assortment-of-colorful-high-qu-1774779113695-5a3a33eb.png?_wi=1", imageAlt: "Sticker Assortment"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcCdVEE03En0fWsKBtIIgDUVgP/close-up-shot-of-a-high-quality-glossy-s-1774779114102-007da368.png", imageAlt: "Sticker Detail"}
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Over 5,000 happy customers"
|
||||
tagIcon={Sparkles}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now", href: "#collections"},
|
||||
{
|
||||
text: "View All", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "plain" }}
|
||||
title="Minimalist Sticker Shop"
|
||||
description="Discover high-quality, clean designs for every surface. Elevate your everyday items with our curated sticker selection."
|
||||
tag="New Collections"
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcCdVEE03En0fWsKBtIIgDUVgP/a-vibrant-assortment-of-colorful-high-qu-1774779113695-5a3a33eb.png?_wi=1", imageAlt: "Minimalist Sticker Design" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcCdVEE03En0fWsKBtIIgDUVgP/close-up-shot-of-a-high-quality-glossy-s-1774779114102-007da368.png", imageAlt: "Sticker Detail" }
|
||||
]}
|
||||
mediaAnimation="none"
|
||||
rating={5}
|
||||
ratingText="Trusted by thousands"
|
||||
tagIcon={Sparkles}
|
||||
buttons={[{ text: "Explore", href: "#collections" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="collections" data-section="collections">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Cute Critters", price: "$3.50", variant: "Glossy", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcCdVEE03En0fWsKBtIIgDUVgP/cute-animal-sticker-set-on-a-table-vibra-1774779116065-1ea32bca.png"},
|
||||
{
|
||||
id: "p2", name: "Botanical Bliss", price: "$4.00", variant: "Matte", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcCdVEE03En0fWsKBtIIgDUVgP/nature-and-flower-themed-stickers-on-a-l-1774779113731-d30c2c54.png"},
|
||||
{
|
||||
id: "p3", name: "Modern Abstract", price: "$3.75", variant: "Holographic", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcCdVEE03En0fWsKBtIIgDUVgP/abstract-minimalist-shape-stickers-with--1774779113062-9c54440c.png"},
|
||||
{
|
||||
id: "p4", name: "Retro Vibes", price: "$3.25", variant: "Glossy", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcCdVEE03En0fWsKBtIIgDUVgP/a-vibrant-assortment-of-colorful-high-qu-1774779113695-5a3a33eb.png?_wi=2"},
|
||||
]}
|
||||
title="Shop Our Collections"
|
||||
description="Discover our latest and most popular designs."
|
||||
/>
|
||||
</div>
|
||||
<div id="collections" data-section="collections">
|
||||
<ProductCatalog
|
||||
layout="section"
|
||||
products={[
|
||||
{ id: "s1", name: "Geometric Wave", price: "$3.00", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcCdVEE03En0fWsKBtIIgDUVgP/abstract-minimalist-shape-stickers-with--1774779113062-9c54440c.png" },
|
||||
{ id: "s2", name: "Line Art Floral", price: "$3.50", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcCdVEE03En0fWsKBtIIgDUVgP/nature-and-flower-themed-stickers-on-a-l-1774779113731-d30c2c54.png" },
|
||||
{ id: "s3", name: "Minimal Dot", price: "$2.50", rating: 4, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcCdVEE03En0fWsKBtIIgDUVgP/a-vibrant-assortment-of-colorful-high-qu-1774779113695-5a3a33eb.png?_wi=2" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah J.", role: "Collector", company: "Sticker Enthusiasts", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-middle-age-woman-party-hat-holding-paper-bag-with-birthday-gifts-with-closed-eyes-smiling-cheerfully-celebrating-birthday-party-standing-orange-wall_141793-100957.jpg?_wi=1"},
|
||||
{
|
||||
id: "2", name: "Mark D.", role: "Fan", company: "Creative Souls", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-with-shopping-bags_23-2147932387.jpg"},
|
||||
{
|
||||
id: "3", name: "Emily R.", role: "Designer", company: "Art Studio", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-sporty-man-wearing-points-medal-isolated-pink-wall_141793-78494.jpg"},
|
||||
{
|
||||
id: "4", name: "David K.", role: "Buyer", company: "Happy Client", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-attractive-female-white-t-shirt-colored-coat-posing-with-skateboard-smiling-pink-background_140725-26048.jpg"},
|
||||
{
|
||||
id: "5", name: "Chloe T.", role: "Artist", company: "Creative Collective", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-middle-age-woman-party-hat-holding-paper-bag-with-birthday-gifts-with-closed-eyes-smiling-cheerfully-celebrating-birthday-party-standing-orange-wall_141793-100957.jpg?_wi=2"},
|
||||
]}
|
||||
title="What Our Collectors Say"
|
||||
description="Join thousands of fans around the world."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="none"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
testimonials={[]}
|
||||
title="Customer Favorites"
|
||||
description="Loved by minimalist enthusiasts everywhere."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "Are these stickers waterproof?", content: "Yes! All our vinyl stickers are fully waterproof and UV resistant."},
|
||||
{
|
||||
id: "f2", title: "How long is shipping?", content: "Shipping usually takes 3-5 business days within the continental US."},
|
||||
{
|
||||
id: "f3", title: "Do you accept wholesale orders?", content: "Absolutely. Reach out via our contact page for wholesale inquiries."},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
sideDescription="Everything you need to know about our stickers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{ id: "f1", title: "Quality Guarantee", content: "All our stickers are waterproof, scratch-resistant, and matte finished for a clean look." },
|
||||
]}
|
||||
faqsAnimation="none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
tag="Join our Newsletter"
|
||||
title="Get exclusive drops in your inbox."
|
||||
description="Sign up for updates on our latest designs and special offers."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Stay Updated"
|
||||
title="Minimalist Newsletter"
|
||||
description="Join our list for exclusive sticker drops."
|
||||
background={{ variant: "plain" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{
|
||||
label: "All Stickers", href: "#"},
|
||||
{
|
||||
label: "New Arrivals", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "Contact", href: "#"},
|
||||
{
|
||||
label: "Shipping Policy", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 StickerJoy. All rights reserved."
|
||||
bottomRightText="Privacy Policy"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Catalog", href: "#collections" }] },
|
||||
{ title: "Contact", items: [{ label: "Support", href: "#" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 StickerShop"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -12,13 +12,13 @@
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #106EFB;
|
||||
--foreground: #1a1a1a;
|
||||
--primary-cta: #000000;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta: #f1f1f1;
|
||||
--secondary-cta-text: #000612e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #106EFB;
|
||||
--accent: #e5e5e5;
|
||||
--background-accent: #f9f9f9;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user