bender/e6c008bd-e9e8-4ee4-a8a2-919ff344885a
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-06 06:14:48 +00:00
commit fac6d169fb
648 changed files with 80026 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";

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

@@ -0,0 +1,69 @@
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";
import { Inter_Tight } from "next/font/google";
export const metadata: Metadata = {
title: 'Joe Britto Educational and Social Trust | Children\'s Care & Community Development',
description: 'Providing shelter, care, protection, education, and opportunities to orphaned, abandoned, and vulnerable children in Madurai, Tamil Nadu. Join us in transforming lives and uplifting communities.',
keywords: ["nonprofit, charity, children's care, education, social trust, Madurai, Tamil Nadu, India, community development, volunteer, donate"],
openGraph: {
"title": "Joe Britto Educational and Social Trust | Nurturing Futures, Building Hope",
"description": "Empowering vulnerable children and strengthening communities in Madurai, Tamil Nadu through education, care, and social upliftment programs.",
"url": "https://www.joebrittoedu.org",
"siteName": "Joe Britto Educational and Social Trust",
"images": [
{
"url": "http://img.b2bpic.net/free-photo/portrait-female-pediatrician-work_23-2151686767.jpg",
"alt": "Children playing happily with volunteers"
}
],
"type": "website"
},
twitter: {
"card": "summary_large_image",
"title": "Joe Britto Educational and Social Trust | Nurturing Futures, Building Hope",
"description": "Empowering vulnerable children and strengthening communities in Madurai, Tamil Nadu through education, care, and social upliftment programs.",
"images": [
"http://img.b2bpic.net/free-photo/portrait-female-pediatrician-work_23-2151686767.jpg"
]
},
robots: {
"index": true,
"follow": true
},
};
const interTight = Inter_Tight({
variable: "--font-inter-tight", subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${interTight.variable} antialiased`}>
<Tag />
{children}
<script
dangerouslySetInnerHTML={{
__html: `${getVisualEditScript()}`
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

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

@@ -0,0 +1,198 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import TextAbout from '@/components/sections/about/TextAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Shield, Award, Users, BookOpen, HeartHandshake, CalendarDays, Sparkles, MessageCircle, Camera } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="large"
background="noiseDiagonalGradient"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EkUI8lYHyF4b0Yv82iq0kJB7yi/uploaded-1780726394974-30o5uhm3.png"
logoAlt="Joe Britto Educational and Social Trust Logo"
brandName="Joe Britto Educational and Social Trust"
navItems={[
{ name: "Home", id: "#home" },
{ name: "About Us", id: "#about" },
{ name: "Impact", id: "#impact" },
{ name: "Programs", id: "#programs" },
{ name: "Testimonials", id: "#testimonials" },
{ name: "Gallery", id: "#gallery" },
{ name: "Get Involved", id: "#contact" }
]}
button={{
text: "Donate Now", href: "#contact"
}}
bottomLeftText="Madurai, Tamil Nadu, India"
bottomRightText="joe.edl.trust@gmail.com"
/>
</div>
<div id="home" data-section="home">
<HeroCentered
title="Nurturing Futures, Building Hope for Every Child"
description="At Joe Britto Educational and Social Trust, we provide shelter, care, protection, education, and opportunities to orphaned, abandoned, and vulnerable children. Join us in promoting community development and social upliftment in Madurai, Tamil Nadu."
background={{ variant: "noiseDiagonalGradient" }}
avatars={[
{ src: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-63764.jpg", alt: "Child portrait 1" },
{ src: "http://img.b2bpic.net/free-photo/little-girl-looking-front-blue-blouse-looking-happy_176474-32465.jpg", alt: "Child portrait 2" },
{ src: "http://img.b2bpic.net/free-photo/smiling-teenager-holding-book_23-2147845863.jpg", alt: "Child portrait 3" },
{ src: "http://img.b2bpic.net/free-photo/girl-with-crayon-drawing-lesson-classroom_1150-3866.jpg", alt: "Child portrait 4" },
{ src: "http://img.b2bpic.net/free-photo/satisfied-cute-afro-woman-has-motor-activity-holds-skateboard-feels-relaxed-delighted_273609-29814.jpg", alt: "Child portrait 5" }
]}
avatarText="Over 150+ Children Supported Annually"
buttons={[
{ text: "Donate Now", href: "#contact" },
{ text: "Volunteer With Us", href: "#contact" }
]}
buttonAnimation="opacity"
ariaLabel="Hero section"
showMarqueeCard={true}
/>
</div>
<div id="about" data-section="about">
<TextAbout
tag="Our Mission"
tagIcon={Shield}
title="Empowering Vulnerable Children and Strengthening Communities"
description="The Joe Britto Educational and Social Trust is dedicated to transforming lives in Madurai, Tamil Nadu, India. We strive to create a safe, nurturing environment where orphaned, abandoned, and vulnerable children can thrive. Our comprehensive approach includes educational support, skill development, and community welfare initiatives, fostering a brighter future for those in need."
useInvertedBackground={true}
tagAnimation="reveal-blur"
/>
</div>
<div id="impact" data-section="impact">
<MetricCardThree
tag="Our Achievements"
tagIcon={Award}
title="Impact That Transforms Lives"
description="See the measurable difference your support makes. Every contribution helps us expand our reach and deepen our impact."
metrics={[
{ id: "m1", icon: Users, title: "Children Supported", value: "500+" },
{ id: "m2", icon: BookOpen, title: "Programs Conducted", value: "50+" },
{ id: "m3", icon: HeartHandshake, title: "Dedicated Volunteers", value: "100+" },
{ id: "m4", icon: CalendarDays, title: "Years of Service", value: "15+" }
]}
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
tagAnimation="reveal-blur"
/>
</div>
<div id="programs" data-section="programs">
<ProductCardThree
tag="What We Do"
tagIcon={Sparkles}
title="Comprehensive Programs for Holistic Development"
description="Our initiatives are designed to address the multifaceted needs of children and the community, ensuring sustainable growth and empowerment."
products={[
{ id: "p1", name: "Educational Support Programs", price: "Impactful", imageSrc: "http://img.b2bpic.net/free-photo/little-girl-reading-green-book_1098-1029.jpg", imageAlt: "Children studying together" },
{ id: "p2", name: "Health and Wellness Initiatives", price: "Vital", imageSrc: "http://img.b2bpic.net/free-photo/serious-people-cooking-kitchen_1262-20395.jpg", imageAlt: "Children playing outdoors" },
{ id: "p3", name: "Community Development Activities", price: "Sustainable", imageSrc: "http://img.b2bpic.net/free-photo/male-environmentalist-collecting-trash-with-long-claw-tool-bag_482257-91013.jpg", imageAlt: "Community gathering" },
{ id: "p4", name: "Workshops and Training Sessions", price: "Empowering", imageSrc: "http://img.b2bpic.net/free-photo/confident-male-speaker-holding-seminar_74855-2710.jpg", imageAlt: "Children in a workshop" },
{ id: "p5", name: "Vocational Skill Development", price: "Future-focused", imageSrc: "http://img.b2bpic.net/free-photo/close-up-experienced-carpenter-his-younger-employee_329181-15687.jpg", imageAlt: "Youth learning vocational skills" },
{ id: "p6", name: "Youth Empowerment Programs", price: "Transformative", imageSrc: "http://img.b2bpic.net/free-photo/young-activists-taking-action_23-2149502777.jpg", imageAlt: "Youth in a leadership program" }
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
tagAnimation="reveal-blur"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
tag="Hear From Our Community"
tagIcon={MessageCircle}
title="Inspiring Stories of Transformation"
description="Our greatest reward is the positive impact we make, echoed by those who experience our care and support."
testimonials={[
{ id: "t1", name: "Sarah J.", handle: "@sarah_j", testimonial: "The trust makes the children feel homely. It's truly a family nature environment.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-smiling-middle-aged-woman_169016-26993.jpg", imageAlt: "Sarah J. testimonial" },
{ id: "t2", name: "Michael C.", handle: "@michael_c", testimonial: "Children mostly orphans are kept in good condition. The dedication here is remarkable.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/family-bonding-nature-sunset-silhouette-embrace-generated-by-ai_188544-33116.jpg", imageAlt: "Michael C. testimonial" },
{ id: "t3", name: "Emily R.", handle: "@emily_r", testimonial: "The environment fosters a true family nature. Everyone helps each other here.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891377.jpg", imageAlt: "Emily R. testimonial" },
{ id: "t4", name: "David K.", handle: "@david_k", testimonial: "It's inspiring to see how they help each other, building a strong and supportive community.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-girl-learning-math-school_23-2150470831.jpg", imageAlt: "David K. testimonial" },
{ id: "t5", name: "Priya S.", handle: "@priya_s", testimonial: "A beacon of hope for vulnerable children, providing essential care and opportunities for a brighter future.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/friends-drinking-tailgate-party_53876-125378.jpg", imageAlt: "Priya S. testimonial" }
]}
showRating={true}
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
tagAnimation="reveal-blur"
/>
</div>
<div id="gallery" data-section="gallery">
<FeatureCardNine
tag="Our Moments"
tagIcon={Camera}
title="Glimpses of Joy, Learning, and Community"
description="A visual journey through the heartwarming moments and impactful activities that define the Joe Britto Educational and Social Trust."
features={[
{ title: "Learning & Discovery", description: "Children engaged in classroom activities, eager to learn and explore new horizons.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/children-spending-time-together-comfort-their-home_23-2149864688.jpg", imageAlt: "Children learning in a classroom" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/adorable-kid-playing-with-shadows_23-2151336026.jpg", imageAlt: "Children playing outdoors" } },
{ title: "Community & Care", description: "Heartwarming moments from our community outreach programs and events.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/young-volunteers-red-tshirts-work-distribution-point_259150-57360.jpg", imageAlt: "Volunteers helping in a community event" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-palette-painting-brush_23-2148750516.jpg", imageAlt: "Children participating in art activities" } },
{ title: "Skill & Growth", description: "Youth participating in vocational training and empowerment workshops.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/women-correcting-grammar-mistakes-medium-shot_23-2150171074.jpg", imageAlt: "Youth in a vocational workshop" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/group-modern-young-people_53876-120112.jpg", imageAlt: "Young adults in a group discussion" } }
]}
showStepNumbers={false}
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={true}
tagAnimation="reveal-blur"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Connect With Us"
title="Make a Difference: Volunteer, Donate, Partner or Get in Touch"
description="Your support empowers us to continue our vital work. Whether you wish to volunteer your time, make a donation, or explore partnership opportunities, we welcome your involvement. Contact us directly for more information on how you can contribute."
imageSrc="http://img.b2bpic.net/free-photo/mom-helping-her-child-styling-afro-hair_23-2149625719.jpg"
imageAlt="Volunteers helping children"
mediaAnimation="opacity"
mediaPosition="right"
inputPlaceholder="Your Email Address"
buttonText="Send Message"
termsText="By sending a message, you agree to our Privacy Policy and Terms of Service."
background={{ variant: "plain" }}
useInvertedBackground={false}
tagAnimation="reveal-blur"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EkUI8lYHyF4b0Yv82iq0kJB7yi/uploaded-1780726394974-30o5uhm3.png"
logoAlt="Joe Britto Educational and Social Trust Logo"
logoText="Joe Britto Educational and Social Trust"
columns={[
{ title: "Quick Links", items: [{ label: "Home", href: "#home" }, { label: "About Us", href: "#about" }, { label: "Our Programs", href: "#programs" }, { label: "Gallery", href: "#gallery" }] },
{ title: "Get Involved", items: [{ label: "Donate", href: "#contact" }, { label: "Volunteer", href: "#contact" }, { label: "Partner With Us", href: "#contact" }] },
{ title: "Contact Us", items: [
{ label: "2/185, Kothanar Street, Narasingam Road, Kadachanendhal, Kathakinaru Post, Madurai, Tamil Nadu – 625107", href: "https://www.google.com/maps/place/Kadachanendhal,+Madurai,+Tamil+Nadu+625107" },
{ label: "Email: joe.edl.trust@gmail.com", href: "mailto:joe.edl.trust@gmail.com" },
{ label: "Phone: +91 80568 63264", href: "tel:+918056863264" },
{ label: "Phone: +91 97890 28701", href: "tel:+919789028701" }
]
}
]}
copyrightText="© 2024 Joe Britto Educational and Social Trust. All rights reserved."
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,28 @@
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-inter-tight), 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-tight), 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: #FFFFFF;
--card: #F9F9F9;
--foreground: #19438F;
--primary-cta: #19438F;
--primary-cta-text: #FFFFFF;
--secondary-cta: #E9B700;
--secondary-cta-text: #19438F;
--accent: #E9B700;
--background-accent: #19438F;
/* 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;
}
}