bender/c0cda751-540b-4778-8e86-e400aad11fef
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-03-08 16:17:28 +00:00
commit 9ac46cfccb
627 changed files with 85362 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

5
src/app/globals.css Normal file
View File

@@ -0,0 +1,5 @@
@import "tailwindcss";
@import "./styles/variables.css";
@import "./styles/theme.css";
@import "./styles/utilities.css";
@import "./styles/base.css";

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,306 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, Facebook, Globe, HelpCircle, Home, Instagram, Linkedin, Mail, Phone, Quote, Sparkles, Star, TrendingUp, Twitter, Users } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="mediumSizeLargeTitles"
background="grid"
cardStyle="gradient-bordered"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="LuxeProperty"
navItems={[
{ name: "Properties", id: "properties" },
{ name: "About Us", id: "about" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
{ name: "Team", id: "team" }
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="Find Your Dream Property Today"
description="Discover exceptional residential and commercial properties in prime locations. Our expert team is dedicated to finding the perfect home or investment for you."
tag="Luxury Real Estate"
tagIcon={Home}
tagAnimation="slide-up"
background={{ variant: "gradient-bars" }}
kpis={[
{ value: "500+", label: "Premium Properties" },
{ value: "98%", label: "Client Satisfaction" },
{ value: "15yrs", label: "Industry Experience" }
]}
enableKpiAnimation={true}
buttons={[
{ text: "Browse Properties", href: "#properties" },
{ text: "Schedule Tour", href: "#contact" }
]}
buttonAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/building_1127-3498.jpg"
imageAlt="Luxury property exterior"
mediaAnimation="slide-up"
imagePosition="right"
className="w-full"
/>
</div>
<div id="properties" data-section="properties">
<ProductCardTwo
title="Featured Properties"
description="Explore our handpicked selection of premium residential and commercial properties available now"
tag="Available Now"
tagIcon={Sparkles}
tagAnimation="slide-up"
products={[
{
id: "1", brand: "Residential", name: "Modern Downtown Penthouse", price: "$2,500,000", rating: 5,
reviewCount: "48", imageSrc: "http://img.b2bpic.net/free-photo/living-room-with-modern-beautiful-decoration_181624-44716.jpg", imageAlt: "Modern penthouse"
},
{
id: "2", brand: "Commercial", name: "Prime Office Tower Space", price: "$3,200,000", rating: 5,
reviewCount: "35", imageSrc: "http://img.b2bpic.net/free-photo/girl-showing-book-friends_23-2147678971.jpg", imageAlt: "Commercial office space"
},
{
id: "3", brand: "Luxury", name: "Beachfront Villa Resort", price: "$4,800,000", rating: 5,
reviewCount: "52", imageSrc: "http://img.b2bpic.net/free-photo/sea-through-two-white-buildings_181624-3722.jpg", imageAlt: "Beachfront villa"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
buttons={[
{ text: "View All Properties", href: "#properties" }
]}
buttonAnimation="blur-reveal"
className="w-full"
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentySeven
title="Why Choose LuxeProperty"
description="Experience unmatched service and expertise in the real estate market"
tag="Our Services"
tagIcon={Award}
tagAnimation="slide-up"
features={[
{
id: "1", title: "Expert Market Knowledge", description: "Our agents have deep knowledge of local markets, neighborhood trends, and investment opportunities to guide you to the best decision.", imageSrc: "http://img.b2bpic.net/free-photo/living-room-with-modern-beautiful-decoration_181624-44716.jpg", imageAlt: "Market expertise"
},
{
id: "2", title: "Personalized Service", description: "We tailor our approach to your unique needs and preferences, ensuring a seamless and satisfying property search experience.", imageSrc: "http://img.b2bpic.net/free-photo/girl-showing-book-friends_23-2147678971.jpg", imageAlt: "Personalized service"
},
{
id: "3", title: "Luxury Listings", description: "Access exclusive high-end properties and off-market deals available only to our premium clients and partners.", imageSrc: "http://img.b2bpic.net/free-photo/sea-through-two-white-buildings_181624-3722.jpg", imageAlt: "Luxury listings"
},
{
id: "4", title: "Professional Support", description: "From negotiations to closing, our legal and financial experts support you through every step of your real estate transaction.", imageSrc: "http://img.b2bpic.net/free-photo/living-room-with-modern-beautiful-decoration_181624-44716.jpg", imageAlt: "Professional support"
}
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{ text: "Learn More", href: "#services" }
]}
buttonAnimation="blur-reveal"
className="w-full"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
title="Our Market Impact"
description="Trusted by thousands of clients for successful property transactions and investments"
tag="Proven Results"
tagIcon={TrendingUp}
tagAnimation="slide-up"
metrics={[
{
id: "1", value: "2500", title: "Transactions", description: "Successful property sales and purchases completed", icon: Home
},
{
id: "2", value: "850", title: "Happy Clients", description: "Satisfied customers who found their perfect property", icon: Users
},
{
id: "3", value: "15", title: "Awards", description: "Industry recognition for excellence in real estate", icon: Award
},
{
id: "4", value: "98", title: "Percent Satisfied", description: "Client satisfaction rate with our services", icon: Star
}
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
className="w-full"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="Client Success Stories"
description="Hear from our satisfied clients about their experience with LuxeProperty"
tag="Testimonials"
tagIcon={Quote}
tagAnimation="slide-up"
testimonials={[
{
id: "1", name: "Sarah Johnson, Investor", date: "Date: 15 January 2025", title: "Found the perfect investment property!", quote: "The team at LuxeProperty exceeded all my expectations. They understood my investment goals and found the ideal property that has already appreciated significantly. Highly professional and responsive.", tag: "Premium Client", avatarSrc: "http://img.b2bpic.net/free-photo/business-professional_1098-14759.jpg", avatarAlt: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/living-room-with-modern-beautiful-decoration_181624-44716.jpg", imageAlt: "Property showcase"
},
{
id: "2", name: "Michael Chen, CEO", date: "Date: 22 December 2024", title: "Outstanding service from start to finish", quote: "Exceptional support throughout the entire process. The agents knew exactly what I was looking for and negotiated an excellent deal. I've already recommended them to my colleagues.", tag: "Corporate", avatarSrc: "http://img.b2bpic.net/free-photo/smiley-businesswoman-using-sign-language-outdoors-work_23-2148740317.jpg", avatarAlt: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/girl-showing-book-friends_23-2147678971.jpg", imageAlt: "Corporate property"
},
{
id: "3", name: "Emily Rodriguez, Homeowner", date: "Date: 10 December 2024", title: "Made our dream home a reality", quote: "We were overwhelmed by the search process, but LuxeProperty made everything smooth and enjoyable. They found us the perfect family home in just three weeks.", tag: "Residential", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-worker-holding-clipboard_1098-4072.jpg", avatarAlt: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/sea-through-two-white-buildings_181624-3722.jpg", imageAlt: "Dream home"
},
{
id: "4", name: "David Kim, Entrepreneur", date: "Date: 5 December 2024", title: "Expert guidance for commercial property", quote: "Finding the right commercial space was challenging until I worked with LuxeProperty. Their market insights and negotiation skills saved me thousands while securing premium office space.", tag: "Commercial", avatarSrc: "http://img.b2bpic.net/free-photo/happy-young-female-trainee-dressed-as-office-worker-holding-hands-her-suit-smiling-camera-confident-standing-against-white-background_176420-48410.jpg", avatarAlt: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/living-room-with-modern-beautiful-decoration_181624-44716.jpg", imageAlt: "Office space"
},
{
id: "5", name: "Jessica Lee, Real Estate Investor", date: "Date: 28 November 2024", title: "Best agency for luxury properties", quote: "LuxeProperty has access to properties you won't find elsewhere. Their exclusive listings and personalized service make them the go-to agency for serious investors.", tag: "VIP", avatarSrc: "http://img.b2bpic.net/free-photo/people-technology-leisure-concept_273609-6599.jpg", avatarAlt: "Jessica Lee", imageSrc: "http://img.b2bpic.net/free-photo/girl-showing-book-friends_23-2147678971.jpg", imageAlt: "Luxury investment"
},
{
id: "6", name: "Robert Martinez, Developer", date: "Date: 15 November 2024", title: "Professional and reliable partners", quote: "Working with LuxeProperty on multiple development projects has been seamless. Their professionalism, integrity, and market knowledge are unmatched in the industry.", tag: "Developer", avatarSrc: "http://img.b2bpic.net/free-photo/man-winking-thumb-up_1187-3210.jpg", avatarAlt: "Robert Martinez", imageSrc: "http://img.b2bpic.net/free-photo/sea-through-two-white-buildings_181624-3722.jpg", imageAlt: "Development project"
}
]}
textboxLayout="default"
useInvertedBackground={false}
className="w-full"
/>
</div>
<div id="team" data-section="team">
<TeamCardTwo
title="Meet Our Expert Team"
description="Experienced professionals dedicated to your real estate success"
tag="Leadership"
tagIcon={Users}
tagAnimation="slide-up"
members={[
{
id: "1", name: "Victoria Sterling", role: "Chief Executive Officer", description: "20+ years in luxury real estate with expertise in high-value properties and commercial investments.", imageSrc: "http://img.b2bpic.net/free-photo/two-coworkers-staring-gossiping-about-their-male-colleague-office_1153-5434.jpg", imageAlt: "Victoria Sterling", socialLinks: [
{ icon: Linkedin, url: "https://linkedin.com" },
{ icon: Mail, url: "mailto:victoria@luxeproperty.com" }
]
},
{
id: "2", name: "James Mitchell", role: "Senior Real Estate Agent", description: "Expert in residential and commercial property sales with a proven track record of successful negotiations.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-businessman-wearing-glasses_329181-677.jpg", imageAlt: "James Mitchell", socialLinks: [
{ icon: Linkedin, url: "https://linkedin.com" },
{ icon: Phone, url: "tel:+1234567890" }
]
},
{
id: "3", name: "Alexandra Chen", role: "Investment Specialist", description: "Specialist in investment properties and portfolio management, helping clients maximize returns.", imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg", imageAlt: "Alexandra Chen", socialLinks: [
{ icon: Linkedin, url: "https://linkedin.com" },
{ icon: Globe, url: "https://example.com" }
]
},
{
id: "4", name: "Thomas Anderson", role: "Property Manager", description: "Manages portfolios and ensures seamless transactions from listing to closing for all clients.", imageSrc: "http://img.b2bpic.net/free-photo/friendly-businessman-with-arms-crossed_23-2147985122.jpg", imageAlt: "Thomas Anderson", socialLinks: [
{ icon: Linkedin, url: "https://linkedin.com" },
{ icon: Mail, url: "mailto:thomas@luxeproperty.com" }
]
}
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
className="w-full"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Frequently Asked Questions"
description="Find answers to common questions about our services and real estate processes"
tag="Help & Support"
tagIcon={HelpCircle}
tagAnimation="slide-up"
faqs={[
{
id: "1", title: "How do I start searching for a property?", content: "Simply contact our team or browse our featured listings online. Our agents will help you narrow down options based on your budget, location preferences, and specific requirements. We'll schedule property viewings at your convenience."
},
{
id: "2", title: "What is your commission structure?", content: "Our commission rates are competitive and vary based on property type and transaction complexity. We typically charge 2-3% for residential properties and negotiate commercial rates. We're transparent about all costs upfront."
},
{
id: "3", title: "Do you handle mortgage assistance?", content: "While we don't provide mortgages directly, we work with leading financial institutions and can connect you with trusted mortgage brokers who offer competitive rates and flexible terms."
},
{
id: "4", title: "How long does a typical transaction take?", content: "Most transactions close within 30-45 days from offer acceptance. However, timelines can vary based on financing, inspections, and other contingencies. We keep you updated at every stage."
},
{
id: "5", title: "Are your listings exclusively listed?", content: "Many of our premium properties are exclusively listed, giving our clients first access to prime opportunities. We also work with other agencies through the MLS for broader selection."
},
{
id: "6", title: "What if I need to sell my current property first?", content: "We offer solutions including contingent offers, bridge financing options, and rental management services. Our team will work with you to find the best approach for your situation."
}
]}
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
animationType="smooth"
className="w-full"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Get Started"
tagIcon={Mail}
tagAnimation="slide-up"
title="Ready to Find Your Perfect Property?"
description="Contact our team today and let us help you navigate your real estate journey. Whether you're buying, selling, or investing, we're here to provide expert guidance every step of the way."
buttons={[
{ text: "Schedule Consultation", href: "#contact" },
{ text: "Call Us Today", href: "tel:+1234567890" }
]}
buttonAnimation="blur-reveal"
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
className="w-full"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="LuxeProperty"
copyrightText="© 2025 LuxeProperty. All rights reserved. Premium Real Estate Services."
socialLinks={[
{ icon: Facebook, href: "https://facebook.com/luxeproperty", ariaLabel: "Follow us on Facebook" },
{ icon: Linkedin, href: "https://linkedin.com/company/luxeproperty", ariaLabel: "Follow us on LinkedIn" },
{ icon: Instagram, href: "https://instagram.com/luxeproperty", ariaLabel: "Follow us on Instagram" },
{ icon: Twitter, href: "https://twitter.com/luxeproperty", ariaLabel: "Follow us on Twitter" }
]}
/>
</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-montserrat), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-montserrat), sans-serif;
}

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

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

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

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

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

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--secondary-cta: #ecebea;
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #efebe5;
--card: #f7f2ea;
--foreground: #000000;
--primary-cta: #000000;
--primary-cta-text: #efebe5;
--secondary-cta: #ffffff;
--secondary-cta-text: #000000;
--accent: #ffffff;
--background-accent: #e1b875;
/* 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;
}
}