Merge version_2 into main #2
364
src/app/page.tsx
364
src/app/page.tsx
@@ -22,31 +22,19 @@ export default function LandingPage() {
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLarge"
|
||||
background="none"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="OtakuCloset"
|
||||
/>
|
||||
@@ -54,110 +42,17 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Anime Treasures, Reimagined."
|
||||
description="Authentic new and pre-loved anime merchandise, curated from my personal collection to yours. Shipping exclusively within the United States."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex K.",
|
||||
handle: "@alexcollects",
|
||||
testimonial: "Everything arrived in perfect condition. The packaging was so thoughtful!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572736.jpg?_wi=1",
|
||||
imageAlt: "anime merchandise display",
|
||||
},
|
||||
{
|
||||
name: "Jordan P.",
|
||||
handle: "@animeaddict",
|
||||
testimonial: "Finally found the figure I've been searching for. Excellent seller.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-pottery-illustration_23-2151813477.jpg?_wi=1",
|
||||
imageAlt: "anime merchandise display",
|
||||
},
|
||||
{
|
||||
name: "Sam L.",
|
||||
handle: "@otaku_sam",
|
||||
testimonial: "Super fast shipping within the US. The item is exactly as described.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-anime-character-shopping-cartoon-style_23-2151644388.jpg?_wi=1",
|
||||
imageAlt: "anime merchandise display",
|
||||
},
|
||||
{
|
||||
name: "Taylor M.",
|
||||
handle: "@figure_fiend",
|
||||
testimonial: "Amazing collection and very transparent about item condition.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cardboard-box-with-cargo-checklist-pencil_107791-16644.jpg?_wi=1",
|
||||
imageAlt: "anime merchandise display",
|
||||
},
|
||||
{
|
||||
name: "Morgan D.",
|
||||
handle: "@merch_fan",
|
||||
testimonial: "Absolutely love my purchase. Will definitely be keeping an eye on this shop!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/comfortable-card-woman-risk-security-buy_1421-230.jpg?_wi=1",
|
||||
imageAlt: "anime merchandise display",
|
||||
},
|
||||
]}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Cute Anime Treasures"
|
||||
description="Sweetest finds for your collection. Authenticity guaranteed, shipped with love within the US."
|
||||
testimonials={[]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Collection",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
{ text: "Browse Cuties", href: "#products" },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572736.jpg?_wi=2"
|
||||
imageAlt="Anime collection display"
|
||||
imageAlt="Cute anime collectibles"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-anime-character-shopping-cartoon-style_23-2151644412.jpg",
|
||||
alt: "Portrait of anime character shopping in cartoon style",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-arrangement_23-2149854367.jpg",
|
||||
alt: "Retro vhs packaging arrangement",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-anime-character-shopping-cartoon-style_23-2151644403.jpg",
|
||||
alt: "Portrait of anime character shopping in cartoon style",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-character-shopping-anime-style_23-2151644466.jpg",
|
||||
alt: "Portrait of character shopping in anime style",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-anime-character-with-stars_23-2151556382.jpg",
|
||||
alt: "Portrait of anime character with stars",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Curated Anime Gear",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Authentic Figures",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Collector Approved",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "US Only Shipping",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Verified Quality",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -166,12 +61,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Curated for the Collector"
|
||||
description="I'm an avid collector who believes every piece of merch deserves a good home. My shop focuses on high-quality, authentic items that I've personally cared for. By selling through my own shop, I ensure each piece is shipped with the care that true fans understand."
|
||||
buttons={[
|
||||
{
|
||||
text: "Browse Shop",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Browse Shop", href: "#products" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/digital-art-style-pottery-illustration_23-2151813477.jpg?_wi=2"
|
||||
imageAlt="organizing anime collectibles"
|
||||
/>
|
||||
@@ -184,27 +74,9 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Authenticity Guaranteed",
|
||||
description: "Every item is 100% authentic and verified.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-anime-character-shopping-cartoon-style_23-2151644388.jpg?_wi=2",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/3d-view-adorable-pet-cat_23-2150473284.jpg",
|
||||
buttonText: "See Policy",
|
||||
},
|
||||
{
|
||||
title: "US Only Shipping",
|
||||
description: "Dedicated domestic shipping for safer delivery.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cardboard-box-with-cargo-checklist-pencil_107791-16644.jpg?_wi=2",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/worldwide-delivery-world-globe-with-cardboard-boxes-location-pointer-shopping-online-delivery-ecommerce-concept-blue-background-3d-illustration_56104-1813.jpg",
|
||||
buttonText: "Shipping Info",
|
||||
},
|
||||
{
|
||||
title: "Secure Transactions",
|
||||
description: "Shop safely with verified payment methods.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/comfortable-card-woman-risk-security-buy_1421-230.jpg?_wi=2",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/3d-render-safe-payment-via-pos-terminal-concept_107791-17433.jpg",
|
||||
buttonText: "Read More",
|
||||
},
|
||||
{ title: "Authenticity Guaranteed", description: "Every item is 100% authentic and verified.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-anime-character-shopping-cartoon-style_23-2151644388.jpg?_wi=2", titleImageSrc: "http://img.b2bpic.net/free-photo/3d-view-adorable-pet-cat_23-2150473284.jpg", buttonText: "See Policy" },
|
||||
{ title: "US Only Shipping", description: "Dedicated domestic shipping for safer delivery.", imageSrc: "http://img.b2bpic.net/free-photo/cardboard-box-with-cargo-checklist-pencil_107791-16644.jpg?_wi=2", titleImageSrc: "http://img.b2bpic.net/free-photo/worldwide-delivery-world-globe-with-cardboard-boxes-location-pointer-shopping-online-delivery-ecommerce-concept-blue-background-3d-illustration_56104-1813.jpg", buttonText: "Shipping Info" },
|
||||
{ title: "Secure Transactions", description: "Shop safely with verified payment methods.", imageSrc: "http://img.b2bpic.net/free-photo/comfortable-card-woman-risk-security-buy_1421-230.jpg?_wi=2", titleImageSrc: "http://img.b2bpic.net/free-photo/3d-render-safe-payment-via-pos-terminal-concept_107791-17433.jpg", buttonText: "Read More" },
|
||||
]}
|
||||
title="Why Buy from Me?"
|
||||
description="Dedicated to giving my fellow collectors the best experience possible."
|
||||
@@ -217,62 +89,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "GoodSmile",
|
||||
name: "Limited Edition Figure",
|
||||
price: "$89.99",
|
||||
rating: 5,
|
||||
reviewCount: "12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-anime-character-doing-fitness-exercising_23-2151666666.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "StudioG",
|
||||
name: "Enamel Pin Set",
|
||||
price: "$25.00",
|
||||
rating: 5,
|
||||
reviewCount: "8",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/button-warm-blue-shirt-macro-shot_169016-23674.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "AkiraProps",
|
||||
name: "Acrylic Stand",
|
||||
price: "$15.00",
|
||||
rating: 4,
|
||||
reviewCount: "20",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-space-composition-with-astronaut_23-2149101790.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "VibePosters",
|
||||
name: "Wall Scroll",
|
||||
price: "$30.00",
|
||||
rating: 5,
|
||||
reviewCount: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/festive-table-decorating-by-decorations-utensils-new-year-eve-concept_132075-11301.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "RareCard",
|
||||
name: "TCG Pack",
|
||||
price: "$45.00",
|
||||
rating: 5,
|
||||
reviewCount: "15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568837.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Charms",
|
||||
name: "Character Keychain",
|
||||
price: "$10.00",
|
||||
rating: 5,
|
||||
reviewCount: "30",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-with-heart-pendant_1339-2.jpg",
|
||||
},
|
||||
]}
|
||||
products={[]}
|
||||
title="Featured Merchandise"
|
||||
description="Limited quantities available from my private collection."
|
||||
/>
|
||||
@@ -283,56 +100,7 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
tag: "Essentials",
|
||||
price: "$10-$30",
|
||||
period: "item",
|
||||
description: "Perfect for casual fans.",
|
||||
button: {
|
||||
text: "View Shop",
|
||||
},
|
||||
featuresTitle: "Included",
|
||||
features: [
|
||||
"Carefully packed",
|
||||
"US Tracked shipping",
|
||||
"Verified quality",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "standard",
|
||||
tag: "Popular",
|
||||
price: "$30-$80",
|
||||
period: "item",
|
||||
description: "The sweet spot for collectors.",
|
||||
button: {
|
||||
text: "View Shop",
|
||||
},
|
||||
featuresTitle: "Included",
|
||||
features: [
|
||||
"Priority handling",
|
||||
"US Tracked shipping",
|
||||
"Bonus collectibles",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
tag: "Elite",
|
||||
price: "$80+",
|
||||
period: "item",
|
||||
description: "For serious figure collectors.",
|
||||
button: {
|
||||
text: "View Shop",
|
||||
},
|
||||
featuresTitle: "Included",
|
||||
features: [
|
||||
"Insured shipping",
|
||||
"Priority handling",
|
||||
"Personalized note",
|
||||
],
|
||||
},
|
||||
]}
|
||||
plans={[]}
|
||||
title="Shop Tiers"
|
||||
description="Choose your level of collector experience."
|
||||
/>
|
||||
@@ -344,28 +112,6 @@ export default function LandingPage() {
|
||||
testimonial="The attention to detail and packaging was incredible. I've never received a safer figure shipment!"
|
||||
rating={5}
|
||||
author="Sarah M."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-gift_23-2148769779.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-person-holding-out-empty-hand_1048-17796.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/positive-woman-with-curly-hair-waves-hello-camera_273609-52116.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-using-digital-tablet-technology_23-2149491810.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/vintage-vhs-packaging-arrangement_23-2149854272.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
@@ -375,91 +121,29 @@ export default function LandingPage() {
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Where do you ship to?",
|
||||
content: "I ship exclusively within the United States.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How is my item packed?",
|
||||
content: "All items are packed with professional padding and care, especially delicate figures.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Are items new or used?",
|
||||
content: "I clearly state whether an item is new or pre-loved in the product description.",
|
||||
},
|
||||
]}
|
||||
faqs={[]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/purple-yeti-cartoon-with-boxes_23-2150248732.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Collector FAQs"
|
||||
description="Answers to the most common questions about the shop."
|
||||
faqsAnimation="blur-reveal"
|
||||
imageAlt="neatly packed anime box"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Stay Updated"
|
||||
title="Join the Collector List"
|
||||
description="Be the first to know about new listings from my personal collection."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-man-knitting-while-relaxing_23-2149401794.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="happy customer with plush"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="OtakuCloset"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Products",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
columns={[]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f8f5ffe6;
|
||||
--primary-cta: #c89bff;
|
||||
--background: #fdf2f8;
|
||||
--card: #ffffff;
|
||||
--foreground: #4c0519;
|
||||
--primary-cta: #f472b6;
|
||||
--primary-cta-text: #0a0a0a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta: #fce7f3;
|
||||
--secondary-cta-text: #f8f5ffe6;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
--accent: #fbcfe8;
|
||||
--background-accent: #fbcfe8;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user