bender/ce0fca45-a9be-4b7d-a78d-aa649440ef14
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-03-03 12:56:57 +00:00
commit 84e9ebfb78
630 changed files with 83656 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,120 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterMedia from "@/components/sections/footer/FooterMedia";
export default function AboutPage() {
const navItems = [
{ name: "Shop", id: "products" },
{ name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
{
title: "Shop",
items: [
{ label: "All Collections", href: "/shop" },
{ label: "New Arrivals", href: "/shop?filter=new" },
{ label: "Sale", href: "/shop?filter=sale" },
{ label: "Gift Cards", href: "/gift-cards" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Sustainability", href: "/sustainability" },
{ label: "Careers", href: "/careers" },
{ label: "Blog", href: "/blog" },
],
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Shipping Info", href: "/shipping" },
{ label: "Size Guide", href: "/size-guide" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="StyleHub"
bottomLeftText="Premium Apparel"
bottomRightText="hello@stylehub.com"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="Our Story"
title="Premium Fashion For Everyone"
description="StyleHub was founded with a simple mission: to make premium, high-quality clothing accessible to everyone. We believe that great style shouldn't come at a premium price. Our curated collections feature sustainable materials, ethical manufacturing, and timeless designs that elevate your everyday wardrobe."
metrics={[
{ value: "50K+", title: "Happy Customers" },
{ value: "500+", title: "Products Available" },
]}
imageSrc="http://img.b2bpic.net/free-photo/shopping-center-showroom-with-clothes-from-trendy-collections-retail-market-boutique-with-modern-fashionable-wear-empty-clothing-store-filled-with-new-trends-fashion-brands_482257-61769.jpg"
imageAlt="StyleHub store interior"
useInvertedBackground={true}
mediaAnimation="slide-up"
/>
</div>
<div id="socialproof" data-section="socialproof">
<SocialProofOne
title="Trusted By Industry Leaders"
description="StyleHub partners with leading global brands and retailers to bring you the best in fashion."
tag="Partners"
names={["Nike", "Adidas", "Puma", "Gap", "H&M", "Uniqlo", "Zara"]}
logos={[
"http://img.b2bpic.net/free-vector/minimal-banner-with-text-space_1017-14061.jpg",
"http://img.b2bpic.net/free-vector/abstract-background-design_1040-584.jpg",
"http://img.b2bpic.net/free-vector/cougar-branding-logo-template_23-2149210175.jpg",
"http://img.b2bpic.net/free-vector/creative-gradient-go-logo-template_23-2148973178.jpg",
"http://img.b2bpic.net/free-vector/luxury-brand-letter-h-logo_1035-9026.jpg",
"http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149753026.jpg",
"http://img.b2bpic.net/free-vector/typography-logo-template_23-2150529505.jpg",
]}
textboxLayout="default"
useInvertedBackground={false}
speed={40}
showCard={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/fulllength-portrait-stylish-darkskinned-curly-woman-white-pants-jacket-top-posing-dressing-room-young-lady-leans-hanger_197531-27803.jpg"
imageAlt="Fashion lifestyle footer background"
columns={footerColumns}
logoText="StyleHub"
copyrightText="© 2025 StyleHub. All rights reserved."
/>
</div>
</ThemeProvider>
);
}

130
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,130 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterMedia from "@/components/sections/footer/FooterMedia";
export default function ContactPage() {
const navItems = [
{ name: "Shop", id: "products" },
{ name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
{
title: "Shop",
items: [
{ label: "All Collections", href: "/shop" },
{ label: "New Arrivals", href: "/shop?filter=new" },
{ label: "Sale", href: "/shop?filter=sale" },
{ label: "Gift Cards", href: "/gift-cards" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Sustainability", href: "/sustainability" },
{ label: "Careers", href: "/careers" },
{ label: "Blog", href: "/blog" },
],
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Shipping Info", href: "/shipping" },
{ label: "Size Guide", href: "/size-guide" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="StyleHub"
bottomLeftText="Premium Apparel"
bottomRightText="hello@stylehub.com"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
faqs={[
{
id: "1",
title: "How do I know what size to order?",
content:
"We provide detailed size charts for each product. Refer to our comprehensive sizing guide that compares our measurements to standard sizing. If you're between sizes, we recommend ordering the larger size for comfort. Additionally, our 30-60 day return policy ensures you can exchange items if needed.",
},
{
id: "2",
title: "What is your return and exchange policy?",
content:
"We offer hassle-free returns within 30 days for basic collection items, 60 days for premium items, and lifetime returns for luxury collection purchases. Simply initiate a return through your account, and we'll provide a prepaid shipping label. Exchanges are processed immediately upon receiving your original item.",
},
{
id: "3",
title: "Do you offer international shipping?",
content:
"Yes! We ship to over 150 countries worldwide. Standard international shipping typically takes 7-14 business days. Express options are available for an additional fee. All international orders include tracking and customs support.",
},
{
id: "4",
title: "Are your products sustainably made?",
content:
"Sustainability is at the heart of StyleHub. Our premium and luxury collections feature organic cotton, recycled materials, and ethically sourced fabrics. All manufacturing partners comply with fair labor standards and environmental regulations. Learn more about our sustainability initiatives in our impact report.",
},
{
id: "5",
title: "How can I track my order?",
content:
"Once your order ships, you'll receive an email with a tracking number. You can monitor your package in real-time through your StyleHub account or directly on the carrier's website. For priority support, reach out to our customer service team.",
},
{
id: "6",
title: "Do you offer gift cards or bulk orders?",
content:
"Yes! Digital and physical gift cards are available in any denomination. For bulk orders, corporate inquiries, or wholesale partnerships, please contact our business team at business@stylehub.com for special pricing and white-glove service.",
},
]}
title="Frequently Asked Questions"
description="Find answers to common questions about sizing, shipping, returns, and more. Can't find what you're looking for? Reach out to our support team at hello@stylehub.com."
tag="Help & Support"
textboxLayout="default"
useInvertedBackground={true}
faqsAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/fulllength-portrait-stylish-darkskinned-curly-woman-white-pants-jacket-top-posing-dressing-room-young-lady-leans-hanger_197531-27803.jpg"
imageAlt="Fashion lifestyle footer background"
columns={footerColumns}
logoText="StyleHub"
copyrightText="© 2025 StyleHub. All rights reserved."
/>
</div>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

5
src/app/globals.css Normal file
View File

@@ -0,0 +1,5 @@
@import "tailwindcss";
@import "./styles/variables.css";
@import "./styles/theme.css";
@import "./styles/utilities.css";
@import "./styles/base.css";

1429
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

284
src/app/page.tsx Normal file
View File

@@ -0,0 +1,284 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import FooterMedia from "@/components/sections/footer/FooterMedia";
export default function HomePage() {
const navItems = [
{ name: "Shop", id: "products" },
{ name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
{
title: "Shop",
items: [
{ label: "All Collections", href: "/shop" },
{ label: "New Arrivals", href: "/shop?filter=new" },
{ label: "Sale", href: "/shop?filter=sale" },
{ label: "Gift Cards", href: "/gift-cards" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Sustainability", href: "/sustainability" },
{ label: "Careers", href: "/careers" },
{ label: "Blog", href: "/blog" },
],
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Shipping Info", href: "/shipping" },
{ label: "Size Guide", href: "/size-guide" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="StyleHub"
bottomLeftText="Premium Apparel"
bottomRightText="hello@stylehub.com"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="StyleHub"
description="Discover premium clothing collections curated for modern style. From everyday essentials to statement pieces, find your perfect fit."
buttons={[
{ text: "Shop Now", href: "/shop" },
{ text: "Learn More", href: "#about" },
]}
imageSrc="http://img.b2bpic.net/free-photo/fulllength-portrait-stylish-darkskinned-curly-woman-white-pants-jacket-top-posing-dressing-room-young-lady-leans-hanger_197531-27803.jpg"
imageAlt="Fashion lifestyle background"
showDimOverlay={true}
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
products={[
{
id: "1",
name: "Classic Cotton T-Shirt",
price: "$49.99",
variant: "White, Black, Navy • 5 Colors",
imageSrc:
"http://img.b2bpic.net/free-photo/young-african-american-woman-with-dark-curly-hair-sunglasses-tshirt-pretty-woman-with-blond-hair-shirt-dreamily-looking-camera-while-spending-time-together_574295-5031.jpg",
imageAlt: "Classic cotton t-shirt",
isFavorited: false,
},
{
id: "2",
name: "Slim Fit Denim Jeans",
price: "$89.99",
variant: "Dark Blue • 3 Sizes",
imageSrc:
"http://img.b2bpic.net/free-photo/blue-jeans-fabric-details_150588-48.jpg",
imageAlt: "Slim fit denim jeans",
isFavorited: false,
},
{
id: "3",
name: "Premium Leather Jacket",
price: "$199.99",
variant: "Black • Limited Edition",
imageSrc:
"http://img.b2bpic.net/free-photo/young-woman-demonstrating-upper-cloths_1303-24480.jpg",
imageAlt: "Premium leather jacket",
isFavorited: false,
},
]}
title="Featured Collections"
description="Browse our handpicked selection of premium clothing items. Each piece is carefully curated for quality, comfort, and style."
tag="New Arrivals"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="Our Story"
title="Premium Fashion For Everyone"
description="StyleHub was founded with a simple mission: to make premium, high-quality clothing accessible to everyone. We believe that great style shouldn't come at a premium price. Our curated collections feature sustainable materials, ethical manufacturing, and timeless designs that elevate your everyday wardrobe."
metrics={[
{ value: "50K+", title: "Happy Customers" },
{ value: "500+", title: "Products Available" },
]}
imageSrc="http://img.b2bpic.net/free-photo/shopping-center-showroom-with-clothes-from-trendy-collections-retail-market-boutique-with-modern-fashionable-wear-empty-clothing-store-filled-with-new-trends-fashion-brands_482257-61769.jpg"
imageAlt="StyleHub store interior"
useInvertedBackground={true}
mediaAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
testimonial="StyleHub has completely transformed my wardrobe. The quality is exceptional, the prices are fair, and the customer service is outstanding. I'm now a loyal customer and recommend them to all my friends!"
rating={5}
author="Jessica Chen, Fashion Enthusiast"
avatars={[
{
src: "http://img.b2bpic.net/free-vector/hand-drawn-people-avatar-collection_23-2148074529.jpg",
alt: "Customer avatar",
},
{
src: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",
alt: "Customer avatar",
},
{
src: "http://img.b2bpic.net/free-photo/close-up-young-caucasian-guy-with-beard-smiling-looking-happy-camera-standing-blue-background_1258-40230.jpg",
alt: "Customer avatar",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",
alt: "Customer avatar",
},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="socialproof" data-section="socialproof">
<SocialProofOne
title="Trusted By Leading Brands"
description="Our clothing integrates seamlessly with major retailers and fashion platforms worldwide."
tag="Partners"
names={["Nike", "Adidas", "Puma", "Gap", "H&M", "Uniqlo", "Zara"]}
logos={[
"http://img.b2bpic.net/free-vector/minimal-banner-with-text-space_1017-14061.jpg",
"http://img.b2bpic.net/free-vector/abstract-background-design_1040-584.jpg",
"http://img.b2bpic.net/free-vector/cougar-branding-logo-template_23-2149210175.jpg",
"http://img.b2bpic.net/free-vector/creative-gradient-go-logo-template_23-2148973178.jpg",
"http://img.b2bpic.net/free-vector/luxury-brand-letter-h-logo_1035-9026.jpg",
"http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149753026.jpg",
"http://img.b2bpic.net/free-vector/typography-logo-template_23-2150529505.jpg",
]}
textboxLayout="default"
useInvertedBackground={true}
speed={40}
showCard={true}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
plans={[
{
id: "basic",
tag: "Basic Collection",
price: "$49",
period: "/item",
description:
"Perfect for those just starting their style journey with essential basics.",
button: {
text: "Browse Basics",
href: "/shop?collection=basics",
},
featuresTitle: "Included:",
features: [
"Quality cotton materials",
"Standard sizing",
"Free standard shipping",
"30-day returns",
],
},
{
id: "premium",
tag: "Premium Collection",
price: "$99",
period: "/item",
description:
"Elevate your wardrobe with our curated premium selection of designer pieces.",
button: {
text: "Explore Premium",
href: "/shop?collection=premium",
},
featuresTitle: "Included:",
features: [
"Premium fabrics & finishes",
"Extended sizing options",
"Free express shipping",
"60-day returns",
"Personal styling guide",
],
},
{
id: "luxury",
tag: "Luxury Collection",
price: "$199",
period: "/item",
description:
"Experience the pinnacle of fashion with our exclusive luxury line.",
button: {
text: "View Luxury",
href: "/shop?collection=luxury",
},
featuresTitle: "Included:",
features: [
"Exclusive designer brands",
"Limited edition pieces",
"Priority customer service",
"Free worldwide shipping",
"Lifetime returns policy",
"Personal stylist access",
],
},
]}
title="Our Collections"
description="Choose the collection that matches your style and budget. Each tier offers exceptional value and quality."
tag="Collections"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/fulllength-portrait-stylish-darkskinned-curly-woman-white-pants-jacket-top-posing-dressing-room-young-lady-leans-hanger_197531-27803.jpg"
imageAlt="Fashion lifestyle footer background"
columns={footerColumns}
logoText="StyleHub"
copyrightText="© 2025 StyleHub. All rights reserved."
/>
</div>
</ThemeProvider>
);
}

198
src/app/shop/page.tsx Normal file
View File

@@ -0,0 +1,198 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import FooterMedia from "@/components/sections/footer/FooterMedia";
export default function ShopPage() {
const navItems = [
{ name: "Shop", id: "products" },
{ name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
{
title: "Shop",
items: [
{ label: "All Collections", href: "/shop" },
{ label: "New Arrivals", href: "/shop?filter=new" },
{ label: "Sale", href: "/shop?filter=sale" },
{ label: "Gift Cards", href: "/gift-cards" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Sustainability", href: "/sustainability" },
{ label: "Careers", href: "/careers" },
{ label: "Blog", href: "/blog" },
],
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Shipping Info", href: "/shipping" },
{ label: "Size Guide", href: "/size-guide" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="StyleHub"
bottomLeftText="Premium Apparel"
bottomRightText="hello@stylehub.com"
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
products={[
{
id: "1",
name: "Classic Cotton T-Shirt",
price: "$49.99",
variant: "White, Black, Navy • 5 Colors",
imageSrc:
"http://img.b2bpic.net/free-photo/young-african-american-woman-with-dark-curly-hair-sunglasses-tshirt-pretty-woman-with-blond-hair-shirt-dreamily-looking-camera-while-spending-time-together_574295-5031.jpg",
imageAlt: "Classic cotton t-shirt",
isFavorited: false,
},
{
id: "2",
name: "Slim Fit Denim Jeans",
price: "$89.99",
variant: "Dark Blue • 3 Sizes",
imageSrc:
"http://img.b2bpic.net/free-photo/blue-jeans-fabric-details_150588-48.jpg",
imageAlt: "Slim fit denim jeans",
isFavorited: false,
},
{
id: "3",
name: "Premium Leather Jacket",
price: "$199.99",
variant: "Black • Limited Edition",
imageSrc:
"http://img.b2bpic.net/free-photo/young-woman-demonstrating-upper-cloths_1303-24480.jpg",
imageAlt: "Premium leather jacket",
isFavorited: false,
},
]}
title="Shop All Collections"
description="Explore our full range of premium clothing items. Discover new arrivals, bestsellers, and exclusive pieces."
tag="Shop"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
plans={[
{
id: "basic",
tag: "Basic Collection",
price: "$49",
period: "/item",
description:
"Perfect for those just starting their style journey with essential basics.",
button: {
text: "Browse Basics",
href: "/shop?collection=basics",
},
featuresTitle: "Included:",
features: [
"Quality cotton materials",
"Standard sizing",
"Free standard shipping",
"30-day returns",
],
},
{
id: "premium",
tag: "Premium Collection",
price: "$99",
period: "/item",
description:
"Elevate your wardrobe with our curated premium selection of designer pieces.",
button: {
text: "Explore Premium",
href: "/shop?collection=premium",
},
featuresTitle: "Included:",
features: [
"Premium fabrics & finishes",
"Extended sizing options",
"Free express shipping",
"60-day returns",
"Personal styling guide",
],
},
{
id: "luxury",
tag: "Luxury Collection",
price: "$199",
period: "/item",
description:
"Experience the pinnacle of fashion with our exclusive luxury line.",
button: {
text: "View Luxury",
href: "/shop?collection=luxury",
},
featuresTitle: "Included:",
features: [
"Exclusive designer brands",
"Limited edition pieces",
"Priority customer service",
"Free worldwide shipping",
"Lifetime returns policy",
"Personal stylist access",
],
},
]}
title="Shop By Collection"
description="Select the collection that matches your style and budget."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/fulllength-portrait-stylish-darkskinned-curly-woman-white-pants-jacket-top-posing-dressing-room-young-lady-leans-hanger_197531-27803.jpg"
imageAlt="Fashion lifestyle footer background"
columns={footerColumns}
logoText="StyleHub"
copyrightText="© 2025 StyleHub. All rights reserved."
/>
</div>
</ThemeProvider>
);
}

28
src/app/styles/base.css Normal file
View File

@@ -0,0 +1,28 @@
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-dm-sans), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-dm-sans), sans-serif;
}

176
src/app/styles/theme.css Normal file
View File

@@ -0,0 +1,176 @@
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}

228
src/app/styles/utilities.css Normal file
View File

@@ -0,0 +1,228 @@
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.inset-glow-border {
@apply relative;
}
.inset-glow-border::before {
content: "";
@apply absolute pointer-events-none inset-0 p-[1px];
border-radius: inherit;
background: linear-gradient(
0deg,
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
.mask-fade-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y-medium {
mask-image: linear-gradient(to bottom,
transparent 0%,
black 20%,
black 80%,
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 40s linear infinite;
}
@keyframes marquee-vertical-reverse {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
.animate-marquee-vertical-reverse {
animation: marquee-vertical-reverse 40s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}

217
src/app/styles/variables.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #1c1c1c;;
--secondary-cta: #ffffff;;
--accent: #159c49;;
--background-accent: #a8e8ba;; */
--background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #1c1c1c;;
--primary-cta-text: #f5f5f5;;
--secondary-cta: #ffffff;;
--secondary-cta-text: #1c1c1c;;
--accent: #159c49;;
--background-accent: #a8e8ba;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}