bender/fd1d5834-e198-465b-8ec9-32f2be8d1fed
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 21:20:20 +00:00
commit 2e6e3300a7
628 changed files with 78752 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";

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

@@ -0,0 +1,44 @@
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 { Open_Sans } from "next/font/google";
export const metadata: Metadata = {
title: 'TradePro Academy | Advanced Trading Courses',
description: 'Master advanced trading strategies with lifetime access courses. Join 8,500+ successful traders. 30-day money-back guarantee.',
};
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const openSans = Open_Sans({
variable: "--font-open-sans", subsets: ["latin"],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${inter.variable} ${openSans.variable} antialiased`}>
<Tag />
{children}
<script
dangerouslySetInnerHTML={{
__html: `${getVisualEditScript()}`
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

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

@@ -0,0 +1,331 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Star, Sparkles } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="compact"
sizing="large"
background="blurBottom"
cardStyle="inset"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ "name": "Home", "id": "home" },
{ "name": "Courses", "id": "courses" },
{ "name": "Features", "id": "features" },
{ "name": "Pricing", "id": "pricing" },
{ "name": "Testimonials", "id": "testimonials" },
{ "name": "Contact", "id": "contact" }
]}
brandName="TradePro Academy"
bottomLeftText="Master Trading"
bottomRightText="hello@tradepro.com"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="TradePro Academy"
description="Master advanced trading strategies, technical analysis, and risk management from industry experts. Join thousands of successful traders who have transformed their financial future with our comprehensive online courses."
buttons={[
{ "text": "Start Learning Today", "href": "#pricing" },
{ "text": "Explore Courses", "href": "#courses" }
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/modern-trading-setup-with-monitor-running-forex-trends-going-up_482257-126331.jpg"
imageAlt="Professional trader analyzing advanced trading charts and market data"
showDimOverlay={false}
ariaLabel="Hero section - TradePro Academy trading course platform"
className="relative w-full"
containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
contentContainerClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
descriptionClassName="text-lg text-foreground/80 leading-relaxed"
buttonContainerClassName="flex flex-wrap gap-4 mt-8"
buttonClassName="px-8 py-3 rounded-lg font-medium transition-all duration-300"
logoContainerClassName="mb-8"
logoClassName="text-4xl font-bold text-foreground"
/>
</div>
<div id="features" data-section="features">
<FeatureCardSixteen
title="Why Choose TradePro Academy"
description="Our proven curriculum and expert instructors give you the edge needed to succeed in modern trading markets."
tag="Premium Features"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="blur-reveal"
negativeCard={{
"items": [
"Generic trading advice without depth", "Outdated strategies from past decades", "No real-time market support or mentorship", "Expensive with no money-back guarantee"
]
}}
positiveCard={{
"items": [
"Advanced technical analysis mastery", "Latest strategies for modern markets", "24/7 community support and live mentorship", "Affordable pricing with lifetime access"
]
}}
ariaLabel="Feature comparison - why choose TradePro Academy"
className="relative w-full py-16"
containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
textBoxClassName="mb-12 text-center"
textBoxTitleClassName="text-3xl md:text-4xl font-bold text-foreground mb-4"
textBoxDescriptionClassName="text-lg text-foreground/70 max-w-2xl mx-auto"
gridClassName="grid grid-cols-1 md:grid-cols-2 gap-8"
cardClassName="p-8 rounded-lg border border-accent/20"
itemClassName="flex items-start gap-3 mb-4"
itemIconClassName="flex-shrink-0 w-5 h-5 text-accent mt-1"
itemTextClassName="text-foreground/80"
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
heading={[
{
"type": "text", "content": "Learn from industry-leading traders and financial experts with 50+ years of combined experience. Our curriculum covers everything from foundational concepts to advanced algorithmic trading strategies."
}
]}
buttons={[
{ "text": "View All Courses", "href": "#courses" }
]}
buttonAnimation="slide-up"
useInvertedBackground={false}
ariaLabel="About TradePro Academy - expert trading education"
className="relative w-full py-16"
containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
headingClassName="text-2xl md:text-3xl font-bold text-foreground leading-tight mb-6"
imageWrapperClassName="relative rounded-lg overflow-hidden"
imageClassName="w-full h-auto object-cover"
buttonContainerClassName="flex flex-wrap gap-4 mt-8"
buttonClassName="px-6 py-3 rounded-lg font-medium transition-all"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardNine
title="Transparent Pricing for Every Trader"
description="Choose the course package that matches your trading goals and experience level. All plans include lifetime access and community support."
tag="Flexible Plans"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="blur-reveal"
plans={[
{
"id": "beginner", "title": "Foundations", "price": "$97", "period": "one-time", "features": [
"7 beginner courses", "Basic technical analysis", "Trading psychology fundamentals", "30-day money-back guarantee", "Community access", "Email support"
],
"button": { "text": "Get Started", "href": "#contact" }
},
{
"id": "intermediate", "title": "Professional", "price": "$297", "period": "one-time", "features": [
"25 intermediate courses", "Advanced technical analysis", "Risk management strategies", "Live trading sessions", "Priority community access", "Priority email support", "Weekly mentorship calls"
],
"button": { "text": "Enroll Now", "href": "#contact" }
},
{
"id": "advanced", "title": "Elite Trader", "price": "$597", "period": "one-time", "features": [
"All 50+ courses included", "Algorithmic trading strategies", "Options and futures trading", "Live trading room access", "1-on-1 mentorship sessions", "Personal trading plan development", "Lifetime updates and new courses", "VIP Discord community"
],
"button": { "text": "Join Elite", "href": "#contact" }
}
]}
ariaLabel="Pricing plans - choose your trading course"
className="relative w-full py-16"
containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
textBoxClassName="mb-12 text-center"
textBoxTitleClassName="text-3xl md:text-4xl font-bold text-foreground mb-4"
textBoxDescriptionClassName="text-lg text-foreground/70 max-w-2xl mx-auto"
cardClassName="p-8 rounded-lg border border-accent/30 hover:border-accent/60 transition-colors"
planTitleClassName="text-xl font-bold text-foreground mb-2"
planPriceClassName="text-3xl font-bold text-primary-cta mb-1"
featuresListClassName="space-y-3 mb-8"
featureItemClassName="flex items-start gap-2 text-foreground/80"
featureIconClassName="flex-shrink-0 w-4 h-4 text-accent mt-1"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
testimonials={[
{
"id": "testimonial-1", "name": "Michael Chen", "role": "Full-Time Trader", "testimonial": "TradePro Academy transformed my trading completely. Within 6 months of completing the Professional course, I doubled my trading account. The risk management techniques alone were worth the investment.", "imageSrc": "http://img.b2bpic.net/free-photo/portrait-handsome-businessman-wearing-glasses_329181-677.jpg", "imageAlt": "Michael Chen - successful trader testimonial", "icon": Star
},
{
"id": "testimonial-2", "name": "Sarah Mitchell", "role": "Part-Time Investor", "testimonial": "As a busy professional, I loved the flexibility. The courses are well-structured and the live trading sessions with mentors have been invaluable. My portfolio has grown 35% since joining.", "imageSrc": "http://img.b2bpic.net/free-photo/blond-business-woman-blue-shirt_23-2148095792.jpg", "imageAlt": "Sarah Mitchell - investor testimonial", "icon": Star
},
{
"id": "testimonial-3", "name": "James Rodriguez", "role": "Day Trader", "testimonial": "The technical analysis deep-dives are incredible. I've refined my day trading strategy significantly. The community support keeps me motivated and accountable every single day.", "imageSrc": "http://img.b2bpic.net/free-photo/male-costume-with-cup-coffee_23-2148112124.jpg", "imageAlt": "James Rodriguez - day trader testimonial", "icon": Star
},
{
"id": "testimonial-4", "name": "Emma Thompson", "role": "Financial Advisor", "testimonial": "I recommend TradePro Academy to all my clients. The curriculum is comprehensive, modern, and actually teaches real-world trading. Professional-grade education at an accessible price point.", "imageSrc": "http://img.b2bpic.net/free-photo/sitting-businesswoman_23-2147626507.jpg", "imageAlt": "Emma Thompson - financial advisor testimonial", "icon": Star
},
{
"id": "testimonial-5", "name": "David Park", "role": "Swing Trader", "testimonial": "The psychology component changed my approach to trading. I'm no longer making emotional decisions. Three months in and my win rate has jumped from 45% to 62%.", "imageSrc": "http://img.b2bpic.net/free-photo/positive-young-businesswoman-pointing-camera_1262-5406.jpg", "imageAlt": "David Park - swing trader testimonial", "icon": Star
},
{
"id": "testimonial-6", "name": "Lisa Bergström", "role": "Options Trader", "testimonial": "The options trading module is world-class. I went from scared of options to confidently trading complex spreads. The instructors really know their material and explain it clearly.", "imageSrc": "http://img.b2bpic.net/free-photo/businesswoman-with-arms-desk_1098-2184.jpg", "imageAlt": "Lisa Bergström - options trader testimonial", "icon": Star
}
]}
carouselMode="buttons"
animationType="blur-reveal"
title="Real Results from Real Traders"
description="Join thousands of successful traders who have used TradePro Academy to accelerate their trading journey. Here's what they have to say."
tag="Student Success Stories"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Student testimonials - trading course success stories"
className="relative w-full py-16"
containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
textBoxClassName="mb-12 text-center"
textBoxTitleClassName="text-3xl md:text-4xl font-bold text-foreground mb-4"
textBoxDescriptionClassName="text-lg text-foreground/70 max-w-2xl mx-auto"
cardClassName="p-8 rounded-lg border border-accent/20 bg-card"
imageWrapperClassName="mb-4"
imageClassName="w-14 h-14 rounded-full object-cover"
nameClassName="font-bold text-foreground"
roleClassName="text-sm text-foreground/60"
testimonialClassName="text-foreground/80 italic mt-4"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
title="TradePro by the Numbers"
tag="Proven Results"
tagAnimation="slide-up"
metrics={[
{ "id": "metric-1", "value": "8,500+", "description": "Active Students Worldwide" },
{ "id": "metric-2", "value": "50+", "description": "Expert-Led Video Courses" },
{ "id": "metric-3", "value": "4.8/5", "description": "Average Student Rating" },
{ "id": "metric-4", "value": "$2.3M+", "description": "Combined Student Trading Profits" }
]}
metricsAnimation="blur-reveal"
useInvertedBackground={false}
ariaLabel="Key metrics - TradePro Academy success statistics"
className="relative w-full py-16"
containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
titleClassName="text-3xl md:text-4xl font-bold text-foreground text-center mb-12"
tagClassName="inline-block px-4 py-2 rounded-full bg-accent/10 text-accent text-sm font-medium mb-4"
metricsContainerClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
metricClassName="text-center p-6 rounded-lg border border-accent/20"
valueClassName="text-4xl md:text-5xl font-bold text-primary-cta mb-2"
descriptionClassName="text-foreground/70"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Get answers to common questions about our trading courses, access, and support."
tag="Need Help?"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
mediaPosition="right"
imageSrc="http://img.b2bpic.net/free-photo/impressed-young-male-call-center-operator-wearing-headset-sitting-table-with-office-tools-looking-laptop-points-up-isolated-white-wall_141793-129646.jpg"
imageAlt="Support team helping with trading education questions"
mediaAnimation="blur-reveal"
faqsAnimation="blur-reveal"
faqs={[
{
"id": "faq-1", "title": "How long do I have access to the courses?", "content": "You get lifetime access to all course materials, videos, and content. Even when we add new lessons, you'll have access to them automatically. The only time access expires is if you violate our terms of service."
},
{
"id": "faq-2", "title": "Do you offer a money-back guarantee?", "content": "Yes! All plans include a 30-day money-back guarantee. If you're not satisfied with the courses for any reason, simply request a refund and we'll process it within 48 hours. No questions asked."
},
{
"id": "faq-3", "title": "Can I upgrade from one plan to another?", "content": "Absolutely. If you purchase the Foundations plan and want to upgrade to Professional or Elite, we'll credit your original purchase price toward the upgrade. You only pay the difference."
},
{
"id": "faq-4", "title": "Is this course suitable for beginners?", "content": "Yes! We have courses for every experience level. Start with the Foundations course if you're new to trading. Our curriculum builds progressively, so you can learn at your own pace."
},
{
"id": "faq-5", "title": "What support do I get during the course?", "content": "All students get community support via Discord. Professional and Elite members also get email support, and Elite members get weekly mentorship calls with instructors. You're never alone in your learning journey."
},
{
"id": "faq-6", "title": "Are there any hidden fees?", "content": "No hidden fees whatsoever. The price you see is the total price you pay. Some brokers or trading platforms may have their own fees, but those are separate from our course pricing."
}
]}
showCard={true}
animationType="smooth"
ariaLabel="FAQ - frequently asked questions about trading courses"
className="relative w-full py-16"
containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-12"
textBoxClassName="lg:col-span-1"
textBoxTitleClassName="text-3xl md:text-4xl font-bold text-foreground mb-4"
textBoxDescriptionClassName="text-lg text-foreground/70 mb-8"
mediaWrapperClassName="relative rounded-lg overflow-hidden lg:col-span-1"
mediaClassName="w-full h-auto object-cover"
faqsContainerClassName="space-y-4"
accordionClassName="border border-accent/20 rounded-lg overflow-hidden"
accordionTitleClassName="flex items-center justify-between w-full p-4 hover:bg-accent/5 cursor-pointer transition-colors"
accordionContentClassName="p-4 bg-card border-t border-accent/20 text-foreground/80"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Ready to Start?"
tagIcon={Sparkles}
tagAnimation="slide-up"
title="Join TradePro Academy Today"
description="Don't let another trading opportunity pass you by. Enroll now and start your journey to trading mastery. Limited-time offer: Get 20% off any plan with code TRADEPRO20."
buttons={[
{ "text": "Enroll Now", "href": "#pricing" },
{ "text": "Schedule a Call", "href": "mailto:hello@tradepro.com" }
]}
buttonAnimation="slide-up"
background={{ "variant": "gradient-bars" }}
useInvertedBackground={false}
ariaLabel="Contact section - enroll in trading courses"
className="relative w-full py-16"
containerClassName="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"
contentClassName="relative z-10 text-center"
textBoxClassName="mb-8"
titleClassName="text-3xl md:text-4xl font-bold text-foreground mb-4"
descriptionClassName="text-lg text-foreground/70 mb-8"
buttonContainerClassName="flex flex-wrap gap-4 justify-center"
buttonClassName="px-8 py-3 rounded-lg font-medium transition-all"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="TradePro Academy"
leftLink={{ "text": "Privacy Policy", "href": "#" }}
rightLink={{ "text": "Terms of Service", "href": "#" }}
ariaLabel="Site footer - TradePro Academy"
className="relative w-full"
wrapperClassName="py-12 border-t border-accent/20"
containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between"
logoClassName="text-xl font-bold text-foreground"
linkClassName="text-foreground/70 hover:text-foreground transition-colors"
/>
</div>
</ThemeProvider>
);
}

28
src/app/styles/base.css Normal file
View File

@@ -0,0 +1,28 @@
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-open-sans), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-inter), sans-serif;
}

176
src/app/styles/theme.css Normal file
View File

@@ -0,0 +1,176 @@
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}

228
src/app/styles/utilities.css Normal file
View File

@@ -0,0 +1,228 @@
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.inset-glow-border {
@apply relative;
}
.inset-glow-border::before {
content: "";
@apply absolute pointer-events-none inset-0 p-[1px];
border-radius: inherit;
background: linear-gradient(
0deg,
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
.mask-fade-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y-medium {
mask-image: linear-gradient(to bottom,
transparent 0%,
black 20%,
black 80%,
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 40s linear infinite;
}
@keyframes marquee-vertical-reverse {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
.animate-marquee-vertical-reverse {
animation: marquee-vertical-reverse 40s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}

217
src/app/styles/variables.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--secondary-cta: #ecebea;
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f5f5f5;
--card: #ffffff;
--foreground: #1c1c1c;
--primary-cta: #341f51;
--primary-cta-text: #f5f5f5;
--secondary-cta: #ffffff;
--secondary-cta-text: #1c1c1c;
--accent: #6139e6;
--background-accent: #b3a8e8;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}