bender/ead20175-cf22-451a-9b20-7fc594e8e693
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-19 05:03:29 +00:00
commit cbef080e8f
632 changed files with 79662 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,170 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Heart, Phone } from "lucide-react";
export default function AboutPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "reviews" },
{ name: "Contact", id: "contact" },
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="soft-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={navItems}
brandName="A-1 Discount Tree & Lawn"
button={{
text: "Call Now",
href: "tel:+1-800-TREE-911",
}}
/>
</div>
<div id="about-story" data-section="about-story">
<MetricSplitMediaAbout
title="About A-1 Discount Tree & Lawn Service"
description="Founded in 1998, A-1 Discount Tree & Lawn Service has grown from a single crew to a trusted regional leader in professional tree care and lawn services. We've built our reputation on reliability, safety, and honest pricing. Every member of our team shares a commitment to treating your property with the same care we'd show our own homes."
tag="Our Story"
tagIcon={Heart}
tagAnimation="slide-up"
metrics={[
{
value: "25+",
title: "Years in Business",
},
{
value: "150+",
title: "5-Star Reviews",
},
{
value: "4.8★",
title: "Average Rating",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/men-posing-garden-botanical-greenhouse-photoshoot_53876-133528.jpg"
imageAlt="professional tree service team group photo"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="team-values" data-section="team-values">
<MetricSplitMediaAbout
title="Our Team & Values"
description="Our skilled arborists and crew members are trained, certified, and dedicated to delivering exceptional results. We believe in transparent communication, fair pricing, and leaving every yard in better condition than we found it. Safety is our top priority—for your family, our team, and your property."
tag="What We Stand For"
tagIcon={Heart}
tagAnimation="slide-up"
metrics={[
{
value: "100%",
title: "Licensed & Insured",
},
{
value: "Certified",
title: "Arborists on Staff",
},
{
value: "24/7",
title: "Emergency Ready",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/crop-woman-adjusting-waist-bag_23-2147714892.jpg"
imageAlt="professional tree removal crew working safely"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="testimonial-about" data-section="testimonial-about">
<TestimonialCardFifteen
testimonial="A-1 isn't just a service provider—they're part of our community. When a massive tree threatened our fence last spring, they showed up quickly, worked safely, and educated us about why the removal was necessary. They could have upselled us, but they were honest about what we actually needed. That's integrity."
rating={5}
author="Michael Chen, Homeowner"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",
alt: "Michael Chen",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-smiling-redhead-female-resting-outdoor_613910-10360.jpg",
alt: "Lisa Chen",
},
{
src: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",
alt: "Tom Johnson",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
alt: "David Martinez",
},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="contact-about-cta" data-section="contact-about-cta">
<ContactCTA
tag="Get In Touch"
tagIcon={Phone}
tagAnimation="slide-up"
title="Ready to Work With A Professional Team?"
description="Whether you need routine maintenance or emergency storm response, we're here to help. Contact us today for a free estimate or immediate assistance."
buttons={[
{
text: "Call Now (24/7)",
href: "tel:+1-800-TREE-911",
},
{
text: "Request Free Estimate",
href: "#contact-form",
},
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="A-1 Discount Tree & Lawn"
leftLink={{
text: "Privacy Policy",
href: "#privacy",
}}
rightLink={{
text: "Terms of Service",
href: "#terms",
}}
/>
</div>
</ThemeProvider>
);
}

155
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,155 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Phone, HelpCircle } from "lucide-react";
export default function ContactPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "reviews" },
{ name: "Contact", id: "contact" },
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="soft-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={navItems}
brandName="A-1 Discount Tree & Lawn"
button={{
text: "Call Now",
href: "tel:+1-800-TREE-911",
}}
/>
</div>
<div id="hero" data-section="hero" className="mx-auto px-4 md:px-6">
<HeroLogoBillboardSplit
logoText="A-1 Discount Tree & Lawn Service"
description="Get fast, professional help now. Call us 24/7 for emergency service or to schedule your free estimate."
background={{ variant: "plain" }}
buttons={[
{
text: "Call Now (24/7)",
href: "tel:+1-800-TREE-911",
},
{
text: "Request Free Estimate",
href: "#contact-cta",
},
]}
buttonAnimation="slide-up"
layoutOrder="default"
imageSrc="http://img.b2bpic.net/free-photo/crop-woman-adjusting-waist-bag_23-2147714892.jpg"
imageAlt="professional tree removal crew working safely"
mediaAnimation="slide-up"
frameStyle="card"
ariaLabel="Contact page hero section"
/>
</div>
<div id="contact-cta" data-section="contact-cta" className="mx-auto px-4 md:px-6">
<ContactCTA
tag="Get Started"
tagIcon={Phone}
tagAnimation="slide-up"
title="Free Estimate or Emergency Service?"
description="Call us now for immediate assistance or to schedule your free tree service estimate. Available 24 hours a day, 7 days a week."
buttons={[
{
text: "Call Now (24/7)",
href: "tel:+1-800-TREE-911",
},
{
text: "Request Estimate",
href: "#contact-form",
},
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
/>
</div>
<div id="faq" data-section="faq" className="mx-auto px-4 md:px-6">
<FaqBase
title="Frequently Asked Questions"
description="Get answers to common questions about our tree removal, trimming, and lawn services."
tag="Help & Support"
tagIcon={HelpCircle}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
animationType="smooth"
showCard={true}
faqs={[
{
id: "1",
title: "How fast can you respond to emergency tree damage?",
content: "We dispatch crews within 30 minutes of your call, 24/7. Our average response time is typically 20-30 minutes for emergency storm damage. Call us immediately at 1-800-TREE-911.",
},
{
id: "2",
title: "What is included in your cleanup?",
content: "Complete cleanup is always included. We remove all branches, logs, and debris from your property. Your yard is swept clean and restored to its original condition. No surprises.",
},
{
id: "3",
title: "Do you work with insurance companies?",
content: "Yes, we're an approved vendor with all major insurance carriers. We can work directly with your insurance company and provide all documentation needed for your claim. We handle the paperwork hassle.",
},
{
id: "4",
title: "How do I get a free estimate?",
content: "Simply call us at 1-800-TREE-911 or fill out our online form. We'll schedule a convenient time to inspect your property and provide a detailed, no-obligation quote.",
},
{
id: "5",
title: "Are you licensed and insured?",
content: "Absolutely. We're fully licensed, bonded, and insured. You can request proof of insurance anytime. Your property and our crew are fully protected on every job.",
},
{
id: "6",
title: "What payment methods do you accept?",
content: "We accept all major credit cards, checks, and bank transfers. We offer flexible payment plans for larger projects. Ask about financing options when you call for your free estimate.",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="A-1 Discount Tree & Lawn"
leftLink={{
text: "Privacy Policy",
href: "#privacy",
}}
rightLink={{
text: "Terms of Service",
href: "#terms",
}}
/>
</div>
</ThemeProvider>
);
}

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

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

@@ -0,0 +1,43 @@
import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script";
import { Lato } from "next/font/google";
export const metadata: Metadata = {
title: "Webild components 2",
description: "Generated by create next app",
};
const lato = Lato({
variable: "--font-lato",
subsets: ["latin"],
weight: ["100", "300", "400", "700", "900"],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${lato.variable} antialiased`}>
<Tag />
{children}
<script
dangerouslySetInnerHTML={{
__html: `${getVisualEditScript()}`
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

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

@@ -0,0 +1,451 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import {
Shield,
Sparkles,
Heart,
Award,
Phone,
HelpCircle,
Axe,
Zap,
CheckCircle,
Leaf,
Eye,
AlertTriangle,
Hammer,
Square,
} from "lucide-react";
export default function HomePage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "reviews" },
{ name: "Contact", id: "contact" },
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="soft-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={navItems}
brandName="A-1 Discount Tree & Lawn"
button={{
text: "Call Now",
href: "tel:+1-800-TREE-911",
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboardSplit
logoText="A-1 Discount Tree & Lawn Service"
description="Fast, professional tree removal and lawn care you can trust — 24/7 emergency service available now. Same-day estimates and fully cleaned job sites guaranteed."
background={{ variant: "plain" }}
buttons={[
{
text: "Call Now (24/7)",
href: "tel:+1-800-TREE-911",
},
{
text: "Request Free Estimate",
href: "#contact",
},
]}
buttonAnimation="slide-up"
layoutOrder="default"
imageSrc="http://img.b2bpic.net/free-photo/crop-woman-adjusting-waist-bag_23-2147714892.jpg"
imageAlt="professional tree removal crew working safely"
mediaAnimation="slide-up"
frameStyle="card"
ariaLabel="Hero section with call to action"
/>
</div>
<div id="trust" data-section="trust">
<MetricCardSeven
title="Trusted by Thousands of Homeowners"
description="Our proven track record speaks for itself. Join thousands of satisfied customers who trust A-1 for their tree and lawn needs."
metrics={[
{
id: "rating",
value: "4.8★",
title: "Average Rating",
items: [
"150+ verified reviews",
"Emergency response praised",
"Cleanup quality rated 5-stars",
],
},
{
id: "years",
value: "25+",
title: "Years of Experience",
items: [
"Family-owned local business",
"Fully licensed & insured",
"Insurance-recommended vendor",
],
},
{
id: "response",
value: "30 min",
title: "Average Response Time",
items: [
"24/7 emergency dispatch",
"Same-day service available",
"Storm damage specialists",
],
},
{
id: "cleanup",
value: "100%",
title: "Cleanup Guarantee",
items: [
"Complete debris removal",
"Yard restored to original state",
"No hidden fees or surprises",
],
},
]}
tag="Trust Signals"
tagIcon={Shield}
tagAnimation="slide-up"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttonAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureBento
title="Complete Tree & Lawn Services"
description="Professional solutions for every tree and lawn challenge — from routine maintenance to emergency storm response."
tag="Our Services"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
title: "Tree Removal",
description:
"Safe, efficient removal of dead, diseased, or unwanted trees of any size. Complete stump grinding available.",
bentoComponent: "icon-info-cards",
items: [
{
icon: Axe,
label: "Large Trees",
value: "Up to 100ft",
},
{
icon: Zap,
label: "Fast Service",
value: "Same-day available",
},
{
icon: CheckCircle,
label: "Fully Cleaned",
value: "Zero debris left",
},
],
button: {
text: "Learn More",
href: "/services#removal",
},
},
{
title: "Tree Trimming & Pruning",
description:
"Expert pruning to improve health, appearance, and safety. Disease prevention and shape maintenance.",
bentoComponent: "icon-info-cards",
items: [
{
icon: Leaf,
label: "Health Focus",
value: "Disease prevention",
},
{
icon: Eye,
label: "Aesthetic",
value: "Perfect shape",
},
{
icon: Shield,
label: "Safety",
value: "Remove hazards",
},
],
button: {
text: "Learn More",
href: "/services#trimming",
},
},
{
title: "Stump Grinding",
description:
"Complete stump removal below ground level. Allows replanting or repurposing your yard space.",
bentoComponent: "icon-info-cards",
items: [
{
icon: Hammer,
label: "Deep Removal",
value: "Below grade",
},
{
icon: Square,
label: "Space Recovery",
value: "Reuse your yard",
},
{
icon: Zap,
label: "Quick Work",
value: "1-2 hours typical",
},
],
button: {
text: "Learn More",
href: "/services#stump",
},
},
{
title: "Storm Damage Response",
description:
"Emergency response to fallen trees, branch damage, and storm cleanup. Available 24/7 for urgent situations.",
bentoComponent: "icon-info-cards",
items: [
{
icon: AlertTriangle,
label: "24/7 Available",
value: "Emergency dispatch",
},
{
icon: Zap,
label: "Fast Response",
value: "30-min average",
},
{
icon: Shield,
label: "Insurance Ready",
value: "Claim support",
},
],
button: {
text: "Emergency Call",
href: "tel:+1-800-TREE-911",
},
},
]}
/>
</div>
<div id="why-choose" data-section="why-choose">
<MetricSplitMediaAbout
title="Why Choose A-1 Discount Tree & Lawn?"
description="We're not just another tree service. We're your trusted local partner committed to safety, quality, and fair pricing. Every job is treated like we're working on our own home."
tag="Our Commitment"
tagIcon={Heart}
tagAnimation="slide-up"
metrics={[
{
value: "Licensed",
title: "& Fully Insured",
},
{
value: "Fair",
title: "Pricing Always",
},
{
value: "24/7",
title: "Available",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/men-posing-garden-botanical-greenhouse-photoshoot_53876-133528.jpg"
imageAlt="professional tree service team group photo"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
testimonial="When our 80-foot oak fell across our house during the storm, A-1 was here within 30 minutes. They removed the tree, cleared all debris, and were so professional and respectful of our home. We couldn't believe they finished the same day. Incredible service!"
rating={5}
author="Sarah Mitchell & Family"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-smiling-redhead-female-resting-outdoor_613910-10360.jpg",
alt: "Sarah Mitchell",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",
alt: "John Mitchell",
},
{
src: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",
alt: "Emily Customer",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
alt: "David Johnson",
},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Insurance & Industry Partners"
description="Trusted by major insurance companies and recommended by property professionals across the region."
tag="Recommended By"
tagIcon={Award}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
names={[
"State Farm Insurance",
"Allstate Recommended",
"USAA Approved",
"Local Realty Association",
"City Property Mgmt Council",
"Chamber of Commerce",
"Home Contractors Board",
]}
logos={[
"http://img.b2bpic.net/free-vector/green-orange-st-patrick-s-day-badges_23-2147597957.jpg",
"http://img.b2bpic.net/free-vector/shield-protect-defense-logo-linear-style-security-guardian-modern-heraldic-logo_126523-2747.jpg",
"http://img.b2bpic.net/free-vector/flat-veterans-day-logo-template_23-2149689176.jpg",
"http://img.b2bpic.net/free-vector/real-estate-golden-logos-set_1195-26.jpg",
"http://img.b2bpic.net/free-vector/colorful-geometric-background_1034-407.jpg",
"http://img.b2bpic.net/free-vector/abstract-hifive-logo-with-tagline_1043-87.jpg",
"http://img.b2bpic.net/free-vector/open-house-label_23-2148497703.jpg",
]}
speed={40}
showCard={true}
buttonAnimation="slide-up"
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Get Started"
tagIcon={Phone}
tagAnimation="slide-up"
title="Free Estimate or Emergency Service?"
description="Call us now for immediate assistance or to schedule your free tree service estimate. Available 24 hours a day, 7 days a week."
buttons={[
{
text: "Call Now (24/7)",
href: "tel:+1-800-TREE-911",
},
{
text: "Request Estimate",
href: "#contact-form",
},
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="Frequently Asked Questions"
description="Get answers to common questions about our tree removal, trimming, and lawn services."
tag="Help & Support"
tagIcon={HelpCircle}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
animationType="smooth"
showCard={true}
faqs={[
{
id: "1",
title: "How fast can you respond to emergency tree damage?",
content:
"We dispatch crews within 30 minutes of your call, 24/7. Our average response time is typically 20-30 minutes for emergency storm damage. Call us immediately at 1-800-TREE-911.",
},
{
id: "2",
title: "What is included in your cleanup?",
content:
"Complete cleanup is always included. We remove all branches, logs, and debris from your property. Your yard is swept clean and restored to its original condition. No surprises.",
},
{
id: "3",
title: "Do you work with insurance companies?",
content:
"Yes, we're an approved vendor with all major insurance carriers. We can work directly with your insurance company and provide all documentation needed for your claim. We handle the paperwork hassle.",
},
{
id: "4",
title: "How do I get a free estimate?",
content:
"Simply call us at 1-800-TREE-911 or fill out our online form. We'll schedule a convenient time to inspect your property and provide a detailed, no-obligation quote.",
},
{
id: "5",
title: "Are you licensed and insured?",
content:
"Absolutely. We're fully licensed, bonded, and insured. You can request proof of insurance anytime. Your property and our crew are fully protected on every job.",
},
{
id: "6",
title: "What payment methods do you accept?",
content:
"We accept all major credit cards, checks, and bank transfers. We offer flexible payment plans for larger projects. Ask about financing options when you call for your free estimate.",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="A-1 Discount Tree & Lawn"
leftLink={{
text: "Privacy Policy",
href: "#privacy",
}}
rightLink={{
text: "Terms of Service",
href: "#terms",
}}
/>
</div>
</ThemeProvider>
);
}

168
src/app/reviews/page.tsx Normal file
View File

@@ -0,0 +1,168 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Shield, Phone } from "lucide-react";
export default function ReviewsPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "reviews" },
{ name: "Contact", id: "contact" },
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="soft-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={navItems}
brandName="A-1 Discount Tree & Lawn"
button={{
text: "Call Now",
href: "tel:+1-800-TREE-911",
}}
/>
</div>
<div id="reviews-overview" data-section="reviews-overview">
<MetricCardSeven
title="Customer Reviews & Ratings"
description="Read what our satisfied customers have to say about A-1's professional service, fast response times, and quality workmanship."
metrics={[
{
id: "rating",
value: "4.8★",
title: "Average Rating",
items: [
"Rated 5 stars for emergency response",
"Praised for thorough cleanup",
"Customers appreciate honest pricing",
],
},
{
id: "reviews",
value: "150+",
title: "Verified Reviews",
items: [
"Google Business verified reviews",
"BBB A+ rated company",
"Trusted by homeowners & property managers",
],
},
{
id: "emergency",
value: "99%",
title: "Emergency Response Satisfaction",
items: [
"Fast dispatch and arrival",
"Professional crew behavior",
"Complete problem resolution same-day",
],
},
{
id: "recommend",
value: "98%",
title: "Would Recommend",
items: [
"Customers refer friends and family",
"Repeat customers return regularly",
"Insurance companies recommend us",
],
},
]}
tag="Trust Signals"
tagIcon={Shield}
tagAnimation="slide-up"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttonAnimation="slide-up"
/>
</div>
<div id="featured-review" data-section="featured-review">
<TestimonialCardFifteen
testimonial="Our kitchen was flooded when a tree branch crashed through the roof during a storm. A-1 responded within 25 minutes, secured the damage, and coordinated with our insurance company. They handled everything professionally and kept us informed every step of the way. Outstanding work and fantastic people!"
rating={5}
author="Jennifer & Robert Thompson"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-smiling-redhead-female-resting-outdoor_613910-10360.jpg",
alt: "Jennifer Thompson",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",
alt: "Robert Thompson",
},
{
src: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",
alt: "Karen Wilson",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
alt: "Paul Anderson",
},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="more-reviews-cta" data-section="more-reviews-cta">
<ContactCTA
tag="Join Our Community"
tagIcon={Phone}
tagAnimation="slide-up"
title="Impressed by Our Reviews?"
description="Experience the same professional, reliable service that thousands of homeowners trust. Contact A-1 today for a free estimate or emergency service."
buttons={[
{
text: "Call Now (24/7)",
href: "tel:+1-800-TREE-911",
},
{
text: "Request Free Estimate",
href: "#contact-form",
},
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="A-1 Discount Tree & Lawn"
leftLink={{
text: "Privacy Policy",
href: "#privacy",
}}
rightLink={{
text: "Terms of Service",
href: "#terms",
}}
/>
</div>
</ThemeProvider>
);
}

248
src/app/services/page.tsx Normal file
View File

@@ -0,0 +1,248 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import {
Axe,
Zap,
CheckCircle,
Leaf,
Eye,
Shield,
Hammer,
Square,
AlertTriangle,
Phone,
Sparkles,
Award,
} from "lucide-react";
export default function ServicesPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "reviews" },
{ name: "Contact", id: "contact" },
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="soft-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={navItems}
brandName="A-1 Discount Tree & Lawn"
button={{
text: "Call Now",
href: "tel:+1-800-TREE-911",
}}
/>
</div>
<div id="services-detail" data-section="services-detail">
<FeatureBento
title="Complete Tree & Lawn Services"
description="Professional solutions for every tree and lawn challenge — from routine maintenance to emergency storm response. Each service is backed by our 25+ years of expertise and commitment to excellence."
tag="Our Services"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
title: "Tree Removal",
description: "Safe, efficient removal of dead, diseased, or unwanted trees of any size. We handle complex removals near structures with precision and care.",
bentoComponent: "icon-info-cards",
items: [
{
icon: Axe,
label: "Large Trees",
value: "Up to 100ft",
},
{
icon: Zap,
label: "Fast Service",
value: "Same-day available",
},
{
icon: CheckCircle,
label: "Fully Cleaned",
value: "Zero debris left",
},
],
button: {
text: "Get Free Estimate",
href: "tel:+1-800-TREE-911",
},
},
{
title: "Tree Trimming & Pruning",
description: "Expert pruning to improve health, appearance, and safety. Disease prevention and shape maintenance for optimal tree longevity.",
bentoComponent: "icon-info-cards",
items: [
{
icon: Leaf,
label: "Health Focus",
value: "Disease prevention",
},
{
icon: Eye,
label: "Aesthetic",
value: "Perfect shape",
},
{
icon: Shield,
label: "Safety",
value: "Remove hazards",
},
],
button: {
text: "Schedule Service",
href: "tel:+1-800-TREE-911",
},
},
{
title: "Stump Grinding",
description: "Complete stump removal below ground level. Allows replanting or repurposing your yard space with no remnants left behind.",
bentoComponent: "icon-info-cards",
items: [
{
icon: Hammer,
label: "Deep Removal",
value: "Below grade",
},
{
icon: Square,
label: "Space Recovery",
value: "Reuse your yard",
},
{
icon: Zap,
label: "Quick Work",
value: "1-2 hours typical",
},
],
button: {
text: "Learn More",
href: "tel:+1-800-TREE-911",
},
},
]}
carouselMode="buttons"
/>
</div>
<div id="service-metrics" data-section="service-metrics">
<MetricCardSeven
title="Why Our Services Stand Out"
description="Each service is executed with precision, professionalism, and a commitment to your complete satisfaction. We bring decades of experience to every job."
metrics={[
{
id: "safety",
value: "100%",
title: "Safety Record",
items: [
"OSHA-trained crew",
"Industry best practices",
"Zero incidents on record",
],
},
{
id: "equipment",
value: "State",
title: "Of The Art Equipment",
items: [
"Latest grinding technology",
"Crane-assisted removals",
"Precision tools",
],
},
{
id: "guarantee",
value: "Satisfaction",
title: "Guaranteed",
items: [
"100% cleanup promise",
"No hidden costs",
"Money-back guarantee",
],
},
{
id: "availability",
value: "Always",
title: "Ready To Help",
items: [
"24/7 emergency dispatch",
"Same-day service",
"Rapid response team",
],
},
]}
tag="Service Excellence"
tagIcon={Award}
tagAnimation="slide-up"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
buttonAnimation="slide-up"
/>
</div>
<div id="services-cta" data-section="services-cta">
<ContactCTA
tag="Ready To Get Started?"
tagIcon={Phone}
tagAnimation="slide-up"
title="Schedule Your Free Estimate Today"
description="Call us to discuss your tree or lawn service needs. Our experts are available 24/7 for emergency situations or routine maintenance scheduling."
buttons={[
{
text: "Call Now (24/7)",
href: "tel:+1-800-TREE-911",
},
{
text: "Back to Home",
href: "/",
},
]}
buttonAnimation="slide-up"
background={{
variant: "plain",
}}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="A-1 Discount Tree & Lawn"
leftLink={{
text: "Privacy Policy",
href: "#privacy",
}}
rightLink={{
text: "Terms of Service",
href: "#terms",
}}
/>
</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-lato), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-lato), sans-serif;
}

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

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

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

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

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

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