bender/cf544aff-739c-4523-84cd-4c5c46abb5d3
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-05-26 04:52:23 +00:00
commit 5d6ce2ed59
648 changed files with 80220 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";

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

@@ -0,0 +1,70 @@
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: 'Famous Fried Chicken Dungun | Crispy & Juicy Fried Chicken',
description: 'Savor the best crispy and juicy fried chicken in Kuala Dungun, Terengganu. Famous for our traditional recipes and welcoming atmosphere. View our menu and order now!',
keywords: ["fried chicken, Kuala Dungun, Terengganu, chicken restaurant, best fried chicken, local food, Malaysian fried chicken, takeaway, menu, reviews"],
openGraph: {
"title": "Famous Fried Chicken Dungun | Crispy & Juicy Fried Chicken",
"description": "Savor the best crispy and juicy fried chicken in Kuala Dungun, Terengganu. Famous for our traditional recipes and welcoming atmosphere. View our menu and order now!",
"url": "https://www.famousfriedchickendungun.com",
"siteName": "Famous Fried Chicken Dungun",
"images": [
{
"url": "http://img.b2bpic.net/free-photo/top-view-fish-chips-paper-wrap-with-copy-space_23-2148784893.jpg",
"alt": "Famous Fried Chicken Dungun"
}
],
"type": "website"
},
twitter: {
"card": "summary_large_image",
"title": "Famous Fried Chicken Dungun | Crispy & Juicy Fried Chicken",
"description": "Savor the best crispy and juicy fried chicken in Kuala Dungun, Terengganu. Famous for our traditional recipes and welcoming atmosphere. View our menu and order now!",
"images": [
"http://img.b2bpic.net/free-photo/top-view-fish-chips-paper-wrap-with-copy-space_23-2148784893.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>
);
}

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

