bender/a77fd1bb-31ed-4b3d-b34d-e6df875b50a8
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-08 18:57:21 +00:00
commit 347ef71f27
630 changed files with 85930 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,173 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import {
Trophy,
Users,
Target,
Heart,
Zap,
Rocket,
Award,
Briefcase,
Lightbulb,
Palette,
} from "lucide-react";
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="compact"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Webuild"
navItems={[
{ name: "Home", id: "/" },
{ name: "Projects", id: "/#projects" },
{ name: "Services", id: "/#services" },
{ name: "About", id: "/about" },
]}
button={{
text: "Start Project",
href: "#contact",
}}
animateOnLoad={true}
/>
</div>
<div id="about-hero" data-section="about-hero">
<SplitAbout
title="Our Story & Mission"
description="Founded with a vision to transform the digital landscape, Webuild brings together world-class designers, developers, and strategists dedicated to creating exceptional digital experiences that drive real business results."
tag="About Webuild"
tagIcon={Trophy}
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="slide-up"
imagePosition="right"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/strategic-planning-workshop-with-team-co-1772996200144-fb243f59.png"
imageAlt="Our team collaborating on strategic projects"
bulletPoints={[
{
icon: Award,
title: "Award-Winning Work",
description: "Recognized internationally for innovative design and development excellence across multiple industry sectors.",
},
{
icon: Briefcase,
title: "10+ Years Experience",
description: "Over a decade of proven success helping brands scale, innovate, and dominate their digital presence.",
},
{
icon: Users,
title: "50+ Team Members",
description: "A diverse team of talented professionals including designers, developers, strategists, and project managers.",
},
{
icon: Lightbulb,
title: "1000+ Projects",
description: "Successfully completed over a thousand projects for startups, enterprises, and everything in between.",
},
]}
/>
</div>
<div id="values" data-section="values">
<FeatureHoverPattern
title="Our Core Values"
description="These principles guide every decision we make and every project we undertake, ensuring excellence at every step."
tag="What Drives Us"
tagIcon={Zap}
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
features={[
{
icon: Palette,
title: "Creative Excellence",
description: "We push creative boundaries while maintaining strategic focus, ensuring every design serves a clear purpose.",
},
{
icon: Target,
title: "Client Success",
description: "Your success is our success. We measure everything by the real business impact we deliver for our clients.",
},
{
icon: Heart,
title: "Collaborative Partnership",
description: "We work alongside our clients as true partners, investing in understanding their vision and goals deeply.",
},
{
icon: Briefcase,
title: "Professional Excellence",
description: "We maintain the highest standards of quality, professionalism, and integrity in all our work and relationships.",
},
{
icon: Lightbulb,
title: "Continuous Innovation",
description: "We stay ahead of industry trends, constantly learning and evolving to bring the latest solutions to our clients.",
},
{
icon: Users,
title: "Team Growth",
description: "We invest in our team's development, fostering a culture of learning, collaboration, and creative expression.",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Join Our Journey"
tagIcon={Rocket}
title="Ready to Work Together?"
description="Whether you're looking to transform your digital presence or join our team, we'd love to hear from you. Let's create something amazing together."
background={{
variant: "plain",
}}
useInvertedBackground={false}
buttons={[
{
text: "Start Your Project",
href: "/#contact",
},
{
text: "Contact Us",
href: "mailto:hello@webuild.com",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Webuild"
leftLink={{
text: "Privacy Policy",
href: "#privacy",
}}
rightLink={{
text: "Terms of Service",
href: "#terms",
}}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,137 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import SplitAbout from "@/components/sections/about/SplitAbout";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import {
Trophy,
Users,
Target,
Heart,
Zap,
Mail,
Rocket,
} from "lucide-react";
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="compact"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Webuild"
navItems={[
{ name: "Home", id: "/" },
{ name: "Projects", id: "/portfolio" },
{ name: "Services", id: "/#services" },
{ name: "About", id: "/#about" },
]}
button={{
text: "Start Project",
href: "/contact",
}}
animateOnLoad={true}
/>
</div>
{/* Why Choose Webuild Section */}
<div id="about" data-section="about">
<SplitAbout
title="Why Choose Webuild"
description="We're not just web designers—we're digital strategists committed to transforming your ideas into market-winning solutions."
tag="Our Expertise"
tagIcon={Trophy}
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="slide-up"
imagePosition="right"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/strategic-planning-workshop-with-team-co-1772996200144-fb243f59.png"
imageAlt="Team collaboration and strategic planning"
bulletPoints={[
{
icon: Users,
title: "Expert Team",
description:
"Designers, developers, and strategists with years of industry experience and proven track record.",
},
{
icon: Target,
title: "Results-Driven",
description:
"Every project is guided by clear objectives and measured by real business impact and user engagement.",
},
{
icon: Heart,
title: "Client-Focused",
description:
"We treat your business as our own, investing time to understand your goals and deliver exceptional solutions.",
},
{
icon: Zap,
title: "Innovation",
description:
"We stay ahead of design and technology trends to deliver cutting-edge solutions that set you apart.",
},
]}
buttons={[
{
text: "Learn More",
href: "/portfolio",
},
]}
/>
</div>
{/* Contact CTA Section */}
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Ready to Get Started?"
tagIcon={Rocket}
title="Let's Bring Your Vision to Life"
description="Whether you're launching a new project or redesigning an existing presence, our team is ready to create something extraordinary. Let's talk about your goals and how we can help you succeed."
background={{ variant: "plain" }}
useInvertedBackground={false}
buttons={[
{
text: "Contact Us",
href: "mailto:hello@webuild.com",
},
{
text: "View Our Work",
href: "/portfolio",
},
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Webuild"
leftLink={{
text: "Privacy Policy",
href: "#privacy",
}}
rightLink={{
text: "Terms of Service",
href: "#terms",
}}
/>
</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";

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,299 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import SplitAbout from "@/components/sections/about/SplitAbout";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import {
Sparkles,
Award,
Zap,
PenTool,
Code,
Lightbulb,
Smartphone,
Shield,
Trophy,
Users,
Target,
Heart,
Star,
Rocket,
} from "lucide-react";
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="compact"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Webuild"
navItems={[
{ name: "Home", id: "/" },
{ name: "Projects", id: "#projects" },
{ name: "Services", id: "#services" },
{ name: "About", id: "/about" },
]}
button={{
text: "Start Project",
href: "#contact",
}}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Transform Your Ideas into Stunning Digital Experiences"
description="We craft beautiful, responsive websites that captivate your audience and drive business growth. From concept to launch, we bring your vision to life with cutting-edge design and development."
tag="Web Design Agency"
tagIcon={Sparkles}
background={{
variant: "circleGradient",
}}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-stunning-web-design-agency-workspace-w-1772996198341-22245b4e.png"
imageAlt="Web design agency workspace with modern displays"
imagePosition="right"
mediaAnimation="slide-up"
buttons={[
{
text: "View Our Work",
href: "#projects",
},
{
text: "Get Started",
href: "#contact",
},
]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="projects" data-section="projects">
<ProductCardOne
title="Featured Projects"
description="Explore our latest work showcasing our expertise in web design and development across diverse industries."
tag="Portfolio"
tagIcon={Award}
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="three-columns-all-equal-width"
products={[
{
id: "1",
name: "Luxury Fashion E-Commerce",
price: "Custom Design",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-sleek-e-commerce-website-design-for-a--1772996200095-d08f9b49.png",
imageAlt: "Luxury fashion ecommerce website",
},
{
id: "2",
name: "SaaS Dashboard Platform",
price: "Full Stack Development",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-vibrant-saas-dashboard-interface-desig-1772996199695-16a944db.png",
imageAlt: "SaaS analytics dashboard interface",
},
{
id: "3",
name: "Architecture Portfolio",
price: "Design & Development",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-creative-portfolio-website-for-an-arch-1772996200200-af72d9d5.png",
imageAlt: "Architecture firm portfolio website",
},
]}
carouselMode="buttons"
/>
</div>
<div id="services" data-section="services">
<FeatureHoverPattern
title="Our Services"
description="Comprehensive digital solutions tailored to elevate your brand and engage your audience."
tag="What We Offer"
tagIcon={Zap}
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
features={[
{
icon: PenTool,
title: "Web Design",
description: "Stunning, user-centric designs that capture your brand essence and engage visitors with intuitive interfaces.",
},
{
icon: Code,
title: "Development",
description: "Robust, scalable web applications built with modern technologies and best practices for performance.",
},
{
icon: Lightbulb,
title: "Strategy & UX",
description: "Data-driven strategies and user experience optimization to maximize conversions and user satisfaction.",
},
{
icon: Smartphone,
title: "Responsive Design",
description: "Seamless experiences across all devices, ensuring your website looks perfect on mobile, tablet, and desktop.",
},
{
icon: Zap,
title: "Performance",
description: "Lightning-fast load times and optimized performance to keep your users engaged and improve SEO rankings.",
},
{
icon: Shield,
title: "Security",
description: "Enterprise-grade security measures to protect your website and user data with industry-leading standards.",
},
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="Why Choose Webuild"
description="We're not just web designers—we're digital strategists committed to transforming your ideas into market-winning solutions."
tag="Our Expertise"
tagIcon={Trophy}
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="slide-up"
imagePosition="right"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/strategic-planning-workshop-with-team-co-1772996200144-fb243f59.png"
imageAlt="Team collaboration and strategic planning"
bulletPoints={[
{
icon: Users,
title: "Expert Team",
description: "Designers, developers, and strategists with years of industry experience and proven track record.",
},
{
icon: Target,
title: "Results-Driven",
description: "Every project is guided by clear objectives and measured by real business impact and user engagement.",
},
{
icon: Heart,
title: "Client-Focused",
description: "We treat your business as our own, investing time to understand your goals and deliver exceptional solutions.",
},
{
icon: Zap,
title: "Innovation",
description: "We stay ahead of design and technology trends to deliver cutting-edge solutions that set you apart.",
},
]}
buttons={[
{
text: "Learn More",
href: "/about",
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
title="What Our Clients Say"
description="Trusted by leading companies and startups worldwide to deliver exceptional digital experiences."
tag="Client Testimonials"
tagIcon={Star}
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
title: "Transformed Our Online Presence",
quote: "Webuild completely redesigned our website and the results have been phenomenal. Our conversion rates increased by 45% within three months. The team's attention to detail and strategic approach was exactly what we needed.",
name: "Sarah Johnson",
role: "CEO",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-confident-bus-1772996199716-3232c800.png",
imageAlt: "Sarah Johnson",
},
{
id: "2",
title: "Exceptional Development Partnership",
quote: "Working with Webuild was a game-changer for our startup. They didn't just build our platform—they helped us think strategically about our product. The quality of their work and communication was outstanding.",
name: "Michael Chen",
role: "Founder",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-male-entrepre-1772996198379-1845b2c5.png",
imageAlt: "Michael Chen",
},
{
id: "3",
title: "True Digital Partners",
quote: "The Webuild team goes beyond typical agency work. They truly understand our brand and market. Their designs are not only beautiful but incredibly functional. Highly recommend for any serious digital project.",
name: "Emily Rodriguez",
role: "Marketing Director",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-woman-product-1772996198712-9928c824.png",
imageAlt: "Emily Rodriguez",
},
{
id: "4",
title: "Unmatched Creative Excellence",
quote: "From initial concept to final launch, Webuild delivered excellence at every step. Their creative direction elevated our brand significantly. The website has become our strongest marketing asset.",
name: "David Kim",
role: "Design Director",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-man-design-di-1772996199164-0b5c717e.png",
imageAlt: "David Kim",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Ready to Get Started?"
tagIcon={Rocket}
title="Let's Bring Your Vision to Life"
description="Whether you're launching a new project or redesigning an existing presence, our team is ready to create something extraordinary. Let's talk about your goals and how we can help you succeed."
background={{
variant: "plain",
}}
useInvertedBackground={false}
buttons={[
{
text: "Start Your Project",
href: "/contact",
},
{
text: "Schedule a Call",
href: "mailto:hello@webuild.com",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Webuild"
leftLink={{
text: "Privacy Policy",
href: "#privacy",
}}
rightLink={{
text: "Terms of Service",
href: "#terms",
}}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,245 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import {
Sparkles,
Award,
PenTool,
Code,
Lightbulb,
Smartphone,
Zap,
Shield,
Star,
Rocket,
} from "lucide-react";
export default function PortfolioPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="compact"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Webuild"
navItems={[
{ name: "Home", id: "/" },
{ name: "Projects", id: "/portfolio" },
{ name: "Services", id: "/#services" },
{ name: "About", id: "/#about" },
]}
button={{
text: "Start Project",
href: "/contact",
}}
animateOnLoad={true}
/>
</div>
{/* Featured Projects Section */}
<div id="projects" data-section="projects">
<ProductCardOne
title="Featured Projects"
description="Explore our latest work showcasing our expertise in web design and development across diverse industries."
tag="Portfolio"
tagIcon={Award}
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="three-columns-all-equal-width"
products={[
{
id: "1",
name: "Luxury Fashion E-Commerce",
price: "Custom Design",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-sleek-e-commerce-website-design-for-a--1772996200095-d08f9b49.png",
imageAlt: "Luxury fashion ecommerce website",
},
{
id: "2",
name: "SaaS Dashboard Platform",
price: "Full Stack Development",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-vibrant-saas-dashboard-interface-desig-1772996199695-16a944db.png",
imageAlt: "SaaS analytics dashboard interface",
},
{
id: "3",
name: "Architecture Portfolio",
price: "Design & Development",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-creative-portfolio-website-for-an-arch-1772996200200-af72d9d5.png",
imageAlt: "Architecture firm portfolio website",
},
]}
carouselMode="buttons"
/>
</div>
{/* Services Showcase Section */}
<div id="services" data-section="services">
<FeatureHoverPattern
title="Our Services"
description="Comprehensive digital solutions tailored to elevate your brand and engage your audience."
tag="What We Offer"
tagIcon={Zap}
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
features={[
{
icon: PenTool,
title: "Web Design",
description:
"Stunning, user-centric designs that capture your brand essence and engage visitors with intuitive interfaces.",
},
{
icon: Code,
title: "Development",
description:
"Robust, scalable web applications built with modern technologies and best practices for performance.",
},
{
icon: Lightbulb,
title: "Strategy & UX",
description:
"Data-driven strategies and user experience optimization to maximize conversions and user satisfaction.",
},
{
icon: Smartphone,
title: "Responsive Design",
description:
"Seamless experiences across all devices, ensuring your website looks perfect on mobile, tablet, and desktop.",
},
{
icon: Zap,
title: "Performance",
description:
"Lightning-fast load times and optimized performance to keep your users engaged and improve SEO rankings.",
},
{
icon: Shield,
title: "Security",
description:
"Enterprise-grade security measures to protect your website and user data with industry-leading standards.",
},
]}
/>
</div>
{/* Testimonials Section */}
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
title="What Our Clients Say"
description="Trusted by leading companies and startups worldwide to deliver exceptional digital experiences."
tag="Client Testimonials"
tagIcon={Star}
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
title: "Transformed Our Online Presence",
quote:
"Webuild completely redesigned our website and the results have been phenomenal. Our conversion rates increased by 45% within three months. The team's attention to detail and strategic approach was exactly what we needed.",
name: "Sarah Johnson",
role: "CEO",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-confident-bus-1772996199716-3232c800.png",
imageAlt: "Sarah Johnson",
},
{
id: "2",
title: "Exceptional Development Partnership",
quote:
"Working with Webuild was a game-changer for our startup. They didn't just build our platform—they helped us think strategically about our product. The quality of their work and communication was outstanding.",
name: "Michael Chen",
role: "Founder",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-male-entrepre-1772996198379-1845b2c5.png",
imageAlt: "Michael Chen",
},
{
id: "3",
title: "True Digital Partners",
quote:
"The Webuild team goes beyond typical agency work. They truly understand our brand and market. Their designs are not only beautiful but incredibly functional. Highly recommend for any serious digital project.",
name: "Emily Rodriguez",
role: "Marketing Director",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-woman-product-1772996198712-9928c824.png",
imageAlt: "Emily Rodriguez",
},
{
id: "4",
title: "Unmatched Creative Excellence",
quote:
"From initial concept to final launch, Webuild delivered excellence at every step. Their creative direction elevated our brand significantly. The website has become our strongest marketing asset.",
name: "David Kim",
role: "Design Director",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-man-design-di-1772996199164-0b5c717e.png",
imageAlt: "David Kim",
},
]}
/>
</div>
{/* Contact CTA Section */}
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Ready to Get Started?"
tagIcon={Rocket}
title="Let's Bring Your Vision to Life"
description="Whether you're launching a new project or redesigning an existing presence, our team is ready to create something extraordinary. Let's talk about your goals and how we can help you succeed."
background={{ variant: "plain" }}
useInvertedBackground={false}
buttons={[
{
text: "Start Your Project",
href: "/contact",
},
{
text: "Schedule a Call",
href: "mailto:hello@webuild.com",
},
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Webuild"
leftLink={{
text: "Privacy Policy",
href: "#privacy",
}}
rightLink={{
text: "Terms of Service",
href: "#terms",
}}
/>
</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-source-sans-3), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-source-sans-3), 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: #6139e6;
--primary-cta-text: #f5f5f5;
--secondary-cta: #ffffff;
--secondary-cta-text: #1c1c1c;
--accent: #6139e6;
--background-accent: #b3a8e8;
/* 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;
}
}