4 Commits

Author SHA1 Message Date
e4c74ab0e5 Update src/app/page.tsx 2026-05-24 07:13:32 +00:00
4098e1b475 Update src/app/styles/variables.css 2026-05-24 07:13:04 +00:00
1502550692 Update src/app/page.tsx 2026-05-24 07:13:04 +00:00
621fe01496 Merge version_1 into main
Merge version_1 into main
2026-05-24 07:12:07 +00:00
2 changed files with 32 additions and 347 deletions

View File

@@ -22,31 +22,19 @@ export default function LandingPage() {
contentWidth="mediumLarge" contentWidth="mediumLarge"
sizing="mediumLarge" sizing="mediumLarge"
background="none" background="none"
cardStyle="layered-gradient" cardStyle="glass-elevated"
primaryButtonStyle="primary-glow" primaryButtonStyle="gradient"
secondaryButtonStyle="glass" secondaryButtonStyle="solid"
headingFontWeight="medium" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
navItems={[ navItems={[
{ { name: "Home", id: "hero" },
name: "Home", { name: "Shop", id: "products" },
id: "hero", { name: "About", id: "about" },
}, { name: "FAQ", id: "faq" },
{
name: "Shop",
id: "products",
},
{
name: "About",
id: "about",
},
{
name: "FAQ",
id: "faq",
},
]} ]}
brandName="OtakuCloset" brandName="OtakuCloset"
/> />
@@ -54,110 +42,17 @@ export default function LandingPage() {
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardTestimonial <HeroBillboardTestimonial
background={{ background={{ variant: "gradient-bars" }}
variant: "gradient-bars", title="Cute Anime Treasures"
}} description="Sweetest finds for your collection. Authenticity guaranteed, shipped with love within the US."
title="Anime Treasures, Reimagined." testimonials={[]}
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",
},
]}
buttons={[ buttons={[
{ { text: "Browse Cuties", href: "#products" },
text: "Shop Collection", { text: "Learn More", href: "#about" },
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" 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" 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> </div>
@@ -166,12 +61,7 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
title="Curated for the Collector" 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." 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={[ buttons={[{ text: "Browse Shop", href: "#products" }]}
{
text: "Browse Shop",
href: "#products",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/digital-art-style-pottery-illustration_23-2151813477.jpg?_wi=2" imageSrc="http://img.b2bpic.net/free-photo/digital-art-style-pottery-illustration_23-2151813477.jpg?_wi=2"
imageAlt="organizing anime collectibles" imageAlt="organizing anime collectibles"
/> />
@@ -184,27 +74,9 @@ export default function LandingPage() {
gridVariant="bento-grid" gridVariant="bento-grid"
useInvertedBackground={false} useInvertedBackground={false}
features={[ 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: "Authenticity Guaranteed", { 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" },
description: "Every item is 100% authentic and verified.", { 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" },
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?" title="Why Buy from Me?"
description="Dedicated to giving my fellow collectors the best experience possible." description="Dedicated to giving my fellow collectors the best experience possible."
@@ -217,62 +89,7 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
useInvertedBackground={false} useInvertedBackground={false}
products={[ 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",
},
]}
title="Featured Merchandise" title="Featured Merchandise"
description="Limited quantities available from my private collection." description="Limited quantities available from my private collection."
/> />
@@ -283,56 +100,7 @@ export default function LandingPage() {
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
plans={[ 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",
],
},
]}
title="Shop Tiers" title="Shop Tiers"
description="Choose your level of collector experience." description="Choose your level of collector experience."
/> />
@@ -344,28 +112,7 @@ export default function LandingPage() {
testimonial="The attention to detail and packaging was incredible. I've never received a safer figure shipment!" testimonial="The attention to detail and packaging was incredible. I've never received a safer figure shipment!"
rating={5} rating={5}
author="Sarah M." author="Sarah M."
avatars={[ 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" ratingAnimation="blur-reveal"
avatarsAnimation="blur-reveal" avatarsAnimation="blur-reveal"
/> />
@@ -375,91 +122,29 @@ export default function LandingPage() {
<FaqSplitMedia <FaqSplitMedia
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
faqs={[ 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.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/purple-yeti-cartoon-with-boxes_23-2150248732.jpg" imageSrc="http://img.b2bpic.net/free-photo/purple-yeti-cartoon-with-boxes_23-2150248732.jpg"
mediaAnimation="slide-up"
title="Collector FAQs" title="Collector FAQs"
description="Answers to the most common questions about the shop." description="Answers to the most common questions about the shop."
faqsAnimation="blur-reveal" faqsAnimation="blur-reveal"
imageAlt="neatly packed anime box"
/> />
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactSplit <ContactSplit
useInvertedBackground={false} useInvertedBackground={false}
background={{ background={{ variant: "plain" }}
variant: "plain",
}}
tag="Stay Updated" tag="Stay Updated"
title="Join the Collector List" title="Join the Collector List"
description="Be the first to know about new listings from my personal collection." 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" 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>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseCard <FooterBaseCard
logoText="OtakuCloset" logoText="OtakuCloset"
columns={[ 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: "#",
},
],
},
]}
/> />
</div> </div>
</ReactLenis> </ReactLenis>

View File

@@ -10,15 +10,15 @@
--accent: #ffffff; --accent: #ffffff;
--background-accent: #ffffff; */ --background-accent: #ffffff; */
--background: #0a0a0a; --background: #fdf2f8;
--card: #1a1a1a; --card: #ffffff;
--foreground: #f8f5ffe6; --foreground: #4c0519;
--primary-cta: #c89bff; --primary-cta: #f472b6;
--primary-cta-text: #0a0a0a; --primary-cta-text: #0a0a0a;
--secondary-cta: #1a1a1a; --secondary-cta: #fce7f3;
--secondary-cta-text: #f8f5ffe6; --secondary-cta-text: #f8f5ffe6;
--accent: #737373; --accent: #fbcfe8;
--background-accent: #737373; --background-accent: #fbcfe8;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);