@@ -0,0 +1,391 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Facebook, Flame, Instagram, MapPin, Phone } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="grid"
cardStyle="gradient-radial"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "#home",
},
{
name: "Menu",
id: "#menu",
},
{
name: "About",
id: "#about",
},
{
name: "Reviews",
id: "#reviews",
},
{
name: "FAQ",
id: "#faq",
},
{
name: "Contact",
id: "#contact",
},
]}
logoSrc="http://img.b2bpic.net/free-vector/lineal-elements-thanksgiving-stickers_23-2147971637.jpg"
logoAlt="Famous Fried Chicken Dungun Logo"
brandName="Famous Fried Chicken Dungun"
button={{
text: "Order Now",
href: "#contact",
}}
/>
</div>
<div id="home" data-section="home">
<HeroCarouselLogo
logoText="Famous Fried Chicken Dungun"
description="Savor the crispy, juicy goodness of our signature fried chicken, a local favorite for generations."
buttons={[
{
text: "View Menu",
href: "#menu",
},
{
text: "Order Now",
href: "#contact",
},
]}
slides={[
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fish-chips-paper-wrap-with-copy-space_23-2148784893.jpg",
imageAlt: "Crispy fried chicken bucket",
videoAriaLabel: "Fried chicken preparation",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/tray-with-fried-chicken-celery_23-2147717045.jpg",
imageAlt: "Happy customers enjoying fried chicken",
videoAriaLabel: "Customer experience",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fresh-red-tomatoes-with-seasonings-cheese-bread-black_140725-104089.jpg",
imageAlt: "Fried chicken burger and fries combo",
videoAriaLabel: "Fried chicken meal options",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/delicious-esquites-with-spices_23-2149891161.jpg",
imageAlt: "Delicious side dishes like fries and coleslaw",
videoAriaLabel: "Variety of side dishes",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-preparing-turkey-dish_23-2147809616.jpg",
imageAlt: "Chef preparing fresh fried chicken",
videoAriaLabel: "Kitchen operations",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/thanksgiving-food-frame_23-2147709494.jpg",
imageAlt: "Exterior view of Famous Fried Chicken Dungun restaurant",
videoAriaLabel: "Restaurant exterior",
},
]}
autoplayDelay={4000}
showDimOverlay={false}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={true}
tag="Our Story"
title="A Taste of Tradition in Dungun"
description="For over two decades, Famous Fried Chicken Dungun has been serving the freshest, crispiest fried chicken, crafted with cherished family recipes passed down through generations. We pride ourselves on using quality ingredients and a passion for authentic Malaysian flavors."
subdescription="Our commitment to excellence has made us a beloved local spot, a place where friends and families gather to enjoy truly unforgettable meals and create lasting memories. Come experience the heritage of taste and heartwarming hospitality."
icon={Flame}
imageSrc="http://img.b2bpic.net/free-photo/top-view-chicken-chicken-with-herbs-lemon-garlic-sauce-cream-notebook_140725-72370.jpg"
imageAlt="Traditional recipe book with fried chicken"
mediaAnimation="opacity"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={false}
title="Crispy, Juicy, Unforgettable."
description="Discover why our fried chicken isn't just a meal, it's a local legend. Made with a secret blend of spices and cooked to golden perfection, every bite is a burst of flavor and texture."
tag="Our Specialties"
accordionItems={[
{
id: "crispy-skin",
title: "The Perfect Crispy Skin",
content: "Our chicken boasts an irresistible golden-brown skin, perfectly seasoned and fried to achieve that satisfying crunch with every bite. It's the hallmark of our famous recipe.",
},
{
id: "juicy-tenderness",
title: "Unmatched Juicy Tenderness",
content: "Beneath the crispy exterior lies incredibly tender and juicy meat, marinated to perfection. Each piece is a testament to our meticulous preparation, ensuring a succulent experience.",
},
{
id: "secret-spices",
title: "Our Secret Blend of Spices",
content: "What makes our chicken truly famous is our proprietary blend of spices. A harmonious mix of local herbs and savory notes that creates a unique, addictive flavor profile you won't find anywhere else.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/high-angle-fried-chicken-cutting-board-with-burger_23-2148699049.jpg"
imageAlt="Close-up of crispy fried chicken drumstick"
mediaAnimation="opacity"
mediaPosition="right"
/>
</div>
<div id="menu" data-section="menu">
<ProductCardOne
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
carouselMode="buttons"
products={[
{
id: "drumstick",
name: "Single Drumstick",
price: "RM 4.50",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-fried-chicken-cooked-meat-slices-dark-desk_140725-75636.jpg",
imageAlt: "Crispy fried drumstick",
},
{
id: "thigh",
name: "Single Thigh",
price: "RM 5.00",
imageSrc: "http://img.b2bpic.net/free-photo/chicken-crispy-legs-with-lettuce-lemon-dark-board_114579-50383.jpg",
imageAlt: "Crispy fried thigh",
},
{
id: "wing",
name: "Single Wing",
price: "RM 4.00",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fried-drumsticks_23-2148273055.jpg",
imageAlt: "Crispy fried wing",
},
{
id: "breast",
name: "Single Breast",
price: "RM 5.50",
imageSrc: "http://img.b2bpic.net/free-photo/fried-spicy-chicken-leg-white-plate-with-lemon_114579-19663.jpg",
imageAlt: "Crispy fried breast",
},
{
id: "bucket-5pc",
name: "5-Piece Chicken Bucket",
price: "RM 22.00",
imageSrc: "http://img.b2bpic.net/free-photo/beer-near-chicken-sauce_23-2147765507.jpg",
imageAlt: "5 pieces fried chicken bucket",
},
{
id: "bucket-9pc",
name: "9-Piece Chicken Bucket",
price: "RM 38.00",
imageSrc: "http://img.b2bpic.net/free-photo/chicken-drumsticks-leftover-food-waste_23-2148764837.jpg",
imageAlt: "9 pieces fried chicken bucket",
},
{
id: "fries",
name: "Crispy French Fries",
price: "RM 6.00",
imageSrc: "http://img.b2bpic.net/free-photo/steel-basket-french-fries-plain-grey-background_140725-1670.jpg",
imageAlt: "Bowl of crispy french fries",
},
{
id: "coleslaw",
name: "Creamy Coleslaw",
price: "RM 5.00",
imageSrc: "http://img.b2bpic.net/free-photo/sliced-fresh-vegetables-long-thin-pieced-salad-inside-plate-with-greens-cabbage-peppers-blue_140725-32413.jpg",
imageAlt: "Bowl of creamy coleslaw",
},
]}
title="Feast on Our Flavors"
description="Explore our extensive menu, featuring everything from our legendary fried chicken buckets to delicious individual pieces, satisfying sides, and refreshing beverages. Perfect for solo meals or family gatherings."
tag="Our Full Menu"
/>
</div>
<div id="reviews" data-section="reviews">
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Zulkifli Hassan",
date: "2 weeks ago",
title: "The Best Fried Chicken in Terengganu!",
quote: "Always fresh, always hot, and perfectly crispy. Famous Fried Chicken Dungun never disappoints. My family's favorite spot for a quick and delicious meal!",
tag: "Regular Customer",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-ethnic-man_23-2148203621.jpg",
avatarAlt: "Avatar of Zulkifli Hassan",
imageSrc: "http://img.b2bpic.net/free-vector/lineal-elements-thanksgiving-stickers_23-2147971637.jpg",
imageAlt: "portrait smiling asian man casual",
},
{
id: "2",
name: "Nurul Ain",
date: "1 month ago",
title: "Crispy Perfection, Every Single Time",
quote: "I'm always amazed by the consistency. The chicken is seasoned just right and perfectly juicy on the inside. A must-try if you're in Dungun!",
tag: "Food Enthusiast",
avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-curly-blonde-hair-smiling_23-2148911877.jpg",
avatarAlt: "Avatar of Nurul Ain",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fish-chips-paper-wrap-with-copy-space_23-2148784893.jpg",
imageAlt: "portrait smiling asian man casual",
},
{
id: "3",
name: "Ahmad Razali",
date: "3 months ago",
title: "Great Value, Delicious Taste",
quote: "For the price, you can't beat the quality. The portions are generous, and the chicken is simply divine. Highly recommended for students and families!",
tag: "Student",
avatarSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-cheerful-smiling-man-looking-happy-express-enthusiastic-optimistic-emotions-seei_1258-110321.jpg",
avatarAlt: "Avatar of Ahmad Razali",
imageSrc: "http://img.b2bpic.net/free-photo/tray-with-fried-chicken-celery_23-2147717045.jpg",
imageAlt: "portrait smiling asian man casual",
},
{
id: "4",
name: "Lim Swee Lian",
date: "5 months ago",
title: "Warm & Friendly Service",
quote: "Not only is the chicken fantastic, but the staff are always so welcoming. It feels like coming home. A truly pleasant dining experience every time.",
tag: "Local Resident",
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-wrinkled-fashionable-granny-wearing-glasses-sweater_273609-35367.jpg",
avatarAlt: "Avatar of Lim Swee Lian",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fresh-red-tomatoes-with-seasonings-cheese-bread-black_140725-104089.jpg",
imageAlt: "portrait smiling asian man casual",
},
{
id: "5",
name: "Siti Hawa",
date: "7 months ago",
title: "My Go-To for Crave-Worthy Chicken",
quote: "Whenever I crave fried chicken, this is my go-to place. The flavor is unique, and it satisfies every single time. Dungun's best!",
tag: "Happy Customer",
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-woman-wearing-glasses_23-2148262832.jpg",
avatarAlt: "Avatar of Siti Hawa",
imageSrc: "http://img.b2bpic.net/free-photo/delicious-esquites-with-spices_23-2149891161.jpg",
imageAlt: "portrait smiling asian man casual",
},
]}
title="Loved by the Community"
description="Don't just take our word for it! Read what our loyal customers in Dungun and beyond have to say about their unforgettable Famous Fried Chicken experience. Rated 4.2 stars by 325 people!"
tag="What Our Guests Say"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={true}
faqs={[
{
id: "hours",
title: "What are your operating hours?",
content: "We are open daily from 10:00 AM to 10:00 PM. Please check our Google Business profile for any holiday hour changes.",
},
{
id: "delivery",
title: "Do you offer delivery services?",
content: "Yes, we partner with local delivery services. You can find us on popular food delivery apps in the Kuala Dungun area, or call us directly for takeaway.",
},
{
id: "payment",
title: "What payment methods do you accept?",
content: "We accept cash, major credit/debit cards, and mobile payment options. Feel free to inquire with our staff for more details.",
},
{
id: "catering",
title: "Do you cater for events?",
content: "Yes, we offer catering services for various events, big or small. Please contact us directly at 017-903 3234 to discuss your event needs and custom orders.",
},
]}
sideTitle="Have Questions?"
sideDescription="Find quick answers to the most common inquiries about our restaurant, menu, and services. We're here to make your experience as smooth as our chicken batter!"
faqsAnimation="slide-up"
textPosition="left"
showCard={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
tag="Get in Touch"
title="Visit Us or Order Now"
description="Located conveniently in Kuala Dungun, Terengganu, Famous Fried Chicken is always ready to serve you. Call us for takeaways or subscribe for exclusive offers!"
imageSrc="http://img.b2bpic.net/free-photo/coffee-pins-map_23-2147635444.jpg"
imageAlt="Map showing Famous Fried Chicken Dungun location"
mediaAnimation="opacity"
mediaPosition="left"
inputPlaceholder="Enter your email for updates"
buttonText="Subscribe"
termsText="By subscribing, you agree to receive promotions and updates from Famous Fried Chicken Dungun."
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoSrc="http://img.b2bpic.net/free-vector/lineal-elements-thanksgiving-stickers_23-2147971637.jpg"
logoAlt="Famous Fried Chicken Dungun Logo"
logoText="Famous Fried Chicken Dungun"
copyrightText="© 2024 Famous Fried Chicken Dungun. All rights reserved."
socialLinks={[
{
icon: Facebook,
href: "#",
ariaLabel: "Facebook",
},
{
icon: Instagram,
href: "#",
ariaLabel: "Instagram",
},
{
icon: MapPin,
href: "https://www.google.com/maps/search/Famous+Fried+Chicken+Dungun",
ariaLabel: "Google Maps",
},
{
icon: Phone,
href: "tel:+60179033234",
ariaLabel: "Call Us",
},
]}
/>
</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-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: #120a00e6;
--primary-cta: #E34400;
--primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta-text: #120a00e6;
--accent: #e2e2e2;
--background-accent: #E34400;
/* 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;
}
}