bender/bcd8bac1-9c87-49c3-859d-41e8d216e5d5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #4

Merged
bender merged 3 commits from version_2 into main 2026-03-04 00:27:11 +00:00
Conversation 0 Commits 3 Files Changed 3 +128 -108
3 changed files with 128 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/app/layout.tsx
View File

@@ -1,57 +1,27 @@
import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import { Figtree } from "next/font/google";
import "./styles/variables.css";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const halant = Halant({
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const figtree = Figtree({
variable: "--font-figtree", subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Sarabia Sealing - Professional Driveway & Parking Lot Sealing in O'Fallon, IL", description: "Expert concrete and asphalt sealing services in O'Fallon, Illinois. Free estimates on driveway sealing, parking lot maintenance, and crack repair.", keywords: "driveway sealing O'Fallon, parking lot sealing Illinois, asphalt maintenance, concrete sealing, crack filling", metadataBase: new URL("https://sarabiasealing.com"),
alternates: {
canonical: "https://sarabiasealing.com"},
robots: {
index: true,
follow: true,
},
openGraph: {
title: "Sarabia Sealing - Professional Sealing Services", description: "Protect your surfaces with expert sealing solutions in O'Fallon, IL", url: "https://sarabiasealing.com", siteName: "Sarabia Sealing", type: "website", images: [
{
url: "http://img.b2bpic.net/free-photo/funny-kid-rain-boots-playing-rain-park_1157-37673.jpg", alt: "Professional sealing services"},
],
},
twitter: {
card: "summary_large_image", title: "Sarabia Sealing - Professional Sealing Services in O'Fallon", description: "Expert driveway and parking lot sealing services with free estimates", images: ["http://img.b2bpic.net/free-photo/funny-kid-rain-boots-playing-rain-park_1157-37673.jpg"],
},
title: "Sarabia Sealing - Professional Driveway & Parking Lot Sealing in O'Fallon, IL", description: "Expert driveway and parking lot sealing services in O'Fallon, IL. Free estimates for residential and commercial projects. Trusted by hundreds of homeowners and businesses.", keywords: "driveway sealing, parking lot sealing, sealcoating, O'Fallon IL, asphalt sealing, concrete sealing", openGraph: {
title: "Sarabia Sealing - Professional Sealing Services", description: "Protect your surfaces with expert sealing solutions in O'Fallon, IL", type: "website"},
};
export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${halant.variable} ${inter.variable} ${figtree.variable} antialiased`}
>
<Tag />
{children}
<html lang="en">
<body className={inter.variable}>
{children}
<script
dangerouslySetInnerHTML={{
__html: `
@@ -1419,7 +1389,6 @@ export default function RootLayout({
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

159
src/app/page.tsx
View File

@@ -6,30 +6,32 @@ import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGaller
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Shield, Wrench, MessageSquare } from 'lucide-react';
import { Shield, Wrench, MessageSquare, MapPin, Phone, Star } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="compact"
sizing="medium"
background="circleGradient"
cardStyle="soft-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="normal"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmall"
background="aurora"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Sarabia Sealing"
navItems={[
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "reviews" },
{ name: "Contact", id: "contact" }
]}
/>
@@ -37,60 +39,73 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Professional Sealing Services for O'Fallon"
description="Protect and preserve your concrete and asphalt surfaces with expert sealing solutions from Sarabia Sealing. Serving O'Fallon, IL with quality workmanship and lasting results."
background={{ variant: "radial-gradient" }}
tag="Quality Assured"
title="Professional Driveway & Parking Lot Sealing"
description="Protect your concrete and asphalt surfaces with expert sealing solutions. Same-day estimates available. Serving O'Fallon and surrounding areas with proven results."
background={{ variant: "aurora" }}
tag="Free Estimates Available"
tagIcon={Shield}
tagAnimation="slide-up"
buttons={[
{ text: "Get a Free Estimate", href: "contact" },
{ text: "Learn More", href: "services" }
{ text: "📞 (618) 555-0147", href: "tel:+16185550147" },
{ text: "Request Estimate", href: "#estimate-form" }
]}
buttonAnimation="slide-up"
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/funny-kid-rain-boots-playing-rain-park_1157-37673.jpg?_wi=1", imageAlt: "concrete sealing driveway sealing professional construction asphalt maintenance" },
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-parking-lot-parking-lane-outdoor-public-park_1127-3373.jpg?_wi=1", imageAlt: "parking lot sealing commercial paving asphalt maintenance parking surface" },
{ imageSrc: "http://img.b2bpic.net/free-photo/funny-kid-rain-boots-playing-rain-park_1157-37673.jpg?_wi=2", imageAlt: "driveway sealing asphalt protection concrete repair surface treatment" }
{ imageSrc: "https://images.unsplash.com/photo-1581578731548-c64695c952952?w=1200&h=800&fit=crop", imageAlt: "Professional driveway sealing showing before and after" },
{ imageSrc: "https://images.unsplash.com/photo-1581578731548-c64695c952952?w=1200&h=800&fit=crop", imageAlt: "Commercial parking lot sealing and maintenance" },
{ imageSrc: "https://images.unsplash.com/photo-1581578731548-c64695c952952?w=1200&h=800&fit=crop", imageAlt: "Expert crack filling and asphalt repair" }
]}
mediaAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="About Sarabia Sealing"
description={[
"With years of experience protecting surfaces across O'Fallon and surrounding areas, Sarabia Sealing is your trusted partner for driveway, parking lot, and commercial sealing projects.", "We use industry-leading materials and proven techniques to extend the life of your asphalt and concrete surfaces. Our commitment to quality workmanship and customer satisfaction has made us a preferred choice for residential and commercial clients.", "Every project is handled with precision and care. We take pride in delivering results that protect your investment and enhance your property's appearance."
<div id="estimate-form" data-section="estimate-form">
<ContactSplitForm
title="Get Your Free Estimate"
description="Fill out the form below and we'll contact you within 2 hours with a competitive quote for your sealing project."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "phone", type: "tel", placeholder: "(618) 555-0000", required: true },
{ name: "email", type: "email", placeholder: "your@email.com", required: true },
{ name: "address", type: "text", placeholder: "Property Address", required: true },
{ name: "projectType", type: "text", placeholder: "e.g., Driveway, Parking Lot, Commercial", required: true },
{ name: "squareFootage", type: "text", placeholder: "Estimated square footage", required: false }
]}
buttons={[
{ text: "Request Service", href: "contact" }
]}
showBorder={true}
textarea={{
name: "message", placeholder: "Describe your project details and any special concerns...", rows: 4,
required: false
}}
useInvertedBackground={false}
buttonAnimation="slide-up"
imageSrc="https://images.unsplash.com/photo-1581578731548-c64695c952952?w=800&h=600&fit=crop"
imageAlt="Professional sealing team at work"
mediaAnimation="slide-up"
mediaPosition="right"
buttonText="Get Free Estimate"
onSubmit={(data) => {
console.log('Form submitted:', data);
}}
/>
</div>
<div id="services" data-section="services">
<FeatureCardEight
title="Our Services"
description="Comprehensive sealing and maintenance solutions tailored to your needs"
tag="Service Solutions"
description="Comprehensive sealing and maintenance solutions for residential and commercial properties"
tag="Complete Solutions"
tagIcon={Wrench}
tagAnimation="slide-up"
features={[
{
id: 1,
title: "Driveway Sealing", description: "Professional sealcoating to protect your driveway from UV damage, water infiltration, and harsh weather conditions.", imageSrc: "http://img.b2bpic.net/free-photo/funny-kid-rain-boots-playing-rain-park_1157-37673.jpg?_wi=3", imageAlt: "Driveway sealing service"
title: "Driveway Sealing", description: "Professional sealcoating to protect your driveway from UV damage, water infiltration, and harsh weather conditions. Extends pavement life by 5-10 years.", imageSrc: "https://images.unsplash.com/photo-1581578731548-c64695c952952?w=600&h=400&fit=crop", imageAlt: "Driveway sealing service"
},
{
id: 2,
title: "Parking Lot Maintenance", description: "Commercial-grade sealing services for parking lots, ensuring longevity and professional appearance for your business.", imageSrc: "http://img.b2bpic.net/free-photo/empty-parking-lot-parking-lane-outdoor-public-park_1127-3373.jpg?_wi=2", imageAlt: "Parking lot maintenance"
title: "Parking Lot Maintenance", description: "Commercial-grade sealing services for parking lots, ensuring longevity and professional appearance for your business. Includes line striping and repairs.", imageSrc: "https://images.unsplash.com/photo-1581578731548-c64695c952952?w=600&h=400&fit=crop", imageAlt: "Parking lot maintenance"
},
{
id: 3,
title: "Crack Filling & Repair", description: "Expert crack identification and filling to prevent further damage and maintain surface integrity.", imageSrc: "http://img.b2bpic.net/free-photo/funny-kid-rain-boots-playing-rain-park_1157-37673.jpg?_wi=4", imageAlt: "Crack filling service"
title: "Crack Filling & Repair", description: "Expert crack identification and filling to prevent further damage and maintain surface integrity. Prevents water infiltration and extends surface life.", imageSrc: "https://images.unsplash.com/photo-1581578731548-c64695c952952?w=600&h=400&fit=crop", imageAlt: "Crack filling service"
}
]}
textboxLayout="default"
@@ -99,17 +114,53 @@ export default function LandingPage() {
/>
</div>
<div id="reviews" data-section="reviews">
<TestimonialCardThirteen
testimonials={[
{
id: "1", name: "John Martinez", handle: "Local Homeowner", testimonial: "Sarabia Sealing did an amazing job on my driveway. Professional team, fair pricing, and the results look fantastic. Highly recommend!", rating: 5,
icon: Star
},
{
id: "2", name: "Sarah Thompson", handle: "Business Owner", testimonial: "We've used Sarabia Sealing for our parking lot maintenance for 3 years. Consistently excellent work and they always meet our schedule.", rating: 5,
icon: Star
},
{
id: "3", name: "Robert Chen", handle: "Property Manager", testimonial: "Fast, professional, and they stand behind their work. Best sealing company in O'Fallon. Already scheduled our next project.", rating: 5,
icon: Star
},
{
id: "4", name: "Michelle Davis", handle: "Residential Client", testimonial: "From the free estimate to the finished product, everything was handled with care and expertise. My driveway looks brand new!", rating: 5,
icon: Star
}
]}
showRating={true}
title="Customer Reviews"
description="Trusted by hundreds of satisfied homeowners and businesses"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
carouselMode="buttons"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
title="Trusted by hundreds of homeowners and businesses throughout O'Fallon and the surrounding region."
title="Trusted by Hundreds"
tag="By The Numbers"
tagAnimation="slide-up"
metrics={[
{
id: "1", value: "500+", description: "Successful projects completed with consistent quality and customer satisfaction."
id: "1", value: "500+", description: "Successful projects completed with consistent quality"
},
{
id: "2", value: "15+", description: "Years of experience delivering professional sealing and maintenance services."
id: "2", value: "15+", description: "Years of professional sealing experience"
},
{
id: "3", value: "98%", description: "Customer satisfaction rating"
},
{
id: "4", value: "24/7", description: "Emergency service availability"
}
]}
metricsAnimation="slide-up"
@@ -119,18 +170,18 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactCTA
tag="Ready to Get Started?"
tagIcon={MessageSquare}
tag="Emergency Service Available"
tagIcon={Phone}
tagAnimation="slide-up"
title="Protect Your Surfaces Today"
description="Contact Sarabia Sealing for a free estimate on your driveway, parking lot, or commercial sealing project. Our team is ready to help preserve and enhance your surfaces."
title="Ready to Protect Your Surfaces?"
description="Call Sarabia Sealing today for a free estimate on your driveway, parking lot, or commercial sealing project. Our team is ready to help preserve and enhance your surfaces."
buttons={[
{ text: "Call for Free Estimate", href: "tel:+1-618-XXX-XXXX" },
{ text: "Email Us", href: "mailto:info@sarabiasealing.com" }
{ text: "📞 Call (618) 555-0147", href: "tel:+16185550147" },
{ text: "📧 Email Info", href: "mailto:info@sarabiasealing.com" }
]}
buttonAnimation="slide-up"
background={{ variant: "plain" }}
useInvertedBackground={false}
background={{ variant: "aurora" }}
useInvertedBackground={true}
/>
</div>
@@ -147,20 +198,20 @@ export default function LandingPage() {
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Contact", href: "#contact" },
{ label: "Service Area", href: "#" }
{ label: "About Us", href: "#" },
{ label: "Free Estimates", href: "#estimate-form" },
{ label: "Reviews", href: "#reviews" }
]
},
{
title: "Contact", items: [
{ label: "O'Fallon, IL", href: "#" },
{ label: "Free Estimates", href: "#contact" },
{ label: "Emergency Service", href: "#" }
{ label: "📞 (618) 555-0147", href: "tel:+16185550147" },
{ label: "📧 info@sarabiasealing.com", href: "mailto:info@sarabiasealing.com" },
{ label: "📍 O'Fallon, IL 62269", href: "#" }
]
}
]}
copyrightText="© 2025 Sarabia Sealing. All rights reserved. Professional sealing services in O'Fallon, IL."
copyrightText="© 2025 Sarabia Sealing. All rights reserved. Professional driveway and parking lot sealing services in O'Fallon, IL."
/>
</div>
</ThemeProvider>

28
src/app/styles/variables.css
View File

@@ -2,23 +2,23 @@
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #341f51;;
--secondary-cta: #ffffff;;
--accent: #6139e6;;
--background-accent: #b3a8e8;; */
/* --background: #ffffff;;
--card: #f9f9f9;;
--foreground: #000612e6;;
--primary-cta: #E34400;;
--secondary-cta: #f9f9f9;;
--accent: #e2e2e2;;
--background-accent: #E34400;; */
--background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #341f51;;
--background: #ffffff;;
--card: #f9f9f9;;
--foreground: #000612e6;;
--primary-cta: #E34400;;
--primary-cta-text: #f5f5f5;;
--secondary-cta: #ffffff;;
--secondary-cta: #f9f9f9;;
--secondary-cta-text: #1c1c1c;;
--accent: #6139e6;;
--background-accent: #b3a8e8;;
--accent: #e2e2e2;;
--background-accent: #E34400;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);