bender/c9b7264b-1fcf-41ca-bc53-e61d049db6df
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-10 16:34:40 +00:00
commit b2c1d049ba
633 changed files with 86369 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,141 @@
"use client";
import Link from "next/link";
import { Zap, Palette, Globe, Languages } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import SplitAbout from "@/components/sections/about/SplitAbout";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
export default function AboutPage() {
const navItems = [
{ name: "How It Works / Ako to funguje", id: "how-it-works" },
{ name: "Services / Služby", id: "services" },
{ name: "Portfolio / Portfólio", id: "portfolio" },
{ name: "Pricing / Ceny", id: "pricing" },
{ name: "Contact / Kontakt", id: "contact" },
];
const footerColumns = [
{
title: "Product / Produkt",
items: [
{ label: "Web Builder / Tvorca Webov", href: "/#web-builder" },
{ label: "Creative Services / Kreatívne Služby", href: "/#services" },
{ label: "AI Marketing / AI Marketing", href: "/#ai-marketing" },
{ label: "Pricing / Ceny", href: "/#pricing" },
],
},
{
title: "Company / Spoločnosť",
items: [
{ label: "About / O Nás", href: "/about" },
{ label: "Team / Tím", href: "/#portfolio" },
{ label: "Blog / Blog", href: "https://blog.aura.ai" },
{ label: "Careers / Kariéra", href: "https://careers.aura.ai" },
],
},
{
title: "Resources / Zdroje",
items: [
{ label: "Documentation / Dokumentácia", href: "https://docs.aura.ai" },
{ label: "API Reference / API Referencia", href: "https://api.aura.ai" },
{ label: "Support / Podpora", href: "https://support.aura.ai" },
{ label: "Community / Komunita", href: "https://community.aura.ai" },
],
},
{
title: "Legal / Právne",
items: [
{ label: "Privacy Policy / Politika Ochrany", href: "/privacy" },
{ label: "Terms of Service / Podmienky Služby", href: "/terms" },
{ label: "Cookie Policy / Politika Cookies", href: "/cookies" },
{ label: "Contact / Kontakt", href: "/contact" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Aura"
navItems={navItems}
button={{
text: "Get Started / Začať",
href: "/#pricing",
}}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="About Aura / O Aure"
description="Aura is the AI-powered ecosystem connecting websites, creative services, and marketing. We believe technology should empower creativity, not replace it. Our mission is to provide every creator, entrepreneur, and business with access to world-class tools, professional services, and intelligent automation. Founded in 2024, Aura is trusted by hundreds of creative teams and businesses across Europe. / Aura je AI-poháňaný ekosystém spájajúci webové stránky, kreatívne služby a marketing. Veríme, že technológia by mala posilňovať kreativitu, nie ju nahrádzať. Našou misiou je poskytnúť každému tvorcovi, podnikateľovi a firme prístup k svetovým nástrojom, profesionálnym službám a inteligentnej automatizácii. Založená v roku 2024, Aura je dôveryhodná pre stovky kreatívnych tímov a firiem v celej Európe."
tag="Our Story / Náš Príbeh"
bulletPoints={[
{
title: "AI-First Design / Dizajn na prvom mieste AI",
description: "Every tool is designed with AI assistance in mind, making professional-grade work accessible to everyone. / Každý nástroj je navrhnutý s pomocou AI na mysli, čo robí profesionálnu prácu dostupnou pre všetkých.",
icon: Zap,
},
{
title: "Creative Empowerment / Posilnenie Kreativity",
description: "We partner with talented creative professionals to provide premium services at accessible prices. / Spolupracujeme s talentovanými kreatívnymi profesionálmi na poskytnutie prémiových služieb za dostupné ceny.",
icon: Palette,
},
{
title: "Global Community / Globálna Komunita",
description: "Join thousands of creators, agencies, and businesses transforming their digital presence with Aura. / Pripojte sa k tisícom tvorcov, agentúr a firiem, ktorí transformujú svoju digitálnu prítomnosť s Aurou.",
icon: Globe,
},
{
title: "Bilingual & Inclusive / Dvojjazyčná a Inkluzívna",
description: "Built for Central Europe. Full support for Slovak, English, and expandable to more languages. / Postavená pre Strednú Európu. Plná podpora pre slovenčinu, angličtinu a rozšíriť sa na ďalšie jazyky.",
icon: Languages,
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/abstract-ai-ecosystem-illustration-showi-1773160381806-415e9a58.jpg"
imagePosition="right"
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Newsletter / Správy"
title="Stay Updated with Aura / Buďte v Aure Aktuálni"
description="Subscribe to get exclusive updates on new AI features, creative tips, marketing insights, and special offers. Bilingual content delivered to your inbox. / Prihláste sa, aby ste dostali exkluzívne aktualizácie o nových funkciách AI, kreatívne tipy, marketingové poznatky a špeciálne ponuky. Dvojjazyčný obsah doručený do vašej schránky."
tagIcon={Languages}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email / Zadajte svoj email"
buttonText="Subscribe / Prihlásiť sa"
termsText="We respect your privacy. Unsubscribe anytime. / Rešpektujeme vašu súkromie. Odhláste sa kedykoľvek."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2024 Aura. All rights reserved. / Všetky práva vyhradené."
bottomRightText="Made with ✨ by Aura Team / Vytvorené s ✨ tímom Aura"
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,155 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Mail } from "lucide-react";
import Link from "next/link";
export default function ContactPage() {
const navItems = [
{ name: "How It Works / Ako to funguje", id: "/" },
{ name: "Services / Služby", id: "/" },
{ name: "Portfolio / Portfólio", id: "/" },
{ name: "Pricing / Ceny", id: "/pricing" },
{ name: "Contact / Kontakt", id: "/contact" },
];
const footerColumns = [
{
title: "Product / Produkt",
items: [
{
label: "Web Builder / Tvorca Webov",
href: "/",
},
{
label: "Creative Services / Kreatívne Služby",
href: "/",
},
{
label: "AI Marketing / AI Marketing",
href: "/",
},
{
label: "Pricing / Ceny",
href: "/pricing",
},
],
},
{
title: "Company / Spoločnosť",
items: [
{
label: "About / O Nás",
href: "/",
},
{
label: "Team / Tím",
href: "/",
},
{
label: "Blog / Blog",
href: "https://blog.aura.ai",
},
{
label: "Careers / Kariéra",
href: "https://careers.aura.ai",
},
],
},
{
title: "Resources / Zdroje",
items: [
{
label: "Documentation / Dokumentácia",
href: "https://docs.aura.ai",
},
{
label: "API Reference / API Referencia",
href: "https://api.aura.ai",
},
{
label: "Support / Podpora",
href: "https://support.aura.ai",
},
{
label: "Community / Komunita",
href: "https://community.aura.ai",
},
],
},
{
title: "Legal / Právne",
items: [
{
label: "Privacy Policy / Politika Ochrany",
href: "/privacy",
},
{
label: "Terms of Service / Podmienky Služby",
href: "/terms",
},
{
label: "Cookie Policy / Politika Cookies",
href: "/cookies",
},
{
label: "Contact / Kontakt",
href: "/contact",
},
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Aura"
navItems={navItems}
button={{
text: "Get Started / Začať",
href: "/pricing",
}}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Newsletter / Správy"
title="Stay Updated with Aura / Buďte v Aure Aktuálni"
description="Subscribe to get exclusive updates on new AI features, creative tips, marketing insights, and special offers. Bilingual content delivered to your inbox. / Prihláste sa, aby ste dostali exkluzívne aktualizácie o nových funkciách AI, kreatívne tipy, marketingové poznatky a špeciálne ponuky. Dvojjazyčný obsah doručený do vašej schránky."
tagIcon={Mail}
background={{
variant: "sparkles-gradient",
}}
useInvertedBackground={false}
inputPlaceholder="Enter your email / Zadajte svoj email"
buttonText="Subscribe / Prihlásiť sa"
termsText="We respect your privacy. Unsubscribe anytime. / Rešpektujeme vašu súkromie. Odhláste sa kedykoľvek."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2024 Aura. All rights reserved. / Všetky práva vyhradené."
bottomRightText="Made with ✨ by Aura Team / Vytvorené s ✨ tímom Aura"
/>
</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";

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

@@ -0,0 +1,47 @@
import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script";
import { Libre_Baskerville } from "next/font/google";
export const metadata: Metadata = {
title: "Webild components 2",
description: "Generated by create next app",
};
const libreBaskerville = Libre_Baskerville({
variable: "--font-libre-baskerville",
subsets: ["latin"],
weight: ["400", "700"],
});
const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${libreBaskerville.variable} ${inter.variable} antialiased`}>
<Tag />
{children}
<script
dangerouslySetInnerHTML={{
__html: `${getVisualEditScript()}`
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

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

@@ -0,0 +1,481 @@
"use client";
import Link from "next/link";
import { Zap, Target, Rocket, Sparkles, BarChart3, Palette, Globe, Languages, Mail } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import SplitAbout from "@/components/sections/about/SplitAbout";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
export default function HomePage() {
const navItems = [
{ name: "How It Works / Ako to funguje", id: "how-it-works" },
{ name: "Services / Služby", id: "services" },
{ name: "Portfolio / Portfólio", id: "portfolio" },
{ name: "Pricing / Ceny", id: "pricing" },
{ name: "Contact / Kontakt", id: "contact" },
];
const footerColumns = [
{
title: "Product / Produkt",
items: [
{ label: "Web Builder / Tvorca Webov", href: "#web-builder" },
{ label: "Creative Services / Kreatívne Služby", href: "#services" },
{ label: "AI Marketing / AI Marketing", href: "#ai-marketing" },
{ label: "Pricing / Ceny", href: "/pricing" },
],
},
{
title: "Company / Spoločnosť",
items: [
{ label: "About / O Nás", href: "/about" },
{ label: "Team / Tím", href: "/portfolio" },
{ label: "Blog / Blog", href: "https://blog.aura.ai" },
{ label: "Careers / Kariéra", href: "https://careers.aura.ai" },
],
},
{
title: "Resources / Zdroje",
items: [
{ label: "Documentation / Dokumentácia", href: "https://docs.aura.ai" },
{ label: "API Reference / API Referencia", href: "https://api.aura.ai" },
{ label: "Support / Podpora", href: "https://support.aura.ai" },
{ label: "Community / Komunita", href: "https://community.aura.ai" },
],
},
{
title: "Legal / Právne",
items: [
{ label: "Privacy Policy / Politika Ochrany", href: "/privacy" },
{ label: "Terms of Service / Podmienky Služby", href: "/terms" },
{ label: "Cookie Policy / Politika Cookies", href: "/cookies" },
{ label: "Contact / Kontakt", href: "/contact" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Aura"
navItems={navItems}
button={{
text: "Get Started / Začať",
href: "#pricing",
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
title="Build your digital aura with AI / Vytvorte si digitálnu auru s AI"
description="AI-powered platform for websites, creative services, and marketing. Transform your vision into reality with Aura's complete ecosystem. / Platforma poháňaná AI pre webové stránky, kreatívne služby a marketing. Premeňte svoju víziu na realitu s kompletným ekosystémom Aury."
tag="AI Ecosystem / AI Ekosystém"
tagIcon={Zap}
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "Get Started / Začať",
href: "/pricing",
},
{
text: "Learn More / Zistiť viac",
href: "#how-it-works",
},
]}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/modern-ai-dashboard-interface-showing-we-1773160384814-dce16055.jpg",
imageAlt: "Aura AI Dashboard Preview / Náhľad Aura AI Dashboardu",
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/abstract-ai-inspired-geometric-shapes-an-1773160381270-322e55f5.png",
imageAlt: "AI Ecosystem Visualization / Vizualizácia AI Ekosystému",
},
]}
rating={5}
ratingText="Trusted by creative teams worldwide / Dôverujú nám kreatívne tímy na celom svete"
buttonAnimation="slide-up"
mediaAnimation="blur-reveal"
/>
</div>
<div id="how-it-works" data-section="how-it-works">
<FeatureCardTwentyThree
title="How Aura Works / Ako Aura funguje"
description="Three-step AI workflow that transforms your creative vision into reality. Seamless integration of website building, creative services, and marketing automation. / Trojkrokový AI pracovný tok, ktorý premeňuje vašu kreativnu víziu na realitu. Bezproblémová integrácia tvorby webových stránok, kreatívnych služieb a automatizácie marketingu."
tag="Workflow / Pracovný tok"
features={[
{
id: "1",
title: "AI Website Creation - Beginner, Intermediate, Expert / Tvorba webových stránok AI - Začiatočník, Medziľahlý, Expert",
tags: ["Tier-Based / Úrovne", "AI-Assisted / Asistované AI"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/simple-clean-ai-website-builder-interfac-1773160382444-652f656b.png",
},
{
id: "2",
title: "Creative Services - Photography, Video, Graphics, Marketing / Kreatívne služby - Fotografia, Video, Grafika, Marketing",
tags: ["Individual Pricing / Jednotné ceny", "Professional Team / Odborný tím"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-photography-portfolio-showc-1773160382473-aa80c869.png",
},
{
id: "3",
title: "AI Marketing Engine - Campaigns, Content, Strategy / AI Marketingový Engine - Kampane, Obsah, Stratégia",
tags: ["Automation / Automatizácia", "AI-Powered / Poháňane AI"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/ai-marketing-engine-dashboard-showing-au-1773160384246-1a4cbee1.jpg",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="web-builder" data-section="web-builder">
<ProductCardOne
title="AI Web Builder Tiers / AI Úrovne Tvorcu Webov"
description="Choose your perfect tier. From beginner-friendly to expert customization, Aura adapts to your needs. Each tier powered by advanced AI personalization and content adaptation. / Vyberte si vašu dokonalú úroveň. Od začiatočníka po expert prispôsobenie, Aura sa prispôsobuje vašim potrebám. Každá úroveň je poháňaná pokročilou AI personalizáciou a prispôsobením obsahu."
tag="Web Builder / Tvorca Webov"
products={[
{
id: "1",
name: "Beginner Tier / Úroveň Začiatočníka",
price: "$29/mo",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/simple-clean-ai-website-builder-interfac-1773160382444-652f656b.png",
},
{
id: "2",
name: "Intermediate Tier / Medziľahlá Úroveň",
price: "$79/mo",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/mid-level-ai-website-builder-interface-w-1773160380815-45e23393.jpg",
},
{
id: "3",
name: "Expert Tier / Expert Úroveň",
price: "$199/mo",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/advanced-ai-website-builder-for-experts--1773160381532-8ba42319.png",
},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="services" data-section="services">
<ProductCardOne
title="Creative Services / Kreatívne Služby"
description="Professional creative services with individual pricing. Work directly with our expert team or leverage AI assistance for accelerated creativity and results. / Profesionálne kreatívne služby s jednotnými cenami. Pracujte priamo s našim odborným tímom alebo využite pomoc AI na zrýchlenie kreativity a výsledkov."
tag="Services / Služby"
products={[
{
id: "1",
name: "Professional Photography / Profesionálna Fotografia",
price: "Custom / Individuálne",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-photography-portfolio-showc-1773160382473-aa80c869.png",
},
{
id: "2",
name: "Videography & Editing / Videografia & Strih",
price: "Custom / Individuálne",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-videography-service-showcas-1773160383259-1b7e724c.png",
},
{
id: "3",
name: "Graphic Design / Grafický Dizajn",
price: "Custom / Individuálne",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/graphic-design-service-portfolio-showing-1773160384207-9e6d5f11.jpg",
},
{
id: "4",
name: "AI Marketing Campaigns / AI Marketingové Kampane",
price: "Custom / Individuálne",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/digital-marketing-service-portfolio-with-1773160385340-2dc9d304.jpg",
},
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="ai-marketing" data-section="ai-marketing">
<SplitAbout
title="AI Client Profiling & Marketing Engine / AI Profilovanie Klientov a Marketingový Engine"
description="Powered by NotebookLM-inspired technology. Our AI analyzes your business, understands your clients, and generates personalized marketing strategies that convert. Real-time campaign optimization, social media content generation, and strategic recommendations. / Poháňané technológiou inšpirovanou NotebookLM. Naša AI analyzuje vašu firmu, rozumie vašim klientom a generuje personalizované marketingové stratégie, ktoré konvertujú. Optimalizácia kampane v reálnom čase, generovanie obsahu sociálnych médií a strategické odporúčania."
tag="AI Marketing / AI Marketing"
bulletPoints={[
{
title: "Client Profiling / Profilovanie Klientov",
description: "AI-powered analysis of your target audience and customer behavior patterns. / AI-poháňaná analýza vašej cieľovej skupiny a vzorov správania zákazníkov.",
icon: Target,
},
{
title: "Automated Campaigns / Automatizované Kampane",
description: "Create, launch, and optimize marketing campaigns in seconds. Multi-channel deployment across social media, email, and web. / Vytvárajte, spúšťajte a optimalizujte marketingové kampane v sekundách. Nasadenie na viacerých kanáloch cez sociálne médiá, email a web.",
icon: Rocket,
},
{
title: "Content Generation / Generovanie Obsahu",
description: "AI-generated social media posts, blog content, and creative assets tailored to your brand voice and audience. / AI-generovaný obsah sociálnych médií, blogy a kreatívne aktíva prispôsobené hlasu vašej značky a publiku.",
icon: Sparkles,
},
{
title: "Real-Time Analytics / Analýza v Reálnom Čase",
description: "Monitor campaign performance, track ROI, and receive AI-powered optimization recommendations instantly. / Sledujte výkon kampane, sledujte ROI a okamžite dostávajte odporúčania na optimalizáciu poháňané AI.",
icon: BarChart3,
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/ai-marketing-engine-dashboard-showing-au-1773160384246-1a4cbee1.jpg"
imagePosition="right"
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="blur-reveal"
/>
</div>
<div id="portfolio" data-section="portfolio">
<TeamCardOne
members={[
{
id: "1",
name: "Elena Lukáčová",
role: "Photographer / Fotografka",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-creative-team-m-1773160382247-75d8546c.png",
},
{
id: "2",
name: "Marko Vidovič",
role: "Videographer / Videograf",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-creative-team-m-1773160383827-af080058.png",
},
{
id: "3",
name: "Anna Kováčová",
role: "Graphic Designer / Grafická dizajnérka",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-creative-team-m-1773160383511-90ee30de.png",
},
{
id: "4",
name: "Tomáš Svoboda",
role: "Marketing Specialist / Marketingový špecialista",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-creative-team-m-1773160385410-130d7700.jpg",
},
{
id: "5",
name: "Lucia Némethová",
role: "AI Specialist / Špecialista na AI",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-creative-team-m-1773160385242-05e486f9.jpg",
},
]}
title="Meet Our Creative Team / Poznajte Náš Kreatívny Tím"
description="World-class creative professionals powered by AI. Select individual specialists for collaboration, or leverage the full AI ecosystem for accelerated results. / Svetoví kreatívni profesionáli poháňaní AI. Vyberte si jednotlivých špecijalistov na spoluprácu alebo využite celý AI ekosystém na zrýchlené výsledky."
tag="Team / Tím"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{
text: "View Portfolio / Zobraziť Portfólio",
href: "/portfolio",
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
title="What Our Clients Say / Čo hovoria naši klienti"
description="Trusted by leading brands and startups worldwide. Hear from those who transformed their digital presence with Aura. / Dôveryhodné pre vedúce značky a startupy na celom svete. Ouslite od tých, ktorí transformovali svoju digitálnu prítomnosť s Aurou."
tag="Testimonials / Spätná väzba"
testimonials={[
{
id: "1",
name: "Katarína Horváthová",
role: "CEO",
company: "Creative Agency Pro / Kreatívna Agentúra Pro",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-satisfied-clien-1773160382772-a4b3bd85.png",
},
{
id: "2",
name: "Ján Polák",
role: "Founder",
company: "Digital Startup SK / Digitálny Startup SK",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-satisfied-clien-1773160385629-82897848.jpg",
},
{
id: "3",
name: "Petra Černá",
role: "Marketing Director",
company: "Premium Brands CZ / Prémiové Značky CZ",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-testimonial-headshot-entrep-1773160384091-0689339a.png",
},
{
id: "4",
name: "Robert Šimko",
role: "Product Manager",
company: "Tech Solutions EU / Tech Riešenia EU",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-satisfied-saas--1773160382042-76428a0b.jpg",
},
{
id: "5",
name: "Mária Kováčová",
role: "Creative Lead",
company: "Design Studio Central / Dizajn Štúdio Central",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-testimonial-portrait-creati-1773160382902-c8cdd102.png",
},
{
id: "6",
name: "Vladimír Žák",
role: "Business Consultant",
company: "Enterprise Solutions / Podnikové Riešenia",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-headshot-for-saas-testimoni-1773160381571-4b369fdd.jpg",
},
]}
kpiItems={[
{ value: "500+", label: "Projects Completed / Ukončené Projekty" },
{ value: "98%", label: "Client Satisfaction / Spokojnosť Klientov" },
{ value: "50+", label: "Creative Professionals / Kreatívni Profesionáli" },
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
title="Choose Your Plan / Vyberte si Svoj Plán"
description="Flexible pricing for every need. From individual creators to enterprise solutions. All plans include AI-powered tools, creative services access, and marketing automation. / Flexibilné ceny pre každú potrebu. Od jednotlivých tvorcov po podnikové riešenia. Všetky plány obsahujú nástroje poháňané AI, prístup ku kreatívnym službám a automatizáciu marketingu."
tag="Pricing / Ceny"
plans={[
{
id: "1",
price: "$29/mo",
name: "Creator / Tvorca",
buttons: [
{
text: "Get Started / Začať",
href: "/signup?plan=creator",
},
{
text: "Learn More / Zistiť viac",
href: "#",
},
],
features: [
"AI Website Builder - Beginner Tier / Tvorca Webov - Úroveň Začiatočníka",
"Up to 5 Projects / Až 5 Projektov",
"Basic AI Marketing Tools / Základné AI Marketingové Nástroje",
"Email Support / E-mailová Podpora",
"Community Access / Prístup do Komunity",
],
},
{
id: "2",
badge: "Most Popular / Najpopulárnejší",
badgeIcon: Sparkles,
price: "$99/mo",
name: "Professional / Profesionál",
buttons: [
{
text: "Get Started / Začať",
href: "/signup?plan=professional",
},
{
text: "Learn More / Zistiť viac",
href: "#",
},
],
features: [
"AI Website Builder - Intermediate & Expert Tiers / Tvorca Webov - Medziľahlá a Expert Úroveň",
"Unlimited Projects / Neobmedzené Projekty",
"Advanced AI Marketing Engine / Pokročilý AI Marketingový Engine",
"Creative Services Access (10 hours/mo) / Prístup ku Kreatívnym Službám (10 hodín/mesiac)",
"Priority Support / Prioritná Podpora",
"Team Collaboration / Spolupráca Tímu",
],
},
{
id: "3",
price: "$299/mo",
name: "Enterprise / Podnik",
buttons: [
{
text: "Contact Sales / Kontaktujte Predaj",
href: "/contact",
},
{
text: "Learn More / Zistiť viac",
href: "#",
},
],
features: [
"Everything in Professional + / Všetko v Profesionáli +",
"Full AI Marketing Suite / Kompletná AI Marketingová Sada",
"Unlimited Creative Services / Neobmedzené Kreatívne Služby",
"AI Telephone Assistant / AI Telefonický Asistent",
"Dedicated Account Manager / Vyhradený Account Manager",
"Custom Integrations / Vlastné Integrácie",
"24/7 Premium Support / 24/7 Prémium Podpora",
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Newsletter / Správy"
title="Stay Updated with Aura / Buďte v Aure Aktuálni"
description="Subscribe to get exclusive updates on new AI features, creative tips, marketing insights, and special offers. Bilingual content delivered to your inbox. / Prihláste sa, aby ste dostali exkluzívne aktualizácie o nových funkciách AI, kreatívne tipy, marketingové poznatky a špeciálne ponuky. Dvojjazyčný obsah doručený do vašej schránky."
tagIcon={Mail}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email / Zadajte svoj email"
buttonText="Subscribe / Prihlásiť sa"
termsText="We respect your privacy. Unsubscribe anytime. / Rešpektujeme vašu súkromie. Odhláste sa kedykoľvek."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2024 Aura. All rights reserved. / Všetky práva vyhradené."
bottomRightText="Made with ✨ by Aura Team / Vytvorené s ✨ tímom Aura"
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,194 @@
"use client";
import Link from "next/link";
import { Mail } from "lucide-react";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import TeamCardOne from "@/components/sections/team/TeamCardOne";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
export default function PortfolioPage() {
const navItems = [
{ name: "How It Works / Ako to funguje", id: "how-it-works" },
{ name: "Services / Služby", id: "services" },
{ name: "Portfolio / Portfólio", id: "portfolio" },
{ name: "Pricing / Ceny", id: "pricing" },
{ name: "Contact / Kontakt", id: "contact" },
];
const footerColumns = [
{
title: "Product / Produkt",
items: [
{ label: "Web Builder / Tvorca Webov", href: "/" },
{ label: "Creative Services / Kreatívne Služby", href: "/services" },
{ label: "AI Marketing / AI Marketing", href: "/" },
{ label: "Pricing / Ceny", href: "/" },
],
},
{
title: "Company / Spoločnosť",
items: [
{ label: "About / O Nás", href: "/" },
{ label: "Team / Tím", href: "/portfolio" },
{ label: "Blog / Blog", href: "https://blog.aura.ai" },
{ label: "Careers / Kariéra", href: "https://careers.aura.ai" },
],
},
{
title: "Resources / Zdroje",
items: [
{ label: "Documentation / Dokumentácia", href: "https://docs.aura.ai" },
{ label: "API Reference / API Referencia", href: "https://api.aura.ai" },
{ label: "Support / Podpora", href: "https://support.aura.ai" },
{ label: "Community / Komunita", href: "https://community.aura.ai" },
],
},
{
title: "Legal / Právne",
items: [
{ label: "Privacy Policy / Politika Ochrany", href: "/privacy" },
{ label: "Terms of Service / Podmienky Služby", href: "/terms" },
{ label: "Cookie Policy / Politika Cookies", href: "/cookies" },
{ label: "Contact / Kontakt", href: "/contact" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Aura"
navItems={navItems}
button={{ text: "Get Started / Začať", href: "/" }}
/>
</div>
<div id="portfolio" data-section="portfolio">
<TeamCardOne
title="Meet Our Creative Team / Poznajte Náš Kreatívny Tím"
description="World-class creative professionals powered by AI. Select individual specialists for collaboration, or leverage the full AI ecosystem for accelerated results. / Svetoví kreatívni profesionáli poháňaní AI. Vyberte si jednotlivých špecijalistov na spoluprácu alebo využite celý AI ekosystém na zrýchlené výsledky."
tag="Team / Tím"
members={[
{
id: "1",
name: "Elena Lukáčová",
role: "Photographer / Fotografka",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-creative-team-m-1773160382247-75d8546c.png",
imageAlt: "Professional portrait of Elena Lukáčová, photographer",
},
{
id: "2",
name: "Marko Vidovič",
role: "Videographer / Videograf",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-creative-team-m-1773160383827-af080058.png",
imageAlt: "Professional portrait of Marko Vidovič, videographer",
},
{
id: "3",
name: "Anna Kováčová",
role: "Graphic Designer / Grafická dizajnérka",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-creative-team-m-1773160383511-90ee30de.png",
imageAlt: "Professional portrait of Anna Kováčová, graphic designer",
},
{
id: "4",
name: "Tomáš Svoboda",
role: "Marketing Specialist / Marketingový špecialista",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-creative-team-m-1773160385410-130d7700.jpg",
imageAlt: "Professional portrait of Tomáš Svoboda, marketing specialist",
},
{
id: "5",
name: "Lucia Némethová",
role: "AI Specialist / Špecialista na AI",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-portrait-of-creative-team-m-1773160385242-05e486f9.jpg",
imageAlt: "Professional portrait of Lucia Némethová, AI specialist",
},
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "View Portfolio / Zobraziť Portfólio", href: "/portfolio" }]}
/>
</div>
<div id="projects" data-section="projects">
<ProductCardOne
title="Featured Projects / Vybrané Projekty"
description="Showcase of our creative work across photography, videography, graphic design, and marketing campaigns. Each project represents our commitment to excellence and innovation. / Ukážka našej kreatívnej práce v oblasti fotografie, videografie, grafického dizajnu a marketingových kampaní. Každý projekt predstavuje náš záväzok voči dokonalosti a inováciám."
tag="Portfolio / Portfólio"
products={[
{
id: "1",
name: "Luxury Product Photography / Luxusná Fotografia Produktov",
price: "Professional",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-photography-project-luxury--1773160384635-56f0ae3f.jpg",
imageAlt:
"Professional photography project - luxury product showcase with dramatic lighting",
},
{
id: "2",
name: "Corporate Branding Video / Video Korporátneho Branding",
price: "Professional",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-videography-project-corpora-1773160381292-63e613ac.jpg",
imageAlt:
"Professional videography project - corporate branding video with cinematic footage",
},
{
id: "3",
name: "Brand Identity System / Systém Identifikácie Značky",
price: "Professional",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-graphic-design-project-bran-1773160381506-a76755b5.jpg",
imageAlt:
"Professional graphic design project - brand identity system with logo and guidelines",
},
{
id: "4",
name: "Social Media Marketing Campaign / Kampane Sociálnych Médií",
price: "Professional",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-marketing-campaign-multi-ch-1773160385159-c40b4cb6.jpg",
imageAlt:
"Professional marketing campaign - multi-channel social media strategy",
},
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2024 Aura. All rights reserved. / Všetky práva vyhradené."
bottomRightText="Made with ✨ by Aura Team / Vytvorené s ✨ tímom Aura"
/>
</div>
</ThemeProvider>
);
}

225
src/app/pricing/page.tsx Normal file
View File

@@ -0,0 +1,225 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Sparkles } from "lucide-react";
import Link from "next/link";
export default function PricingPage() {
const navItems = [
{ name: "How It Works / Ako to funguje", id: "/" },
{ name: "Services / Služby", id: "/" },
{ name: "Portfolio / Portfólio", id: "/" },
{ name: "Pricing / Ceny", id: "/pricing" },
{ name: "Contact / Kontakt", id: "/contact" },
];
const pricingPlans = [
{
id: "1",
price: "$29/mo",
name: "Creator / Tvorca",
buttons: [
{
text: "Get Started / Začať",
href: "/signup?plan=creator",
},
{
text: "Learn More / Zistiť viac",
href: "#",
},
],
features: [
"AI Website Builder - Beginner Tier / Tvorca Webov - Úroveň Začiatočníka",
"Up to 5 Projects / Až 5 Projektov",
"Basic AI Marketing Tools / Základné AI Marketingové Nástroje",
"Email Support / E-mailová Podpora",
"Community Access / Prístup do Komunity",
],
},
{
id: "2",
badge: "Most Popular / Najpopulárnejší",
badgeIcon: Sparkles,
price: "$99/mo",
name: "Professional / Profesionál",
buttons: [
{
text: "Get Started / Začať",
href: "/signup?plan=professional",
},
{
text: "Learn More / Zistiť viac",
href: "#",
},
],
features: [
"AI Website Builder - Intermediate & Expert Tiers / Tvorca Webov - Medziľahlá a Expert Úroveň",
"Unlimited Projects / Neobmedzené Projekty",
"Advanced AI Marketing Engine / Pokročilý AI Marketingový Engine",
"Creative Services Access (10 hours/mo) / Prístup ku Kreatívnym Službám (10 hodín/mesiac)",
"Priority Support / Prioritná Podpora",
"Team Collaboration / Spolupráca Tímu",
],
},
{
id: "3",
price: "$299/mo",
name: "Enterprise / Podnik",
buttons: [
{
text: "Contact Sales / Kontaktujte Predaj",
href: "/contact",
},
{
text: "Learn More / Zistiť viac",
href: "#",
},
],
features: [
"Everything in Professional + / Všetko v Profesionáli +",
"Full AI Marketing Suite / Kompletná AI Marketingová Sada",
"Unlimited Creative Services / Neobmedzené Kreatívne Služby",
"AI Telephone Assistant / AI Telefonický Asistent",
"Dedicated Account Manager / Vyhradený Account Manager",
"Custom Integrations / Vlastné Integrácie",
"24/7 Premium Support / 24/7 Prémium Podpora",
],
},
];
const footerColumns = [
{
title: "Product / Produkt",
items: [
{
label: "Web Builder / Tvorca Webov",
href: "/",
},
{
label: "Creative Services / Kreatívne Služby",
href: "/",
},
{
label: "AI Marketing / AI Marketing",
href: "/",
},
{
label: "Pricing / Ceny",
href: "/pricing",
},
],
},
{
title: "Company / Spoločnosť",
items: [
{
label: "About / O Nás",
href: "/",
},
{
label: "Team / Tím",
href: "/",
},
{
label: "Blog / Blog",
href: "https://blog.aura.ai",
},
{
label: "Careers / Kariéra",
href: "https://careers.aura.ai",
},
],
},
{
title: "Resources / Zdroje",
items: [
{
label: "Documentation / Dokumentácia",
href: "https://docs.aura.ai",
},
{
label: "API Reference / API Referencia",
href: "https://api.aura.ai",
},
{
label: "Support / Podpora",
href: "https://support.aura.ai",
},
{
label: "Community / Komunita",
href: "https://community.aura.ai",
},
],
},
{
title: "Legal / Právne",
items: [
{
label: "Privacy Policy / Politika Ochrany",
href: "/privacy",
},
{
label: "Terms of Service / Podmienky Služby",
href: "/terms",
},
{
label: "Cookie Policy / Politika Cookies",
href: "/cookies",
},
{
label: "Contact / Kontakt",
href: "/contact",
},
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Aura"
navItems={navItems}
button={{
text: "Get Started / Začať",
href: "/pricing",
}}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
plans={pricingPlans}
animationType="slide-up"
title="Choose Your Plan / Vyberte si Svoj Plán"
description="Flexible pricing for every need. From individual creators to enterprise solutions. All plans include AI-powered tools, creative services access, and marketing automation. / Flexibilné ceny pre každú potrebu. Od jednotlivých tvorcov po podnikové riešenia. Všetky plány obsahujú nástroje poháňané AI, prístup ku kreatívnym službám a automatizáciu marketingu."
tag="Pricing / Ceny"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2024 Aura. All rights reserved. / Všetky práva vyhradené."
bottomRightText="Made with ✨ by Aura Team / Vytvorené s ✨ tímom Aura"
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,178 @@
"use client";
import Link from "next/link";
import { Rocket, Target, Sparkles, BarChart3 } from "lucide-react";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
export default function ServicesPage() {
const navItems = [
{ name: "How It Works / Ako to funguje", id: "how-it-works" },
{ name: "Services / Služby", id: "services" },
{ name: "Portfolio / Portfólio", id: "portfolio" },
{ name: "Pricing / Ceny", id: "pricing" },
{ name: "Contact / Kontakt", id: "contact" },
];
const footerColumns = [
{
title: "Product / Produkt",
items: [
{ label: "Web Builder / Tvorca Webov", href: "/" },
{ label: "Creative Services / Kreatívne Služby", href: "/services" },
{ label: "AI Marketing / AI Marketing", href: "/" },
{ label: "Pricing / Ceny", href: "/" },
],
},
{
title: "Company / Spoločnosť",
items: [
{ label: "About / O Nás", href: "/" },
{ label: "Team / Tím", href: "/portfolio" },
{ label: "Blog / Blog", href: "https://blog.aura.ai" },
{ label: "Careers / Kariéra", href: "https://careers.aura.ai" },
],
},
{
title: "Resources / Zdroje",
items: [
{ label: "Documentation / Dokumentácia", href: "https://docs.aura.ai" },
{ label: "API Reference / API Referencia", href: "https://api.aura.ai" },
{ label: "Support / Podpora", href: "https://support.aura.ai" },
{ label: "Community / Komunita", href: "https://community.aura.ai" },
],
},
{
title: "Legal / Právne",
items: [
{ label: "Privacy Policy / Politika Ochrany", href: "/privacy" },
{ label: "Terms of Service / Podmienky Služby", href: "/terms" },
{ label: "Cookie Policy / Politika Cookies", href: "/cookies" },
{ label: "Contact / Kontakt", href: "/contact" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Aura"
navItems={navItems}
button={{ text: "Get Started / Začať", href: "/" }}
/>
</div>
<div id="services" data-section="services">
<ProductCardOne
title="Creative Services / Kreatívne Služby"
description="Professional creative services with individual pricing. Work directly with our expert team or leverage AI assistance for accelerated creativity and results. / Profesionálne kreatívne služby s jednotnými cenami. Pracujte priamo s našim odborným tímom alebo využite pomoc AI na zrýchlenie kreativity a výsledkov."
tag="Services / Služby"
products={[
{
id: "1",
name: "Professional Photography / Profesionálna Fotografia",
price: "Custom / Individuálne",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-photography-portfolio-showc-1773160382473-aa80c869.png",
imageAlt:
"Professional photography portfolio showcase with stunning product and lifestyle images. Dark background with neon orange highlights.",
},
{
id: "2",
name: "Videography & Editing / Videografia & Strih",
price: "Custom / Individuálne",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/professional-videography-service-showcas-1773160383259-1b7e724c.png",
imageAlt:
"Professional videography service showcasing with cinematic video thumbnails. Dark creative interface with neon orange accents.",
},
{
id: "3",
name: "Graphic Design / Grafický Dizajn",
price: "Custom / Individuálne",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/graphic-design-service-portfolio-showing-1773160384207-9e6d5f11.jpg",
imageAlt:
"Graphic design service portfolio showing various design work including branding, layouts, and creative assets.",
},
{
id: "4",
name: "AI Marketing Campaigns / AI Marketingové Kampane",
price: "Custom / Individuálne",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/digital-marketing-service-portfolio-with-1773160385340-2dc9d304.jpg",
imageAlt:
"Digital marketing service portfolio with social media campaigns, content creation, and marketing materials.",
},
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="ai-marketing" data-section="ai-marketing">
<SplitAbout
title="AI Client Profiling & Marketing Engine / AI Profilovanie Klientov a Marketingový Engine"
description="Powered by NotebookLM-inspired technology. Our AI analyzes your business, understands your clients, and generates personalized marketing strategies that convert. Real-time campaign optimization, social media content generation, and strategic recommendations. / Poháňané technológiou inšpirovanou NotebookLM. Naša AI analyzuje vašu firmu, rozumie vašim klientom a generuje personalizované marketingové stratégie, ktoré konvertujú. Optimalizácia kampane v reálnom čase, generovanie obsahu sociálnych médií a strategické odporúčania."
tag="AI Marketing / AI Marketing"
bulletPoints={[
{
title: "Client Profiling / Profilovanie Klientov",
description:
"AI-powered analysis of your target audience and customer behavior patterns. / AI-poháňaná analýza vašej cieľovej skupiny a vzorov správania zákazníkov.",
icon: Target,
},
{
title: "Automated Campaigns / Automatizované Kampane",
description:
"Create, launch, and optimize marketing campaigns in seconds. Multi-channel deployment across social media, email, and web. / Vytvárajte, spúšťajte a optimalizujte marketingové kampane v sekundách. Nasadenie na viacerých kanáloch cez sociálne médiá, email a web.",
icon: Rocket,
},
{
title: "Content Generation / Generovanie Obsahu",
description:
"AI-generated social media posts, blog content, and creative assets tailored to your brand voice and audience. / AI-generovaný obsah sociálnych médií, blogy a kreatívne aktíva prispôsobené hlasu vašej značky a publiku.",
icon: Sparkles,
},
{
title: "Real-Time Analytics / Analýza v Reálnom Čase",
description:
"Monitor campaign performance, track ROI, and receive AI-powered optimization recommendations instantly. / Sledujte výkon kampane, sledujte ROI a okamžite dostávajte odporúčania na optimalizáciu poháňané AI.",
icon: BarChart3,
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlBnsBj6EeBMKdvTCuV7kS0Cn2/ai-marketing-engine-dashboard-showing-au-1773160384246-1a4cbee1.jpg"
imagePosition="right"
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="blur-reveal"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2024 Aura. All rights reserved. / Všetky práva vyhradené."
bottomRightText="Made with ✨ by Aura Team / Vytvorené s ✨ tímom Aura"
/>
</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-inter), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-libre-baskerville), 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: #0a0a0a;
--card: #1a1a1a;
--foreground: #fffaf5e6;
--primary-cta: #ffaa70;
--primary-cta-text: #0a0a0a;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #fffaf5e6;
--accent: #737373;
--background-accent: #737373;
/* 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;
}
}