bender/4b29a127-ff8f-4b04-bb57-e8e1e45ac9ff
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-02 21:31:11 +00:00
commit b4629ef69c
631 changed files with 83685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,109 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { BarChart3 } from "lucide-react";
export default function AboutPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems}
button={{ text: "Get Started", href: "/contact" }}
brandName="Webuild"
/>
</div>
{/* About Section */}
<div id="about" data-section="about">
<TextSplitAbout
title="Our Story"
description={[
"Founded in 2012, Webuild started with a simple mission: to help local businesses succeed online. We noticed that many talented entrepreneurs lacked the digital presence needed to compete in today's market. We decided to change that.",
"Over the past 12 years, we've evolved from a small design studio into a full-service digital agency serving hundreds of clients across diverse industries. But our core values haven't changed—we still believe in putting our clients first, delivering exceptional results, and fostering long-term partnerships.",
"Today, our team of experienced designers, developers, and strategists continues to push boundaries and deliver innovative digital solutions that drive real business growth for our clients.",
]}
buttons={[{ text: "Work With Us", href: "/contact" }]}
buttonAnimation="slide-up"
showBorder={true}
useInvertedBackground={false}
/>
</div>
{/* Metrics Section */}
<div id="metrics" data-section="metrics">
<MetricCardSeven
title="By The Numbers"
description="Our impact speaks for itself"
tag="Our Success"
tagIcon={BarChart3}
tagAnimation="slide-up"
metrics={[
{
id: "1",
value: "450+",
title: "Websites Created",
items: ["Across 50+ industries", "100% client satisfaction", "Continuous support"],
},
{
id: "2",
value: "12",
title: "Years in Business",
items: ["Since 2012", "Industry veterans", "Proven expertise"],
},
{
id: "3",
value: "98%",
title: "Client Retention",
items: ["Long-term relationships", "Ongoing partnerships", "Trusted advisors"],
},
{
id: "4",
value: "25+",
title: "Team Members",
items: ["Design experts", "Developers", "Strategists"],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Webuild"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,115 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Mail, HelpCircle } from "lucide-react";
export default function ContactPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems}
button={{ text: "Get Started", href: "/contact" }}
brandName="Webuild"
/>
</div>
{/* Contact Section */}
<div id="contact" data-section="contact">
<ContactCenter
tag="Get in Touch"
title="Ready to Grow Your Business Online?"
description="Let's talk about your website and how Webuild can help you reach more customers and increase revenue. Schedule a free consultation with our team today."
tagIcon={Mail}
tagAnimation="slide-up"
background={{ variant: "rotated-rays-animated" }}
useInvertedBackground={true}
inputPlaceholder="your@email.com"
buttonText="Schedule Free Call"
termsText="We respect your privacy. We'll only use your email to schedule your consultation."
/>
</div>
{/* FAQ Section */}
<div id="faq" data-section="faq">
<FaqBase
faqs={[
{
id: "1",
title: "How long does it take to build a website?",
content: "Typical website projects take 6-12 weeks depending on complexity and scope. After our initial discovery call, we'll provide you with a detailed timeline. Rush projects are available upon request.",
},
{
id: "2",
title: "What's included in your web design packages?",
content: "Our packages include custom design, responsive mobile optimization, SEO optimization, content strategy, testing, and deployment. We also offer ongoing maintenance and support options to keep your site running smoothly.",
},
{
id: "3",
title: "Do you provide hosting and domain services?",
content: "Yes! We handle all technical aspects including domain registration, hosting setup, SSL certificates, and ongoing server maintenance. We work with industry-leading providers to ensure your website is secure and fast.",
},
{
id: "4",
title: "Can you help with SEO and marketing?",
content: "Absolutely. SEO optimization is built into every website we create. We also offer digital marketing services including local SEO, Google Ads management, social media strategy, and content marketing to help you reach your target audience.",
},
{
id: "5",
title: "What if I need changes after launch?",
content: "We provide ongoing support and maintenance packages. Whether you need simple updates or major revisions, our team is here to help. We offer flexible maintenance plans starting at just $99/month.",
},
{
id: "6",
title: "How much does a website cost?",
content: "Website costs vary based on features and complexity. Small business websites start at $2,500, while e-commerce and complex projects range from $5,000-$15,000+. Contact us for a custom quote based on your specific needs.",
},
]}
title="Frequently Asked Questions"
description="Everything you need to know about our web design and development services"
tag="FAQ"
tagIcon={HelpCircle}
tagAnimation="slide-up"
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="smooth"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Webuild"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</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";

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,296 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Zap, Sparkles, Award, CheckCircle, BarChart3, HelpCircle, Mail, Palette, ShoppingCart, Smartphone, TrendingUp } from "lucide-react";
export default function HomePage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems}
button={{ text: "Get Started", href: "/contact" }}
brandName="Webuild"
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Professional Websites That Drive Real Business Results"
description="Custom web design and development for local businesses. We create stunning, high-converting websites that attract customers and grow your revenue."
tag="Web Design Agency"
tagIcon={Zap}
tagAnimation="slide-up"
background={{ variant: "radial-gradient" }}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69728.jpg",
imageAlt: "Website design showcase",
},
{
imageSrc: "http://img.b2bpic.net/free-psd/portfolio-showcase-social-media-template-with-photo-frame_47987-32070.jpg",
imageAlt: "Digital portfolio",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/analyzing-business-chart_1098-19461.jpg",
imageAlt: "Business growth metrics",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/businessman-celebrating-his-success-after-presenting-project-proposal-his-multiethnic-partners_181624-33367.jpg",
imageAlt: "Client success story",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-comparing-each-colorful-material_329181-18096.jpg",
imageAlt: "Design excellence",
},
]}
mediaAnimation="slide-up"
buttons={[
{ text: "View Our Work", href: "/portfolio" },
{ text: "Schedule a Call", href: "/contact" },
]}
buttonAnimation="slide-up"
/>
</div>
{/* About Section */}
<div id="about" data-section="about">
<TextSplitAbout
title="Why Choose Webuild?"
description={[
"We're a team of passionate web designers and developers dedicated to transforming local businesses through strategic digital presence. With over a decade of combined experience, we've helped hundreds of small and medium-sized businesses establish their online presence and drive meaningful growth.",
"Our approach goes beyond aesthetics. We combine beautiful design with data-driven strategy, ensuring every pixel serves your business goals. We take the time to understand your vision, your audience, and your challenges—then we craft solutions that deliver measurable results.",
"From initial consultation through launch and beyond, we're your digital growth partner. Your success is our success.",
]}
buttons={[{ text: "Learn More About Us", href: "/about" }]}
buttonAnimation="slide-up"
showBorder={true}
useInvertedBackground={false}
/>
</div>
{/* Services Section */}
<div id="services" data-section="services">
<FeatureCardTwentyFive
title="Our Services"
description="Comprehensive web solutions tailored to your business needs"
tag="What We Offer"
tagIcon={Sparkles}
tagAnimation="slide-up"
features={[
{
title: "Custom Web Design",
description: "Bespoke website design that perfectly reflects your brand identity and engages your target audience.",
icon: Palette,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-writing-design-process_53876-94878.jpg",
imageAlt: "Web design process",
},
{
imageSrc: "http://img.b2bpic.net/free-vector/colorful-modern-landing-page_23-2148428829.jpg",
imageAlt: "Design mockup",
},
],
},
{
title: "E-Commerce Solutions",
description: "Full-featured online stores with secure payment processing, inventory management, and customer analytics.",
icon: ShoppingCart,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/flat-e-commerce-template_1284-48423.jpg",
imageAlt: "E-commerce platform",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/cropped-image-woman-checking-shopping-list-smartphone-grocery-store_662251-1450.jpg",
imageAlt: "Shopping cart interface",
},
],
},
{
title: "Mobile Optimization",
description: "Responsive designs that look and perform flawlessly across all devices and screen sizes.",
icon: Smartphone,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/hotel-booking-app-ui-design-screen_47987-2024.jpg",
imageAlt: "Mobile responsive design",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104473.jpg",
imageAlt: "Mobile user experience",
},
],
},
{
title: "SEO & Performance",
description: "Lightning-fast websites optimized for search engines to attract organic traffic and boost visibility.",
icon: TrendingUp,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-working-laptop_53876-163211.jpg",
imageAlt: "SEO analytics",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/laptop-displaying-business-analytics_482257-115250.jpg",
imageAlt: "Performance metrics",
},
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
buttons={[{ text: "Explore All Services", href: "/services" }]}
buttonAnimation="slide-up"
/>
</div>
{/* Social Proof Section */}
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Trusted by Local Business Leaders"
description="Join hundreds of successful businesses that have transformed their online presence with Webuild"
tag="Client Success"
tagIcon={CheckCircle}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
names={[
"Urban Boutique",
"Miller Plumbing",
"Bright Smile Dental",
"Rustic Table Restaurant",
"Peak Fitness Studio",
"Rivera Legal Group",
"Sunset Beauty Salon",
"Tech Solutions Inc",
]}
speed={40}
showCard={true}
buttonAnimation="slide-up"
/>
</div>
{/* Metrics Section */}
<div id="metrics" data-section="metrics">
<MetricCardSeven
title="Our Track Record"
description="Proven results that speak for themselves"
tag="By The Numbers"
tagIcon={BarChart3}
tagAnimation="slide-up"
metrics={[
{
id: "1",
value: "450+",
title: "Websites Launched",
items: ["Across all industries", "100% satisfaction rate", "Ongoing support included"],
},
{
id: "2",
value: "250%",
title: "Average Revenue Increase",
items: ["Within first 6 months", "Data-driven optimization", "Continuous improvement"],
},
{
id: "3",
value: "98%",
title: "Client Retention Rate",
items: ["Long-term partnerships", "Ongoing support & updates", "Dedicated account managers"],
},
{
id: "4",
value: "12+",
title: "Years of Experience",
items: ["Industry expertise", "Proven methodologies", "Trusted advisors"],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
/>
</div>
{/* Testimonials Section */}
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
testimonial="Webuild completely transformed our online presence. Within 3 months, we saw a 300% increase in customer inquiries and doubled our monthly revenue. Their team was professional, responsive, and truly cared about our success."
rating={5}
author="Sarah Mitchell, CEO Urban Boutique"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
alt: "Sarah Mitchell",
},
{
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
alt: "Client testimonial",
},
{
src: "http://img.b2bpic.net/free-photo/smiley-colleagues-taking-selfie-before-meeting_23-2148817039.jpg",
alt: "Business owner",
},
{
src: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg",
alt: "Success story",
},
{
src: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg",
alt: "Happy client",
},
{
src: "http://img.b2bpic.net/free-photo/studio-portrait-collage-diverse-people_53876-137629.jpg",
alt: "Webuild customer",
},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Webuild"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}

114
src/app/portfolio/page.tsx Normal file
View File

@@ -0,0 +1,114 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Award } from "lucide-react";
export default function PortfolioPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems}
button={{ text: "Get Started", href: "/contact" }}
brandName="Webuild"
/>
</div>
{/* Portfolio Section */}
<div id="portfolio" data-section="portfolio">
<BlogCardTwo
title="Recent Projects"
description="Showcasing websites we've built for local businesses across various industries"
tag="Portfolio"
tagIcon={Award}
tagAnimation="slide-up"
blogs={[
{
id: "project-1",
category: ["Retail", "E-Commerce"],
title: "Local Boutique Gets Online Presence",
excerpt: "A luxury clothing boutique increased online sales by 250% with our custom e-commerce platform and brand-focused design.",
imageSrc: "http://img.b2bpic.net/free-photo/empty-clothing-store-with-casual-formal-wear-items-retail-shop-with-stylish-clothes-hangers-racks-modern-boutique-inside-shopping-centre-fashionable-merchandise-sale_482257-63323.jpg",
imageAlt: "Boutique website design",
authorName: "Success Story",
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
date: "2024",
},
{
id: "project-2",
category: ["Services", "Lead Generation"],
title: "Plumbing Company Triples Service Calls",
excerpt: "Strategic SEO and local optimization helped this plumbing service generate 3x more qualified leads in their region.",
imageSrc: "http://img.b2bpic.net/free-vector/landing-page-template-construction-domain_23-2149554629.jpg",
imageAlt: "Plumbing services website",
authorName: "Success Story",
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
date: "2024",
},
{
id: "project-3",
category: ["Healthcare", "Booking"],
title: "Dental Practice Boosts Patient Bookings",
excerpt: "Modern website with integrated appointment booking system helped this dental clinic increase patient acquisition by 180%.",
imageSrc: "http://img.b2bpic.net/free-photo/nurse-typing-computer-making-appointments-while-dental-specialist-talking-patient-stomatology-chair-before-examination-dentist-nurse-working-together-modern-stomatological-clinic_482257-13449.jpg",
imageAlt: "Dental practice website",
authorName: "Success Story",
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
date: "2024",
},
{
id: "project-4",
category: ["Restaurant", "Brand"],
title: "Restaurant Builds Digital Brand Presence",
excerpt: "Beautiful website with menu integration, reservations, and local marketing helped this restaurant attract 2x more diners.",
imageSrc: "http://img.b2bpic.net/free-psd/restaurant-landing-page-template-design_23-2149609569.jpg",
imageAlt: "Restaurant website",
authorName: "Success Story",
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
date: "2024",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
buttons={[{ text: "View Full Portfolio", href: "/portfolio" }]}
buttonAnimation="slide-up"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Webuild"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}

129
src/app/services/page.tsx Normal file
View File

@@ -0,0 +1,129 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Sparkles, Palette, ShoppingCart, Smartphone, TrendingUp } from "lucide-react";
export default function ServicesPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems}
button={{ text: "Get Started", href: "/contact" }}
brandName="Webuild"
/>
</div>
{/* Services Section */}
<div id="services" data-section="services">
<FeatureCardTwentyFive
title="Our Services"
description="Comprehensive web solutions tailored to your business needs"
tag="What We Offer"
tagIcon={Sparkles}
tagAnimation="slide-up"
features={[
{
title: "Custom Web Design",
description: "Bespoke website design that perfectly reflects your brand identity and engages your target audience. We create visually stunning, user-centric designs that convert visitors into customers.",
icon: Palette,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-writing-design-process_53876-94878.jpg",
imageAlt: "Web design process",
},
{
imageSrc: "http://img.b2bpic.net/free-vector/colorful-modern-landing-page_23-2148428829.jpg",
imageAlt: "Design mockup",
},
],
},
{
title: "E-Commerce Solutions",
description: "Full-featured online stores with secure payment processing, inventory management, and customer analytics. We build e-commerce platforms that drive sales and streamline your operations.",
icon: ShoppingCart,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/flat-e-commerce-template_1284-48423.jpg",
imageAlt: "E-commerce platform",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/cropped-image-woman-checking-shopping-list-smartphone-grocery-store_662251-1450.jpg",
imageAlt: "Shopping cart interface",
},
],
},
{
title: "Mobile Optimization",
description: "Responsive designs that look and perform flawlessly across all devices and screen sizes. Your website will be fast, functional, and beautiful on every platform.",
icon: Smartphone,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/hotel-booking-app-ui-design-screen_47987-2024.jpg",
imageAlt: "Mobile responsive design",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104473.jpg",
imageAlt: "Mobile user experience",
},
],
},
{
title: "SEO & Performance",
description: "Lightning-fast websites optimized for search engines to attract organic traffic and boost visibility. We ensure your site ranks well and loads quickly for the best user experience.",
icon: TrendingUp,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-working-laptop_53876-163211.jpg",
imageAlt: "SEO analytics",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/laptop-displaying-business-analytics_482257-115250.jpg",
imageAlt: "Performance metrics",
},
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
buttons={[{ text: "Get Started", href: "/contact" }]}
buttonAnimation="slide-up"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Webuild"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</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: #ffffff;;
--card: #f9f9f9;;
--foreground: #000612e6;;
--primary-cta: #15479c;;
--secondary-cta: #f9f9f9;;
--accent: #e2e2e2;;
--background-accent: #c4c4c4;; */
--background: #ffffff;;
--card: #f9f9f9;;
--foreground: #000612e6;;
--primary-cta: #15479c;;
--primary-cta-text: #ffffff;;
--secondary-cta: #f9f9f9;;
--secondary-cta-text: #000612e6;;
--accent: #e2e2e2;;
--background-accent: #c4c4c4;;
/* 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;
}
}