bender/4012fa3d-9812-4ffb-abfa-ea4df1670f32
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-06-12 19:56:06 +00:00
commit 46a296263f
648 changed files with 80266 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/app/error.tsx Normal file
View File

@@ -0,0 +1,74 @@
"use client";
import { useEffect } from "react";
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error("[Error Boundary]", error);
// Notify parent frame (Webild editor) about the runtime error
try {
window.parent.postMessage(
{ type: "webild-runtime-error", message: error.message },
"*",
);
} catch {}
}, [error]);
return (
<div
style={{
minHeight: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontFamily: "system-ui, -apple-system, sans-serif",
background: "#fafafa",
padding: "2rem",
}}
>
<div style={{ textAlign: "center", maxWidth: 420 }}>
<h2
style={{
fontSize: "1.25rem",
fontWeight: 600,
color: "#111",
marginBottom: "0.5rem",
}}
>
Something went wrong
</h2>
<p
style={{
color: "#666",
fontSize: "0.875rem",
lineHeight: 1.5,
marginBottom: "1.25rem",
}}
>
An error occurred while rendering this page.
</p>
<button
onClick={reset}
style={{
padding: "0.5rem 1.25rem",
fontSize: "0.8125rem",
fontWeight: 500,
color: "#fff",
background: "#111",
border: "none",
borderRadius: "0.375rem",
cursor: "pointer",
}}
>
Try again
</button>
</div>
</div>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

76
src/app/global-error.tsx Normal file
View File

@@ -0,0 +1,76 @@
"use client";
import { useEffect } from "react";
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error("[Global Error Boundary]", error);
try {
window.parent.postMessage(
{ type: "webild-runtime-error", message: error.message },
"*",
);
} catch {}
}, [error]);
return (
<html lang="en">
<body
style={{
margin: 0,
minHeight: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontFamily: "system-ui, -apple-system, sans-serif",
background: "#fafafa",
padding: "2rem",
}}
>
<div style={{ textAlign: "center", maxWidth: 420 }}>
<h2
style={{
fontSize: "1.25rem",
fontWeight: 600,
color: "#111",
marginBottom: "0.5rem",
}}
>
Something went wrong
</h2>
<p
style={{
color: "#666",
fontSize: "0.875rem",
lineHeight: 1.5,
marginBottom: "1.25rem",
}}
>
An error occurred while rendering this page.
</p>
<button
onClick={reset}
style={{
padding: "0.5rem 1.25rem",
fontSize: "0.8125rem",
fontWeight: 500,
color: "#fff",
background: "#111",
border: "none",
borderRadius: "0.375rem",
cursor: "pointer",
}}
>
Try again
</button>
</div>
</body>
</html>
);
}

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

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

