bender/bcfaefad-e112-46dc-b0d6-ac548bedcaef
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-04 16:11:32 +00:00
commit 3102cf9da7
631 changed files with 86086 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,176 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import AboutMetric from "@/components/sections/about/AboutMetric";
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterBase from "@/components/sections/footer/FooterBase";
import { TrendingUp, Zap, Target, Users, Linkedin, Twitter, Github, Globe } from "lucide-react";
const navItems = [
{ name: "Home", id: "/" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Company",
items: [
{ label: "About", href: "/about" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Services", href: "/services" },
{ label: "Team", href: "/about" },
],
},
{
title: "Resources",
items: [
{ label: "Blog", href: "/blog" },
{ label: "Case Studies", href: "/portfolio" },
{ label: "FAQ", href: "/faq" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect",
items: [
{ label: "Twitter", href: "https://twitter.com/acemedia" },
{ label: "LinkedIn", href: "https://linkedin.com/company/acemedia" },
{ label: "Instagram", href: "https://instagram.com/acemedia" },
{ label: "hello@acemedia.co", href: "mailto:hello@acemedia.co" },
],
},
];
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="noise"
cardStyle="inset"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="AceMedia"
bottomLeftText="Design Studio"
bottomRightText="hello@acemedia.co"
/>
</div>
<div id="about-metrics" data-section="about-metrics">
<AboutMetric
title="AceMedia by the Numbers - What We've Accomplished Together"
metrics={[
{ icon: TrendingUp, label: "Average Client Revenue Increase", value: "42%" },
{ icon: Zap, label: "Projects Delivered", value: "150+" },
{ icon: Target, label: "Client Retention Rate", value: "95%" },
{ icon: Users, label: "Happy Clients", value: "80+" },
]}
metricsAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="team" data-section="team">
<TeamCardTwo
title="Meet the Team"
description="The talented professionals behind AceMedia who bring your vision to life with passion and expertise"
tag="Our Team"
tagAnimation="slide-up"
members={[
{
id: "1",
name: "Areen Sathe",
role: "Founder & Lead Designer",
description:
"Creative visionary with 8+ years of web design experience. Passionate about creating websites that not only look beautiful but drive real business results. Areen leads strategy and ensures every project aligns with client goals.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-young-woman-w-1772640592291-fb2c730e.png",
imageAlt: "Areen Sathe, Founder",
socialLinks: [
{ icon: Linkedin, url: "https://linkedin.com/in/areen" },
{ icon: Twitter, url: "https://twitter.com/areen" },
],
},
{
id: "2",
name: "Michael Park",
role: "Lead Developer",
description:
"Full-stack developer specialized in performance optimization and scalable solutions. Brings technical expertise that ensures every design works flawlessly. Michael focuses on creating fast, reliable websites that perform.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-confident-mal-1772640592241-bbd411b2.png",
imageAlt: "Michael Park",
socialLinks: [
{ icon: Github, url: "https://github.com/michaelpark" },
{ icon: Linkedin, url: "https://linkedin.com/in/michaelpark" },
],
},
{
id: "3",
name: "Emily Rodriguez",
role: "UX Strategist",
description:
"User experience specialist focused on conversion optimization. Emily ensures every element on your site serves a purpose and enhances user journey. Her strategic approach to UX has helped clients achieve significant conversion improvements.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-confident-fem-1772640592646-56ceeab1.png",
imageAlt: "Emily Rodriguez",
socialLinks: [
{ icon: Globe, url: "https://emily-ux.com" },
{ icon: Linkedin, url: "https://linkedin.com/in/emily-ux" },
],
},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Trusted by Industry Leaders Worldwide"
description="Leading businesses across industries trust AceMedia for strategic web design and digital transformation"
tag="Partners & Clients"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
names={[
"TechFlow Solutions",
"GrowthCo",
"Digital Innovations",
"Prime Marketing",
"CloudSync Inc",
"InnovateLab",
"StartupHub",
"Enterprise Ventures",
]}
speed={40}
showCard={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="AceMedia"
copyrightText="© 2025 AceMedia. All rights reserved."
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,121 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Zap } from "lucide-react";
const navItems = [
{ name: "Home", id: "/" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Company",
items: [
{ label: "About", href: "/about" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Services", href: "/services" },
{ label: "Team", href: "/about" },
],
},
{
title: "Resources",
items: [
{ label: "Blog", href: "/blog" },
{ label: "Case Studies", href: "/portfolio" },
{ label: "FAQ", href: "/faq" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect",
items: [
{ label: "Twitter", href: "https://twitter.com/acemedia" },
{ label: "LinkedIn", href: "https://linkedin.com/company/acemedia" },
{ label: "Instagram", href: "https://instagram.com/acemedia" },
{ label: "hello@acemedia.co", href: "mailto:hello@acemedia.co" },
],
},
];
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="noise"
cardStyle="inset"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="AceMedia"
bottomLeftText="Design Studio"
bottomRightText="hello@acemedia.co"
/>
</div>
<div id="contact-primary" data-section="contact-primary">
<ContactCTA
tag="Get In Touch"
tagIcon={Zap}
tagAnimation="slide-up"
title="Let's Start Building Your Success Story"
description="Have a project in mind? Want to discuss your web design needs? We're here to help. Reach out and let's create something amazing together. Our team typically responds within 24 hours."
buttons={[
{ text: "Send Us an Email", href: "mailto:hello@acemedia.co" },
{ text: "Schedule a Call", href: "https://calendar.google.com" },
]}
buttonAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={true}
/>
</div>
<div id="contact-social-proof" data-section="contact-social-proof">
<SocialProofOne
title="Join the Companies That Trust AceMedia"
description="Industry leaders choose us for web design excellence and proven business results"
tag="Our Clients"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
names={[
"TechFlow Solutions",
"GrowthCo",
"Digital Innovations",
"Prime Marketing",
"CloudSync Inc",
"InnovateLab",
"StartupHub",
"Enterprise Ventures",
]}
speed={40}
showCard={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="AceMedia"
copyrightText="© 2025 AceMedia. All rights reserved."
columns={footerColumns}
/>
</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

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

@@ -0,0 +1,332 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import { TrendingUp, Zap, Target, Users, Sparkles, CheckCircle, Shield, Linkedin, Twitter, Github, Globe, Mail } from "lucide-react";
const navItems = [
{ name: "Home", id: "/" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Company",
items: [
{ label: "About", href: "/about" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Services", href: "/services" },
{ label: "Team", href: "/about" },
],
},
{
title: "Resources",
items: [
{ label: "Blog", href: "/blog" },
{ label: "Case Studies", href: "/portfolio" },
{ label: "FAQ", href: "/faq" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect",
items: [
{ label: "Twitter", href: "https://twitter.com/acemedia" },
{ label: "LinkedIn", href: "https://linkedin.com/company/acemedia" },
{ label: "Instagram", href: "https://instagram.com/acemedia" },
{ label: "hello@acemedia.co", href: "mailto:hello@acemedia.co" },
],
},
];
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="noise"
cardStyle="inset"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="AceMedia"
bottomLeftText="Design Studio"
bottomRightText="hello@acemedia.co"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="AceMedia"
description="Websites That Convert Visitors Into Customers. We build sleek, high-performing websites tailored to your business. From concept to launch, we handle the complexity so you can focus on growth."
buttons={[
{ text: "Start Your Project", href: "/contact" },
{ text: "View Portfolio", href: "/portfolio" },
]}
buttonAnimation="slide-up"
background={{ variant: "noise" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/a-sleek-modern-website-interface-display-1772640593669-88f1fd10.png"
imageAlt="Modern website interface showcase"
frameStyle="browser"
mediaAnimation="blur-reveal"
/>
</div>
<div id="about-metrics" data-section="about-metrics">
<AboutMetric
title="Proven Results Across Industries"
metrics={[
{ icon: TrendingUp, label: "Average Client Revenue Increase", value: "42%" },
{ icon: Zap, label: "Projects Delivered", value: "150+" },
{ icon: Target, label: "Client Retention Rate", value: "95%" },
{ icon: Users, label: "Happy Clients", value: "80+" },
]}
metricsAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="portfolio" data-section="portfolio">
<FeatureCardThree
title="Featured Case Studies"
description="Explore how we've transformed businesses through strategic design and high-performance web solutions"
tag="Our Work"
tagAnimation="slide-up"
features={[
{
id: "01",
title: "E-Commerce Transformation",
description: "Redesigned product pages and checkout flow, resulting in 35% increase in conversion rate and 28% improvement in average order value.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/a-professional-portfolio-case-study-imag-1772640593679-6329cc41.png",
imageAlt: "E-commerce redesign case study",
},
{
id: "02",
title: "SaaS Platform Launch",
description: "Built entire web presence for B2B SaaS startup. Site generated 500+ qualified leads in first 3 months through strategic positioning.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/creative-agency-portfolio-project-showca-1772640606872-f4cd5e43.png",
imageAlt: "SaaS platform launch case study",
},
{
id: "03",
title: "Digital Agency Rebrand",
description: "Complete brand and website overhaul showcasing work portfolio. Resulted in 3x more inbound inquiries and doubled project volume.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/e-commerce-website-redesign-success-stor-1772640608785-311aee43.png",
imageAlt: "Digital agency rebrand case study",
},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="services" data-section="services">
<PricingCardEight
title="Transparent Pricing"
description="Flexible service packages designed for small-to-midsize businesses. No hidden fees, clear deliverables."
tag="Services"
tagAnimation="slide-up"
plans={[
{
id: "starter",
badge: "Perfect for Startups",
badgeIcon: Sparkles,
price: "$2,500",
subtitle: "Essential web presence",
buttons: [{ text: "Get Started", href: "/contact" }],
features: [
"5-page custom website",
"Mobile-responsive design",
"Contact form integration",
"SEO optimization basics",
"1 round of revisions",
"Deployment & setup",
],
},
{
id: "professional",
badge: "Most Popular",
badgeIcon: CheckCircle,
price: "$5,500",
subtitle: "High-converting website",
buttons: [{ text: "Choose Plan", href: "/contact" }],
features: [
"10-page custom website",
"Advanced SEO strategy",
"CMS integration",
"Performance optimization",
"Analytics setup",
"2 rounds of revisions",
"6 months support",
],
},
{
id: "enterprise",
badge: "For Scale",
badgeIcon: Shield,
price: "$12,000+",
subtitle: "Full digital transformation",
buttons: [{ text: "Let's Talk", href: "/contact" }],
features: [
"Unlimited pages",
"E-commerce integration",
"Custom functionality",
"Brand strategy included",
"Complete marketing setup",
"Unlimited revisions",
"12 months support",
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
title="Client Success Stories"
description="Hear from business owners who transformed their online presence with AceMedia"
tag="Testimonials"
tagAnimation="slide-up"
testimonials={[
{
id: "1",
name: "Marcus Johnson",
role: "Founder, TechFlow Solutions",
testimonial:
"AceMedia transformed our online presence completely. Our new website generated 3x more leads within the first month. The team was responsive, professional, and truly understood our business goals.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-confident-mal-1772640592241-bbd411b2.png",
imageAlt: "Marcus Johnson",
},
{
id: "2",
name: "Sarah Chen",
role: "CEO, GrowthCo",
testimonial:
"Working with AceMedia was a game-changer. They didn't just build a website—they built a conversion machine. Our sales increased by 42% after the redesign. Highly recommend!",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-confident-fem-1772640592646-56ceeab1.png",
imageAlt: "Sarah Chen",
},
{
id: "3",
name: "David Martinez",
role: "Owner, Digital Innovations",
testimonial:
"Professional, reliable, and results-driven. AceMedia delivered our project on time and exceeded our expectations. They've become our go-to partner for all digital projects.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-young-male-en-1772640592159-b39a6e59.png",
imageAlt: "David Martinez",
},
{
id: "4",
name: "Jennifer Williams",
role: "Managing Director, Prime Marketing",
testimonial:
"The level of attention to detail and commitment to our success was outstanding. Our website is now our best marketing asset. AceMedia truly cares about client outcomes.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-confident-wom-1772640592380-989cca76.png",
imageAlt: "Jennifer Williams",
},
{
id: "5",
name: "Robert Thompson",
role: "VP Operations, CloudSync Inc",
testimonial:
"AceMedia brought a fresh perspective to our brand. The website they created perfectly captures our value proposition and speaks directly to our target audience.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-mature-male-b-1772640592480-d12f4c76.png",
imageAlt: "Robert Thompson",
},
{
id: "6",
name: "Lisa Anderson",
role: "Founder, InnovateLab",
testimonial:
"Exceptional work from start to finish. AceMedia's team is knowledgeable, creative, and truly invested in making the project a success. Our conversion rate improved significantly.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-young-female--1772640592464-ec168ba1.png",
imageAlt: "Lisa Anderson",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Trusted by Industry Leaders"
description="Leading businesses choose AceMedia for web design excellence"
tag="Partners"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
names={[
"TechFlow Solutions",
"GrowthCo",
"Digital Innovations",
"Prime Marketing",
"CloudSync Inc",
"InnovateLab",
"StartupHub",
"Enterprise Ventures",
]}
speed={40}
showCard={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Ready to Get Started?"
tagIcon={Zap}
tagAnimation="slide-up"
title="Let's Build Your High-Converting Website"
description="Whether you're a startup looking to establish your presence or an established business ready to scale, we're here to help. Schedule a consultation with our team today."
buttons={[
{ text: "Schedule Consultation", href: "/contact" },
{ text: "View Pricing", href: "/" },
]}
buttonAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="AceMedia"
copyrightText="© 2025 AceMedia. All rights reserved."
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,185 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Zap } from "lucide-react";
const navItems = [
{ name: "Home", id: "/" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Company",
items: [
{ label: "About", href: "/about" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Services", href: "/services" },
{ label: "Team", href: "/about" },
],
},
{
title: "Resources",
items: [
{ label: "Blog", href: "/blog" },
{ label: "Case Studies", href: "/portfolio" },
{ label: "FAQ", href: "/faq" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect",
items: [
{ label: "Twitter", href: "https://twitter.com/acemedia" },
{ label: "LinkedIn", href: "https://linkedin.com/company/acemedia" },
{ label: "Instagram", href: "https://instagram.com/acemedia" },
{ label: "hello@acemedia.co", href: "mailto:hello@acemedia.co" },
],
},
];
export default function PortfolioPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="noise"
cardStyle="inset"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="AceMedia"
bottomLeftText="Design Studio"
bottomRightText="hello@acemedia.co"
/>
</div>
<div id="portfolio-cases" data-section="portfolio-cases">
<FeatureCardThree
title="Our Portfolio - Transformative Projects"
description="Discover in-depth case studies showcasing our approach to solving complex design challenges and driving measurable business results"
tag="Case Studies"
tagAnimation="slide-up"
features={[
{
id: "01",
title: "E-Commerce Transformation",
description:
"Redesigned product pages and checkout flow, resulting in 35% increase in conversion rate and 28% improvement in average order value. Implemented advanced analytics tracking and A/B testing framework.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/a-professional-portfolio-case-study-imag-1772640593679-6329cc41.png",
imageAlt: "E-commerce redesign case study",
},
{
id: "02",
title: "SaaS Platform Launch",
description:
"Built entire web presence for B2B SaaS startup. Site generated 500+ qualified leads in first 3 months through strategic positioning. Included interactive product demos and comprehensive resource library.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/creative-agency-portfolio-project-showca-1772640606872-f4cd5e43.png",
imageAlt: "SaaS platform launch case study",
},
{
id: "03",
title: "Digital Agency Rebrand",
description:
"Complete brand and website overhaul showcasing work portfolio. Resulted in 3x more inbound inquiries and doubled project volume. New design system ensures brand consistency across all touchpoints.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/e-commerce-website-redesign-success-stor-1772640608785-311aee43.png",
imageAlt: "Digital agency rebrand case study",
},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="portfolio-testimonials" data-section="portfolio-testimonials">
<TestimonialCardTwo
title="What Our Portfolio Clients Say"
description="Direct feedback from the businesses we've partnered with and transformed"
tag="Client Feedback"
tagAnimation="slide-up"
testimonials={[
{
id: "1",
name: "Marcus Johnson",
role: "Founder, TechFlow Solutions",
testimonial:
"The portfolio work AceMedia showcased was exactly what we needed. Seeing their real-world results gave us confidence. Our results exceeded expectations.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-confident-mal-1772640592241-bbd411b2.png",
imageAlt: "Marcus Johnson",
},
{
id: "2",
name: "Sarah Chen",
role: "CEO, GrowthCo",
testimonial:
"Looking at AceMedia's portfolio projects convinced us they were the right partner. They delivered even better results than their previous case studies suggested.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-confident-fem-1772640592646-56ceeab1.png",
imageAlt: "Sarah Chen",
},
{
id: "3",
name: "David Martinez",
role: "Owner, Digital Innovations",
testimonial:
"The quality of work in their portfolio immediately stood out. Every detail was considered. We knew we were working with true professionals.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-young-male-en-1772640592159-b39a6e59.png",
imageAlt: "David Martinez",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="portfolio-cta" data-section="portfolio-cta">
<ContactCTA
tag="Ready to Become Our Next Success Story?"
tagIcon={Zap}
tagAnimation="slide-up"
title="Let's Create Your Next Winning Project"
description="Impressed by our portfolio? Let's discuss how we can apply the same strategic approach and proven methods to your business goals."
buttons={[
{ text: "Start Your Project", href: "/contact" },
{ text: "View Services", href: "/services" },
]}
buttonAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="AceMedia"
copyrightText="© 2025 AceMedia. All rights reserved."
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,207 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Sparkles, CheckCircle, Shield, Zap } from "lucide-react";
const navItems = [
{ name: "Home", id: "/" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Company",
items: [
{ label: "About", href: "/about" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Services", href: "/services" },
{ label: "Team", href: "/about" },
],
},
{
title: "Resources",
items: [
{ label: "Blog", href: "/blog" },
{ label: "Case Studies", href: "/portfolio" },
{ label: "FAQ", href: "/faq" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect",
items: [
{ label: "Twitter", href: "https://twitter.com/acemedia" },
{ label: "LinkedIn", href: "https://linkedin.com/company/acemedia" },
{ label: "Instagram", href: "https://instagram.com/acemedia" },
{ label: "hello@acemedia.co", href: "mailto:hello@acemedia.co" },
],
},
];
export default function ServicesPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="noise"
cardStyle="inset"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="AceMedia"
bottomLeftText="Design Studio"
bottomRightText="hello@acemedia.co"
/>
</div>
<div id="services-pricing" data-section="services-pricing">
<PricingCardEight
title="Services & Pricing"
description="Choose the perfect package for your business needs. All plans include strategic consultation and ongoing support."
tag="Our Services"
tagAnimation="slide-up"
plans={[
{
id: "starter",
badge: "Perfect for Startups",
badgeIcon: Sparkles,
price: "$2,500",
subtitle: "Essential web presence",
buttons: [{ text: "Get Started", href: "/contact" }],
features: [
"5-page custom website",
"Mobile-responsive design",
"Contact form integration",
"SEO optimization basics",
"1 round of revisions",
"Deployment & setup",
],
},
{
id: "professional",
badge: "Most Popular",
badgeIcon: CheckCircle,
price: "$5,500",
subtitle: "High-converting website",
buttons: [{ text: "Choose Plan", href: "/contact" }],
features: [
"10-page custom website",
"Advanced SEO strategy",
"CMS integration",
"Performance optimization",
"Analytics setup",
"2 rounds of revisions",
"6 months support",
],
},
{
id: "enterprise",
badge: "For Scale",
badgeIcon: Shield,
price: "$12,000+",
subtitle: "Full digital transformation",
buttons: [{ text: "Let's Talk", href: "/contact" }],
features: [
"Unlimited pages",
"E-commerce integration",
"Custom functionality",
"Brand strategy included",
"Complete marketing setup",
"Unlimited revisions",
"12 months support",
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="services-testimonials" data-section="services-testimonials">
<TestimonialCardTwo
title="Why Clients Choose Our Services"
description="Hear directly from businesses that have invested in AceMedia services"
tag="Service Reviews"
tagAnimation="slide-up"
testimonials={[
{
id: "1",
name: "Jennifer Williams",
role: "Managing Director, Prime Marketing",
testimonial:
"The service packages are transparent and exactly what we needed. No surprises, just honest work and real results. Best investment we've made.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-confident-wom-1772640592380-989cca76.png",
imageAlt: "Jennifer Williams",
},
{
id: "2",
name: "Robert Thompson",
role: "VP Operations, CloudSync Inc",
testimonial:
"We chose the professional plan and it was perfect. The team understood our needs and delivered a website that speaks to our customers.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-mature-male-b-1772640592480-d12f4c76.png",
imageAlt: "Robert Thompson",
},
{
id: "3",
name: "Lisa Anderson",
role: "Founder, InnovateLab",
testimonial:
"The enterprise service package gave us everything we needed for a full digital transformation. Worth every dollar for the strategic guidance alone.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUGx3nyr3Ulfuu49Sf7JGcziQq/professional-headshot-of-a-young-female--1772640592464-ec168ba1.png",
imageAlt: "Lisa Anderson",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="services-cta" data-section="services-cta">
<ContactCTA
tag="Ready to Invest in Your Success?"
tagIcon={Zap}
tagAnimation="slide-up"
title="Choose Your Service Package Today"
description="All plans come with dedicated support and strategic guidance. Our team will work with you to ensure your success from day one."
buttons={[
{ text: "Schedule Consultation", href: "/contact" },
{ text: "View Our Portfolio", href: "/portfolio" },
]}
buttonAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="AceMedia"
copyrightText="© 2025 AceMedia. All rights reserved."
columns={footerColumns}
/>
</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-figtree), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-figtree), 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: #000802;
--card: #0b1a0b;
--foreground: #e6ffe6;
--primary-cta: #80da9b;
--primary-cta-text: #000802;
--secondary-cta: #07170b;
--secondary-cta-text: #e6ffe6;
--accent: #38714a;
--background-accent: #2c6541;
/* 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;
}
}