bender/8757819a-6f68-40cd-a24d-e2f4d724ff4c
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-05 11:36:59 +00:00
commit 17216ead99
630 changed files with 85967 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,166 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ContactText from "@/components/sections/contact/ContactText";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
export default function AboutPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Shop All", id: "/shop" },
{ name: "Men", id: "/men" },
{ name: "Women", id: "/women" },
{ name: "Unisex", id: "/unisex" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="aurora"
cardStyle="gradient-radial"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Desert Aura"
navItems={navItems}
button={{
text: "Shop Now",
href: "/shop",
}}
/>
</div>
<div id="about-desert-aura" data-section="about-desert-aura">
<TextSplitAbout
title="Affordable Luxury Perfumes from Dubai"
description={[
"Desert Aura is your gateway to premium-inspired fragrances at accessible prices. Based in Dubai, we carefully curate a diverse collection of high-end perfumes and body oils for men, women, and unisex preferences — delivering quality scents across the entire UAE.",
"Our mission is simple: make luxury fragrance attainable for everyone. We believe that smelling extraordinary shouldn't come with an extraordinary price tag. Every fragrance in our collection is handpicked to ensure longevity, quality, and that coveted luxury feel.",
"Whether you're shopping for yourself or finding the perfect gift, our Dubai-based team is here to help. We offer personalized recommendations, fast UAE-wide delivery, and customer support you can trust.",
]}
useInvertedBackground={false}
buttons={[{ text: "Explore Full Range", href: "/shop" }]}
showBorder={true}
/>
</div>
<div id="about-impact" data-section="about-impact">
<MetricCardSeven
title="Our Impact in UAE"
description="Proud to serve customers across the Emirates with premium-inspired fragrances"
metrics={[
{
id: "1",
value: "7+",
title: "Emirates Served",
items: [
"Fast delivery across all UAE emirates",
"Local Dubai-based fulfillment center",
],
},
{
id: "2",
value: "1000+",
title: "Happy Customers",
items: [
"Trusted by fragrance enthusiasts across UAE",
"High repeat purchase rate",
],
},
{
id: "3",
value: "50+",
title: "Fragrance Options",
items: [
"Carefully curated collection",
"Men's, women's, and unisex selections",
],
},
{
id: "4",
value: "24/7",
title: "Customer Support",
items: [
"WhatsApp, phone, and email assistance",
"Expert fragrance recommendations",
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="about-cta" data-section="about-cta">
<ContactText
text="Experience the Desert Aura difference. Discover why customers across the UAE choose us for their fragrance needs. Shop now and receive personalized recommendations from our fragrance experts."
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttons={[
{ text: "Start Shopping", href: "/shop" },
{ text: "Contact Us", href: "/contact" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Shop",
items: [
{ label: "All Perfumes", href: "/shop" },
{ label: "Men's Collection", href: "/men" },
{ label: "Women's Collection", href: "/women" },
{ label: "Unisex Fragrances", href: "/unisex" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Contact", href: "/contact" },
{ label: "Shipping Info", href: "#" },
{ label: "Returns", href: "#" },
],
},
{
title: "Contact",
items: [
{ label: "Email", href: "mailto:shopdesertaura@gmail.com" },
{ label: "Phone", href: "tel:+971523412447" },
{ label: "Dubai, UAE", href: "#" },
{ label: "WhatsApp", href: "https://wa.me/971523412447" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" },
{ label: "Cookie Policy", href: "#" },
],
},
]}
bottomLeftText="© 2025 Desert Aura. All rights reserved."
bottomRightText="Premium Perfumes • Dubai, UAE"
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,161 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ContactText from "@/components/sections/contact/ContactText";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
export default function ContactPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Shop All", id: "/shop" },
{ name: "Men", id: "/men" },
{ name: "Women", id: "/women" },
{ name: "Unisex", id: "/unisex" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="aurora"
cardStyle="gradient-radial"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Desert Aura"
navItems={navItems}
button={{
text: "Shop Now",
href: "/shop",
}}
/>
</div>
<div id="contact-hero" data-section="contact-hero">
<ContactText
text="Get in touch with our Dubai-based fragrance experts. Whether you have questions about our fragrances, need personalized recommendations, or want to discuss bulk orders, we're here to help. Reach out via phone, WhatsApp, or email — we respond quickly to all inquiries."
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttons={[
{ text: "Call Us Now", href: "tel:+971523412447" },
{ text: "WhatsApp Us", href: "https://wa.me/971523412447" },
]}
/>
</div>
<div id="contact-info" data-section="contact-info">
<MetricCardSeven
title="Contact Information"
description="Multiple ways to reach our Dubai-based customer support team"
metrics={[
{
id: "1",
value: "📞",
title: "Phone Support",
items: ["+971 52 341 2447", "Available 7 days a week"],
},
{
id: "2",
value: "💬",
title: "WhatsApp Chat",
items: [
"Real-time messaging support",
"Quick responses to inquiries",
],
},
{
id: "3",
value: "📧",
title: "Email Us",
items: [
"shopdesertaura@gmail.com",
"We reply within 24 hours",
],
},
{
id: "4",
value: "🏢",
title: "Visit Us",
items: [
"Dubai, United Arab Emirates",
"Local fulfillment center",
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactText
text="Have a question about a specific fragrance? Want help selecting your perfect scent? Our team loves talking about perfumes and is ready to assist you in finding exactly what you're looking for. Don't hesitate to reach out!"
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttons={[
{ text: "Send Message", href: "mailto:shopdesertaura@gmail.com" },
{ text: "Browse Shop", href: "/shop" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Shop",
items: [
{ label: "All Perfumes", href: "/shop" },
{ label: "Men's Collection", href: "/men" },
{ label: "Women's Collection", href: "/women" },
{ label: "Unisex Fragrances", href: "/unisex" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Contact", href: "/contact" },
{ label: "Shipping Info", href: "#" },
{ label: "Returns", href: "#" },
],
},
{
title: "Contact",
items: [
{ label: "Email", href: "mailto:shopdesertaura@gmail.com" },
{ label: "Phone", href: "tel:+971523412447" },
{ label: "Dubai, UAE", href: "#" },
{ label: "WhatsApp", href: "https://wa.me/971523412447" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" },
{ label: "Cookie Policy", href: "#" },
],
},
]}
bottomLeftText="© 2025 Desert Aura. All rights reserved."
bottomRightText="Premium Perfumes • Dubai, UAE"
/>
</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";

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,354 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
import { ArrowRight, Package } from "lucide-react";
export default function HomePage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Shop All", id: "/shop" },
{ name: "Men", id: "/men" },
{ name: "Women", id: "/women" },
{ name: "Unisex", id: "/unisex" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="aurora"
cardStyle="gradient-radial"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Desert Aura"
navItems={navItems}
button={{
text: "Shop Now",
href: "/shop",
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboardSplit
logoText="DESERT AURA"
description="Luxury Fragrance, Without the Luxury Price. Discover premium-inspired perfumes crafted for every mood, every style, and every occasion — delivered across the UAE."
background={{ variant: "radial-gradient" }}
buttons={[
{ text: "Shop Collection", href: "/shop" },
{ text: "Call Now", href: "tel:+971523412447" },
]}
layoutOrder="default"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWUcIUCCw069MQ36u14TNK1c4P/uploaded-1772710505649-zmgmgf3f.png"
imageAlt="Luxury Desert Aura perfume bottle on elegant display"
frameStyle="card"
mediaAnimation="slide-up"
/>
</div>
<div id="trust-signals" data-section="trust-signals">
<MetricCardSeven
title="Why Choose Desert Aura"
description="Premium-inspired fragrances trusted by UAE customers"
metrics={[
{
id: "1",
value: "UAE-Wide",
title: "Delivery Coverage",
items: [
"Fast shipping across Emirates",
"Local Dubai-based fulfillment",
],
},
{
id: "2",
value: "Premium",
title: "Affordable Luxury",
items: [
"High-end quality at accessible prices",
"Luxury-inspired fragrances",
],
},
{
id: "3",
value: "100%",
title: "Customer Support",
items: [
"Dubai-based customer service",
"Phone & WhatsApp assistance",
],
},
{
id: "4",
value: "Gift-Ready",
title: "Premium Packaging",
items: [
"Elegant presentation packaging",
"Perfect for all occasions",
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="featured-products" data-section="featured-products">
<ProductCardFour
title="Best Sellers"
description="Discover our most-loved fragrances curated for discerning perfume enthusiasts"
tag="Bestsellers"
tagIcon={Package}
products={[
{
id: "1",
name: "Midnight Oud",
price: "AED 89",
variant: "50ml • Deep & Woody",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWUcIUCCw069MQ36u14TNK1c4P/uploaded-1772710505650-m1i3frkd.png",
imageAlt: "Midnight Oud premium fragrance",
},
{
id: "2",
name: "Desert Rose Bloom",
price: "AED 79",
variant: "50ml • Floral & Fresh",
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-photo-fragrance-bottle-with-flowers_114579-51645.jpg",
imageAlt: "Desert Rose Bloom fragrance",
},
{
id: "3",
name: "Golden Amber",
price: "AED 85",
variant: "50ml • Warm & Sensual",
imageSrc:
"http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669106.jpg",
imageAlt: "Golden Amber luxury perfume",
},
{
id: "4",
name: "Fresh Citrus Dream",
price: "AED 75",
variant: "50ml • Citrus & Clean",
imageSrc:
"http://img.b2bpic.net/free-photo/still-life-beauty-products-based-regenerative-agriculture_23-2150721383.jpg",
imageAlt: "Fresh Citrus Dream unisex fragrance",
},
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "View All Products", href: "/shop" }]}
/>
</div>
<div id="collections" data-section="collections">
<FeatureCardTwentySix
title="Shop by Collection"
description="Explore our curated fragrance collections for every preference and occasion"
features={[
{
title: "Men's Perfumes",
description:
"Powerful, masculine scents that define confidence and sophistication",
imageSrc:
"http://img.b2bpic.net/free-photo/black-bottle-mens-perfume-cosmetic-bag-dark-blue-background-space-text_185193-161788.jpg",
imageAlt: "Men's fragrance collection",
buttonIcon: ArrowRight,
buttonHref: "/men",
},
{
title: "Women's Perfumes",
description:
"Elegant, feminine fragrances capturing beauty and grace",
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-photo-fragrance-bottle-with-flowers_114579-51645.jpg",
imageAlt: "Women's fragrance collection",
buttonIcon: ArrowRight,
buttonHref: "/women",
},
{
title: "Unisex Fragrances",
description:
"Versatile scents for anyone who appreciates quality and uniqueness",
imageSrc:
"http://img.b2bpic.net/free-photo/still-life-beauty-products-based-regenerative-agriculture_23-2150721383.jpg",
imageAlt: "Unisex fragrance collection",
buttonIcon: ArrowRight,
buttonHref: "/unisex",
},
{
title: "New Arrivals",
description:
"Latest premium fragrances just added to our exclusive collection",
imageSrc:
"http://img.b2bpic.net/free-psd/new-arrival-sale-template-design_23-2149907494.jpg",
imageAlt: "New arrivals fragrance showcase",
buttonIcon: ArrowRight,
buttonHref: "/shop",
},
]}
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
title="Real Reviews, Real Obsession"
description="See what UAE customers say about their Desert Aura fragrance experiences"
testimonials={[
{
id: "1",
title: "Luxury Quality, Smart Pricing",
quote:
"I was amazed at how premium these perfumes feel compared to the price. Desert Aura has become my go-to for all my fragrance needs. Fast delivery across Dubai is a huge plus!",
name: "Fatima Al Mansouri",
role: "Customer from Abu Dhabi",
imageSrc:
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
imageAlt: "Fatima Al Mansouri",
},
{
id: "2",
title: "Long-Lasting Scents I Love",
quote:
"The fragrances last all day without being overpowering. I've tried several brands, and Desert Aura's collection rivals much more expensive options. Highly recommended!",
name: "Mohammed Al Ketbi",
role: "Customer from Dubai",
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
imageAlt: "Mohammed Al Ketbi",
},
{
id: "3",
title: "Perfect for Gifts & Personal Use",
quote:
"The packaging is so elegant. I've gifted several bottles to friends, and they all asked where I bought them. Desert Aura is my new favorite perfume store!",
name: "Aisha Al Suwaidi",
role: "Customer from Sharjah",
imageSrc:
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
imageAlt: "Aisha Al Suwaidi",
},
{
id: "4",
title: "Excellent Customer Service",
quote:
"The team helped me find exactly what I was looking for. Their knowledge of fragrances and quick responses made my shopping experience amazing. Will definitely order again!",
name: "Omar Al Mazrouei",
role: "Customer from Ajman",
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
imageAlt: "Omar Al Mazrouei",
},
{
id: "5",
title: "Best Perfume Value in UAE",
quote:
"Finally, a store where quality and affordability come together. The fragrance selection is impressive, and UAE-wide delivery is a game-changer!",
name: "Leila Al Marri",
role: "Customer from Ras Al Khaimah",
imageSrc:
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
imageAlt: "Leila Al Marri",
},
{
id: "6",
title: "Reliable Service, Fantastic Scents",
quote:
"Ordered multiple times now. Every fragrance is consistent, delivery is fast, and customer support is genuinely helpful. Desert Aura is worth every dirham!",
name: "Rashid Al Dhaheri",
role: "Customer from Fujairah",
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
imageAlt: "Rashid Al Dhaheri",
},
]}
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactText
text="Need Help Choosing Your Perfect Fragrance? Our Dubai-based team is ready to assist you via phone, WhatsApp, or email. Get personalized recommendations for the scent that matches your style."
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttons={[
{ text: "Call Us Now", href: "tel:+971523412447" },
{ text: "Send Inquiry", href: "/contact" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Shop",
items: [
{ label: "All Perfumes", href: "/shop" },
{ label: "Men's Collection", href: "/men" },
{ label: "Women's Collection", href: "/women" },
{ label: "Unisex Fragrances", href: "/unisex" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Contact", href: "/contact" },
{ label: "Shipping Info", href: "#" },
{ label: "Returns", href: "#" },
],
},
{
title: "Contact",
items: [
{ label: "Email", href: "mailto:shopdesertaura@gmail.com" },
{ label: "Phone", href: "tel:+971523412447" },
{ label: "Dubai, UAE", href: "#" },
{ label: "WhatsApp", href: "https://wa.me/971523412447" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" },
{ label: "Cookie Policy", href: "#" },
],
},
]}
bottomLeftText="© 2025 Desert Aura. All rights reserved."
bottomRightText="Premium Perfumes • Dubai, UAE"
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,226 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import ContactText from "@/components/sections/contact/ContactText";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
import { ArrowRight, Package } from "lucide-react";
export default function ShopPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Shop All", id: "/shop" },
{ name: "Men", id: "/men" },
{ name: "Women", id: "/women" },
{ name: "Unisex", id: "/unisex" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="aurora"
cardStyle="gradient-radial"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Desert Aura"
navItems={navItems}
button={{
text: "Shop Now",
href: "/shop",
}}
/>
</div>
<div id="shop-products" data-section="shop-products">
<ProductCardFour
title="Complete Fragrance Collection"
description="Explore our full range of premium-inspired perfumes. From timeless classics to contemporary blends, find the perfect scent for every occasion."
tag="Shop All"
tagIcon={Package}
products={[
{
id: "1",
name: "Midnight Oud",
price: "AED 89",
variant: "50ml • Deep & Woody",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWUcIUCCw069MQ36u14TNK1c4P/uploaded-1772710505650-m1i3frkd.png",
imageAlt: "Midnight Oud premium fragrance",
},
{
id: "2",
name: "Desert Rose Bloom",
price: "AED 79",
variant: "50ml • Floral & Fresh",
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-photo-fragrance-bottle-with-flowers_114579-51645.jpg",
imageAlt: "Desert Rose Bloom fragrance",
},
{
id: "3",
name: "Golden Amber",
price: "AED 85",
variant: "50ml • Warm & Sensual",
imageSrc:
"http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669106.jpg",
imageAlt: "Golden Amber luxury perfume",
},
{
id: "4",
name: "Fresh Citrus Dream",
price: "AED 75",
variant: "50ml • Citrus & Clean",
imageSrc:
"http://img.b2bpic.net/free-photo/still-life-beauty-products-based-regenerative-agriculture_23-2150721383.jpg",
imageAlt: "Fresh Citrus Dream unisex fragrance",
},
{
id: "5",
name: "Spice & Smoke",
price: "AED 88",
variant: "50ml • Spicy & Warm",
imageSrc:
"http://img.b2bpic.net/free-photo/black-bottle-mens-perfume-cosmetic-bag-dark-blue-background-space-text_185193-161788.jpg",
imageAlt: "Spice and Smoke fragrance",
},
{
id: "6",
name: "Vanilla Elegance",
price: "AED 77",
variant: "50ml • Soft & Sweet",
imageSrc:
"http://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg",
imageAlt: "Vanilla Elegance fragrance",
},
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="shop-collections" data-section="shop-collections">
<FeatureCardTwentySix
title="Browse by Category"
description="Select your preferred fragrance type and find your signature scent"
features={[
{
title: "Men's Perfumes",
description:
"Powerful, masculine scents that define confidence and sophistication",
imageSrc:
"http://img.b2bpic.net/free-photo/black-bottle-mens-perfume-cosmetic-bag-dark-blue-background-space-text_185193-161788.jpg",
imageAlt: "Men's fragrance collection",
buttonIcon: ArrowRight,
buttonHref: "/men",
},
{
title: "Women's Perfumes",
description:
"Elegant, feminine fragrances capturing beauty and grace",
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-photo-fragrance-bottle-with-flowers_114579-51645.jpg",
imageAlt: "Women's fragrance collection",
buttonIcon: ArrowRight,
buttonHref: "/women",
},
{
title: "Unisex Fragrances",
description:
"Versatile scents for anyone who appreciates quality and uniqueness",
imageSrc:
"http://img.b2bpic.net/free-photo/still-life-beauty-products-based-regenerative-agriculture_23-2150721383.jpg",
imageAlt: "Unisex fragrance collection",
buttonIcon: ArrowRight,
buttonHref: "/unisex",
},
{
title: "Limited Edition",
description:
"Exclusive fragrances available for a limited time only",
imageSrc:
"http://img.b2bpic.net/free-psd/new-arrival-sale-template-design_23-2149907494.jpg",
imageAlt: "Limited edition fragrances",
buttonIcon: ArrowRight,
buttonHref: "/shop",
},
]}
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="slide-up"
/>
</div>
<div id="shop-cta" data-section="shop-cta">
<ContactText
text="Can't decide which fragrance is right for you? Let our fragrance experts guide you through our collection. Chat with us today for personalized recommendations delivered to your doorstep."
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttons={[
{ text: "Get Expert Help", href: "/contact" },
{ text: "View All Collections", href: "/shop" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Shop",
items: [
{ label: "All Perfumes", href: "/shop" },
{ label: "Men's Collection", href: "/men" },
{ label: "Women's Collection", href: "/women" },
{ label: "Unisex Fragrances", href: "/unisex" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Contact", href: "/contact" },
{ label: "Shipping Info", href: "#" },
{ label: "Returns", href: "#" },
],
},
{
title: "Contact",
items: [
{ label: "Email", href: "mailto:shopdesertaura@gmail.com" },
{ label: "Phone", href: "tel:+971523412447" },
{ label: "Dubai, UAE", href: "#" },
{ label: "WhatsApp", href: "https://wa.me/971523412447" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms & Conditions", href: "#" },
{ label: "Cookie Policy", href: "#" },
],
},
]}
bottomLeftText="© 2025 Desert Aura. All rights reserved."
bottomRightText="Premium Perfumes • Dubai, UAE"
/>
</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-open-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-open-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: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--secondary-cta: #ecebea;
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f5f5f5;
--card: #ffffff;
--foreground: #1c1c1c;
--primary-cta: #1c1c1c;
--primary-cta-text: #f5f5f5;
--secondary-cta: #ffffff;
--secondary-cta-text: #1c1c1c;
--accent: #15479c;
--background-accent: #a8cce8;
/* 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;
}
}