@@ -0,0 +1,67 @@
import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css";
import "@/lib/gsap-setup";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script";
export const metadata: Metadata = {
title: 'IdeaFlow AI | Validate Your Ideas with AI-Powered Precision',
description: 'Transform ideas into market-ready ventures. IdeaFlow AI offers AI-driven insights, market analysis, and risk mitigation for entrepreneurs and product teams.',
openGraph: {
"title": "IdeaFlow AI | Validate Your Ideas with AI-Powered Precision",
"description": "Transform ideas into market-ready ventures. IdeaFlow AI offers AI-driven insights, market analysis, and risk mitigation for entrepreneurs and product teams.",
"url": "https://www.ideaflowai.com",
"siteName": "IdeaFlow AI",
"images": [
{
"url": "http://img.b2bpic.net/free-photo/3d-render-abstract-with-flowing-lines-particles_1048-13576.jpg",
"alt": "AI-powered idea validation dashboard"
}
],
"type": "website"
},
twitter: {
"card": "summary_large_image",
"title": "IdeaFlow AI | Validate Your Ideas with AI-Powered Precision",
"description": "Transform ideas into market-ready ventures. IdeaFlow AI offers AI-driven insights, market analysis, and risk mitigation for entrepreneurs and product teams.",
"images": [
"http://img.b2bpic.net/free-photo/3d-render-abstract-with-flowing-lines-particles_1048-13576.jpg"
]
},
robots: {
"index": true,
"follow": true
},
};
const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${inter.variable} antialiased`}>
<Tag />
{children}
<script
dangerouslySetInnerHTML={{
__html: `${getVisualEditScript()}`
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

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

@@ -0,0 +1,440 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Shield, Sparkles, Zap } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="aurora"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "#home",
},
{
name: "About",
id: "#about",
},
{
name: "Features",
id: "#features",
},
{
name: "Metrics",
id: "#metrics",
},
{
name: "Pricing",
id: "#pricing",
},
{
name: "Testimonials",
id: "#testimonials",
},
{
name: "FAQ",
id: "#faq",
},
{
name: "Contact",
id: "#contact",
},
]}
button={{
text: "Get Started",
href: "#contact",
}}
brandName="IdeaFlow AI"
/>
</div>
<div id="home" data-section="home">
<HeroOverlay
title="Validate Your Ideas with AI-Powered Precision"
description="Transform your raw concepts into market-ready ventures. IdeaFlow AI provides deep insights, trend analysis, and competitive intelligence to ensure your next big idea thrives."
buttons={[
{
text: "Start Free Trial",
href: "#contact",
},
{
text: "Learn More",
href: "#about",
},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg",
alt: "Sarah Johnson",
},
{
src: "http://img.b2bpic.net/free-photo/crazy-businessman-worried-expression_1194-3805.jpg",
alt: "Michael Chen",
},
{
src: "http://img.b2bpic.net/free-photo/side-view-female-with-tablet_23-2148415952.jpg",
alt: "Emily Rodriguez",
},
{
src: "http://img.b2bpic.net/free-photo/financial-department-team-leader-researching-marketing-ideas-while-analyzing-company-expenses-report-startup-project-manager-developing-budget-growth-solutions-while-brainstorming-promoting-strategy_482257-38904.jpg",
alt: "David Kim",
},
{
src: "asset://avatar-5",
alt: "Jessica Lee",
},
]}
avatarText="Join 1000+ innovators"
imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-with-flowing-lines-particles_1048-13576.jpg"
imageAlt="AI-powered idea validation dashboard"
showBlur={true}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="default"
useInvertedBackground={false}
title="Unlock the True Potential of Your Innovations"
description="IdeaFlow AI empowers innovators, entrepreneurs, and product teams to make data-driven decisions. Our platform leverages advanced AI to analyze market viability, identify key opportunities, and mitigate risks before development begins."
bulletPoints={[
{
title: "AI-Driven Market Insights",
description: "Leverage machine learning to uncover deep market trends and consumer demands automatically.",
},
{
title: "Comprehensive Viability Analysis",
description: "Get a holistic view of your idea's potential, assessing every angle from competition to scalability.",
},
{
title: "Proactive Risk Mitigation",
description: "Identify potential pitfalls early and strategize solutions to safeguard your investment.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg"
imageAlt="SaaS dashboard showing market analysis results"
mediaAnimation="opacity"
/>
</div>
<div id="features" data-section="features">
<FeatureCardSixteen
textboxLayout="default"
useInvertedBackground={false}
negativeCard={{
items: [
"Manual Research",
"Subjective Feedback",
"Slow Iteration",
"Missed Trends",
],
}}
positiveCard={{
items: [
"AI-Powered Insights",
"Objective Validation",
"Rapid Prototyping",
"Early Trend Detection",
],
}}
title="Visualize Your Idea's Future"
description="Gain unparalleled clarity with our intuitive data visualization dashboard. See your idea's potential through interactive radar charts, score gauges, and detailed comparative analysis."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "95%",
title: "Market Fit Score",
items: [
"Precision audience matching",
"Trend alignment analysis",
],
},
{
id: "m2",
value: "100K+",
title: "Demand Index",
items: [
"Active interest indicators",
"Search volume insights",
],
},
{
id: "m3",
value: "AI-Driven",
title: "Innovation Rating",
items: [
"Novelty assessment",
"Competitive landscape analysis",
],
},
]}
title="Quantify Success Before You Build"
description="Our AI engine processes millions of data points to deliver actionable metrics. Understand your idea's market fit, audience demand, and competitive edge with precision."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardOne
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "free",
badge: "Starter",
badgeIcon: Sparkles,
price: "Free",
subtitle: "Explore basic idea validation",
features: [
"1 Idea Analysis",
"Basic Market Trends",
"Limited History",
],
},
{
id: "pro",
badge: "Pro",
badgeIcon: Zap,
price: "$49/month",
subtitle: "Deep dive for serious entrepreneurs",
features: [
"10 Idea Analyses/month",
"Advanced Market Insights",
"Full History Access",
"Comparison Tool",
],
},
{
id: "enterprise",
badge: "Enterprise",
badgeIcon: Shield,
price: "Custom",
subtitle: "Tailored for large teams & agencies",
features: [
"Unlimited Analyses",
"Dedicated Support",
"API Access",
"Team Collaboration",
],
},
]}
title="Flexible Plans for Every Innovator"
description="Choose the IdeaFlow AI plan that scales with your ambition. From aspiring entrepreneurs to enterprise teams, we have a solution for you."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah Johnson",
handle: "@sarahj",
testimonial: "IdeaFlow AI has been a game-changer for our product development. The insights are incredibly accurate!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84733.jpg",
imageAlt: "Sarah Johnson",
},
{
id: "t2",
name: "Michael Chen",
handle: "@mikec",
testimonial: "Before IdeaFlow, market research was a guessing game. Now, we're making data-driven decisions with confidence.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-with-bruises_1098-1086.jpg",
imageAlt: "Michael Chen",
},
"t3",
{
id: "t3",
name: "Emily Rodriguez",
handle: "@emilyr",
testimonial: "The idea comparison tool alone is worth it! It helped us pivot from a good idea to a truly great one.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-clipboard-smiling-camera_482257-121165.jpg",
imageAlt: "Emily Rodriguez",
},
{
id: "t4",
name: "David Kim",
handle: "@davidk",
testimonial: "Remarkable platform! The AI identifies potential risks we would have completely overlooked otherwise.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/mature-police-officer-workplace_1098-14754.jpg",
imageAlt: "David Kim",
},
{
id: "t5",
name: "Jessica Lee",
handle: "@jessical",
testimonial: "Streamlined our entire validation process. IdeaFlow AI is an essential tool for any serious innovator.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket_23-2149020794.jpg",
imageAlt: "Jessica Lee",
},
]}
showRating={true}
title="Innovators Trust IdeaFlow AI"
description="Hear from entrepreneurs and product leaders who transformed their vision into reality with our platform."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x5j3t2",
"http://img.b2bpic.net/free-photo/chrome-spheres-attached-green-sphere_1156-677.jpg",
"http://img.b2bpic.net/free-photo/innovation-development-rocket-graphic-concept_53876-123767.jpg",
"http://img.b2bpic.net/free-vector/gradient-electronics-logo-collection_23-2148965878.jpg",
"http://img.b2bpic.net/free-photo/gear-front-side-white-background_187299-40157.jpg",
"http://img.b2bpic.net/free-vector/20-economy-solid-glyph-icon-presentation_1142-24002.jpg",
"http://img.b2bpic.net/free-photo/close-up-colorful-translucent-shapes_23-2148830214.jpg",
]}
title="Trusted by Leading Innovators"
description="Our platform is the secret weapon for forward-thinking companies worldwide."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "What is IdeaFlow AI?",
content: "IdeaFlow AI is an advanced platform that uses artificial intelligence to validate business and product ideas. It analyzes market trends, competitive landscapes, and audience demand to provide actionable insights, helping you make data-driven decisions before investment.",
},
{
id: "q2",
title: "How does AI validation work?",
content: "Our AI engine processes vast amounts of public data, including market reports, social media trends, patent databases, and customer reviews. It then generates comprehensive reports, scores your idea against key metrics, and identifies potential opportunities and risks.",
},
{
id: "q3",
title: "Is my data secure and private?",
content: "Absolutely. We employ industry-standard encryption and robust security protocols to protect your ideas and data. All information submitted is kept confidential and used solely for analysis purposes within your account.",
},
]}
sideTitle="Your Questions, Answered"
sideDescription="Browse our frequently asked questions or contact support for more assistance regarding IdeaFlow AI."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "animated-grid",
}}
tag="Ready to Innovate?"
title="Get Started with IdeaFlow AI"
description="Join the future of idea validation. Sign up for early access or connect with our sales team."
inputPlaceholder="Your email address"
buttonText="Sign Up for Early Access"
termsText="By clicking Sign Up, you agree to our Terms and Privacy Policy."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="IdeaFlow AI"
columns={[
{
title: "Product",
items: [
{
label: "Features",
href: "#features",
},
{
label: "Pricing",
href: "#pricing",
},
{
label: "How it Works",
href: "#about",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Testimonials",
href: "#testimonials",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Resources",
items: [
{
label: "FAQ",
href: "#faq",
},
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
copyrightText="© 2024 IdeaFlow AI. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

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

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

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

@@ -0,0 +1,246 @@
@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 */
.animate-pulsate {
animation: pulsate 1.5s infinite;
}
@keyframes pulsate {
0% {
box-shadow: 0 0 0 0 var(--accent);
transform: scale(0.9);
}
50% {
transform: scale(1);
}
100% {
box-shadow: 0 0 20px 10px transparent;
transform: scale(0.9);
}
}
.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: #f5fffae6;
--primary-cta: #80da9b;
--primary-cta-text: #0a0a0a;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #f5fffae6;
--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;
}
}