bender/5eaafae2-9f75-44b8-9d37-9187bfd16608
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-13 18:39:29 +00:00
commit c4f503c8de
628 changed files with 78763 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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";

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

@@ -0,0 +1,42 @@
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 { Roboto } from "next/font/google";
export const metadata: Metadata = {
title: 'Price Ladder Command Center - B2B Pricing Analytics',
description: 'Real-time pricing intelligence platform for sales teams. Analyze margins, demand curves, and optimize pricing with AI recommendations. Indian rupee support.',
};
const roboto = Roboto({
variable: "--font-roboto", subsets: ["latin"],
weight: ["100", "300", "400", "500", "700", "900"],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${roboto.variable} antialiased`}>
<Tag />
{children}
<script
dangerouslySetInnerHTML={{
__html: `${getVisualEditScript()}`
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

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

@@ -0,0 +1,344 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Zap, Shield, Sparkles, Star, CreditCard, TrendingUp, Award, CheckCircle, User, Crown } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="mediumSmall"
sizing="medium"
background="blurBottom"
cardStyle="gradient-radial"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Dashboard", id: "dashboard" },
{ name: "Analytics", id: "analytics" },
{ name: "Pricing", id: "pricing" },
{ name: "Docs", id: "docs" }
]}
brandName="Price Ladder Command Center"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Price Ladder Sales Command Center"
description="Real-time pricing analytics for B2B sales teams. Analyze product hierarchies, margin optimization, demand curves, and customer segments with AI-powered pricing recommendations. Built for Samsung, OnePlus, and Apple product portfolios."
tag="Terminal-Style Dashboard"
tagIcon={Zap}
tagAnimation="slide-up"
buttons={[
{ text: "Launch Dashboard", href: "#features" },
{ text: "View Demo", href: "#pricing" }
]}
buttonAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/dark-professional-terminal-style-dashboa-1773427117346-a03ed30e.png"
imageAlt="Dark terminal dashboard with pricing analytics"
showDimOverlay={true}
showBlur={true}
className="relative w-full"
containerClassName="max-w-7xl"
titleClassName="text-5xl font-bold"
descriptionClassName="text-xl text-opacity-90"
/>
</div>
<div id="about" data-section="about">
<TextAbout
tag="About Command Center"
tagIcon={Shield}
tagAnimation="blur-reveal"
title="Enterprise Pricing Intelligence Platform"
buttons={[
{ text: "Explore Features", href: "#features" }
]}
buttonAnimation="opacity"
useInvertedBackground={false}
containerClassName="max-w-4xl"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyThree
title="Advanced Pricing Analytics Toolkit"
description="Complete suite of tools for B2B sales teams to optimize pricing strategies, analyze demand elasticity, and maximize margins."
tag="Core Features"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
animationType="scale-rotate"
useInvertedBackground={true}
features={[
{
id: "feature-1", title: "Price Ladder Table", tags: ["Real-time", "Sortable", "Margin Analysis"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/sleek-dark-pricing-table-interface-showi-1773427119650-8db57a17.png", imageAlt: "Interactive pricing ladder table"
},
{
id: "feature-2", title: "3D Demand Surface", tags: ["Rotatable", "Price-Volume Analysis", "Revenue Optimization"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/3d-rotating-demand-surface-graph-with-pr-1773427117114-4ab4f7cc.png", imageAlt: "3D demand curve visualization"
},
{
id: "feature-3", title: "Margin Heatmap", tags: ["Animated", "Segment Analysis", "Elasticity Mapping"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/animated-heatmap-showing-price-elasticit-1773427118384-f00fe0e2.png", imageAlt: "Price sensitivity heatmap"
},
{
id: "feature-4", title: "AI Pricing Advisor", tags: ["Machine Learning", "Chatbot", "Recommendations"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/friendly-ai-assistant-avatar-with-gradie-1773427118829-bd4ad6e9.png", imageAlt: "AI assistant for pricing strategy"
},
{
id: "feature-5", title: "Revenue Dashboard", tags: ["Real-time Charts", "KPI Tracking", "Profit Analysis"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/animated-revenue-and-profit-dashboard-wi-1773427119675-fc7d034d.png", imageAlt: "Revenue and profit analytics"
},
{
id: "feature-6", title: "Customer Segmentation", tags: ["3 Segments", "Demand Curves", "Price Sensitivity"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/customer-segment-visualization-showing-s-1773427118745-5da2ec73.png", imageAlt: "Customer segment analysis"
}
]}
carouselMode="buttons"
containerClassName="max-w-6xl"
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
title="Premium Smartphone Portfolio"
description="Analyze Samsung, OnePlus, and Apple flagship devices with real-time pricing and margin data. Indian rupee pricing with regional market adjustments."
tag="Product Lineup"
tagIcon={Zap}
tagAnimation="slide-up"
textboxLayout="default"
animationType="blur-reveal"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "samsung-a53", name: "Samsung Galaxy A53", price: "₹29,999", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/array-of-samsung-galaxy-phones-a53-s23-z-1773427116979-3afce8d6.png", imageAlt: "Samsung Galaxy A53 smartphone"
},
{
id: "oneplus-11", name: "OnePlus 11", price: "₹54,999", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/oneplus-flagship-phones-11-12-displayed--1773427117736-959795ea.png", imageAlt: "OnePlus 11 flagship phone"
},
{
id: "apple-iphone15", name: "Apple iPhone 15 Pro", price: "₹99,999", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/apple-iphone-15-series-phones-pro-pro-ma-1773427117094-a4116ad4.png", imageAlt: "Apple iPhone 15 Pro premium device"
},
{
id: "samsung-s23", name: "Samsung Galaxy S23", price: "₹64,999", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/array-of-samsung-galaxy-phones-a53-s23-z-1773427116979-3afce8d6.png", imageAlt: "Samsung Galaxy S23 flagship"
},
{
id: "oneplus-12", name: "OnePlus 12", price: "₹69,999", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/oneplus-flagship-phones-11-12-displayed--1773427117736-959795ea.png", imageAlt: "OnePlus 12 latest flagship"
},
{
id: "apple-iphone15-max", name: "Apple iPhone 15 Pro Max", price: "₹119,999", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/apple-iphone-15-series-phones-pro-pro-ma-1773427117094-a4116ad4.png", imageAlt: "Apple iPhone 15 Pro Max premium"
}
]}
carouselMode="buttons"
containerClassName="max-w-6xl"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
title="Pricing Plans for Sales Teams"
description="Flexible subscription options for individual reps, team leads, and enterprise departments. All plans include Indian rupee formatting and real-time market data."
tag="Flexible Pricing"
tagIcon={CreditCard}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={true}
plans={[
{
id: "rep", name: "Sales Rep", price: "₹4,999", badge: "Individual", badgeIcon: User,
buttons: [{ text: "Get Started", href: "#contact" }],
features: ["Price ladder for 100+ SKUs", "Basic margin analysis", "Demand curve visualization", "AI advisor (5 queries/day)", "Email support"]
},
{
id: "team", name: "Team Lead", price: "₹14,999", badge: "Popular", badgeIcon: Star,
buttons: [{ text: "Start Free Trial", href: "#contact" }],
features: ["Unlimited SKUs & products", "Advanced margin analytics", "3D demand surface + heatmap", "AI advisor (unlimited)", "Talk track templates", "Team collaboration tools", "Priority support"]
},
{
id: "enterprise", name: "Enterprise", price: "Custom", badge: "Custom", badgeIcon: Crown,
buttons: [{ text: "Contact Sales", href: "#contact" }],
features: ["Dedicated account manager", "Custom integrations (CRM, ERP)", "White-label solution", "Advanced AI with ML models", "Pricing game + leaderboard", "Regional market analysis", "24/7 premium support"]
}
]}
carouselMode="buttons"
containerClassName="max-w-6xl"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
title="Revenue Impact by Segment"
description="Real-time KPIs showing demand metrics, margin optimization, and revenue projections across customer segments."
tag="Performance Metrics"
tagIcon={TrendingUp}
tagAnimation="blur-reveal"
textboxLayout="split"
animationType="scale-rotate"
useInvertedBackground={false}
metrics={[
{
id: "metric-revenue", value: "₹5.2Cr", title: "Annual Revenue Potential", description: "Optimized pricing across portfolio", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/animated-revenue-and-profit-dashboard-wi-1773427119675-fc7d034d.png"
},
{
id: "metric-margin", value: "32.4%", title: "Gross Margin Improvement", description: "Via dynamic pricing strategy", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/animated-heatmap-showing-price-elasticit-1773427118384-f00fe0e2.png"
},
{
id: "metric-elasticity", value: "-0.87", title: "Price Elasticity (Avg)", description: "Demand coefficient across tiers", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/mathematical-elasticity-calculator-showi-1773427118493-888904f4.jpg"
},
{
id: "metric-segments", value: "3 Tiers", title: "Customer Segments", description: "Students, Professionals, Premium", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au0BBEgM9xwLuQjWYGddEyMOOh/customer-segment-visualization-showing-s-1773427118745-5da2ec73.png"
}
]}
containerClassName="max-w-6xl"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
title="Sales Teams Love Our Command Center"
description="Real-world success stories from B2B sales reps using our pricing analytics platform."
tag="Success Stories"
tagIcon={Award}
tagAnimation="slide-up"
textboxLayout="default"
animationType="depth-3d"
useInvertedBackground={true}
carouselMode="buttons"
testimonials={[
{
id: "testimonial-1", name: "Rajesh Kumar", role: "Regional Sales Manager, Mumbai", testimonial: "The price ladder table reduced our negotiation time by 60%. We now close deals 3x faster with data-backed pricing strategies.", icon: Star
},
{
id: "testimonial-2", name: "Priya Sharma", role: "B2B Sales Rep, Delhi NCR", testimonial: "The AI advisor chatbot is like having an economics PhD in my pocket. Margin suggestions increased our average deal size by 18%.", icon: Sparkles
},
{
id: "testimonial-3", name: "Anil Patel", role: "Sales Director, Bangalore", testimonial: "The 3D demand visualization convinced our team to shift premium positioning. Revenue jumped from ₹2Cr to ₹3.2Cr in Q2.", icon: TrendingUp
},
{
id: "testimonial-4", name: "Meera Singh", role: "Enterprise Account Executive", testimonial: "The pricing game leaderboard gamified our team's learning. Competition drove adoption and skill improvement across the board.", icon: Zap
},
{
id: "testimonial-5", name: "Vikram Desai", role: "Channel Manager, Pune", testimonial: "Custom integrations with our CRM saved countless manual hours. The talk track templates are marketing gold.", icon: CheckCircle
},
{
id: "testimonial-6", name: "Anjali Verma", role: "Sales Ops Lead, Hyderabad", testimonial: "Real-time margin heatmaps for customer segments transformed our strategic pricing. Now we optimize for both volume and profit.", icon: Award
}
]}
containerClassName="max-w-6xl"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Quick answers to common questions about Price Ladder Command Center, integrations, and pricing strategies."
textPosition="left"
useInvertedBackground={false}
showCard={true}
animationType="smooth"
faqsAnimation="slide-up"
faqs={[
{
id: "faq-1", title: "How does the AI pricing advisor work?", content: "Our AI engine analyzes historical demand curves, customer segments (Students/Professionals/Premium), price elasticity coefficients, and margin targets. It recommends optimal prices for each SKU tier using machine learning models trained on 10,000+ pricing experiments across Samsung, OnePlus, and Apple product categories."
},
{
id: "faq-2", title: "What is the price ladder optimization?", content: "The ladder organizes products by retail price (low to high) showing cost, retail, MAP, margin percentages, and a 5-dot opportunity score. Sales reps can quickly identify which tiers maximize both volume and profit, with built-in upsell suggestions to the next product up."
},
{
id: "faq-3", title: "Does it work with my CRM?", content: "Yes! We integrate with Salesforce, HubSpot, Zoho, and Microsoft Dynamics. Enterprise plans include custom API integrations. Talk track templates and deal recommendations sync automatically with your pipeline."
},
{
id: "faq-4", title: "How is demand calculated?", content: "Using price elasticity formulas: Demand = BaseQuantity × (Price/BasePrice)^ElasticityCoefficient. The platform estimates demand drops for each price change, showing revenue impact in real-time. Customer segments (Students: -1.2 elasticity, Professionals: -0.85, Premium: -0.4) have different sensitivities."
},
{
id: "faq-5", title: "Can I see 3D demand surfaces?", content: "Absolutely. The rotating 3D surface shows Price (X-axis) vs Quantity (Y-axis) vs Revenue (Z-axis). You can manually adjust prices and see real-time revenue impact. Perfect for finding the profit-maximizing price point without complex calculus."
},
{
id: "faq-6", title: "What about the pricing game?", content: "The Pricing Game is a competitive simulation where reps manage product portfolios against AI opponents. Hit revenue targets while optimizing margins. Top performers get badges and appear on the global leaderboard. Great for team engagement and pricing strategy mastery."
}
]}
containerClassName="max-w-6xl"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Start Today"
title="Get Access to Price Ladder Command Center"
description="Join 500+ B2B sales teams optimizing pricing with AI-powered analytics. Indian rupee support, real-time data, and enterprise integrations included."
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "gradient-bars" }}
useInvertedBackground={true}
inputPlaceholder="your.email@company.com"
buttonText="Request Demo"
termsText="By signing up, you agree to our Terms & Conditions. We respect your privacy."
containerClassName="max-w-2xl"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Product", items: [
{ label: "Dashboard", href: "#" },
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Integrations", href: "#" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Resources", items: [
{ label: "Documentation", href: "#" },
{ label: "API Reference", href: "#" },
{ label: "Support", href: "#" },
{ label: "Status", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Security", href: "#" },
{ label: "Compliance", href: "#" }
]
}
]}
bottomLeftText="© 2024 Price Ladder Command Center. All rights reserved."
bottomRightText="Made for B2B Sales Teams | Pricing Analytics Platform | 🇮🇳 India-First"
/>
</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-roboto), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-roboto), 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: #0a0a0a;
--card: #1a1a1a;
--foreground: #f0f8ffe6;
--primary-cta: #cee7ff;
--primary-cta-text: #0a0a0a;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #f0f8ffe6;
--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;
}
}