271 lines
14 KiB
TypeScript
271 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="fluid"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Services", id: "services"},
|
|
{
|
|
name: "Projects", id: "projects"},
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="Yanez Concrete"
|
|
button={{
|
|
text: "Get A Quote", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
title="Quality Concrete & Home Services"
|
|
description="Professional craftsmanship for your home improvement projects. From foundational concrete to custom hardscaping, Yanez delivers reliable and durable solutions."
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", imageAlt: "Concrete work"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", imageAlt: "Concrete work 2"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", imageAlt: "Concrete work 3"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", imageAlt: "Concrete work 4"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", imageAlt: "Concrete work 5"},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", imageAlt: "Home service"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", imageAlt: "Home service 2"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", imageAlt: "Home service 3"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", imageAlt: "Home service 4"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", imageAlt: "Home service 5"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Get A Quote", href: "#contact"},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", alt: "Worker 1"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", alt: "Worker 2"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", alt: "Worker 3"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", alt: "Worker 4"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", alt: "Worker 5"},
|
|
]}
|
|
avatarText="Trusted by 500+ homeowners"
|
|
marqueeItems={[
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", alt: "Logo 1"},
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", alt: "Logo 2"},
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", alt: "Logo 3"},
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", alt: "Logo 4"},
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg", alt: "Logo 5"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={false}
|
|
title="Your Vision, Our Foundation."
|
|
buttons={[
|
|
{
|
|
text: "Learn More", href: "#services"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardNineteen
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
tag: "Concrete", title: "Stamped Concrete", subtitle: "Beautiful artistic patterns.", description: "High-quality stamped concrete to elevate your outdoor spaces.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
tag: "Driveway", title: "Concrete Driveways", subtitle: "Built to last.", description: "Professional pouring and installation for durable driveways.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
tag: "Patio", title: "Concrete Patios", subtitle: "Perfect for entertaining.", description: "Custom patio designs for your backyard oasis.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
]}
|
|
title="Services We Offer"
|
|
description="Comprehensive concrete and structural solutions tailored to your needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1", name: "Custom Patio", price: "View Details", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
id: "p2", name: "Modern Driveway", price: "View Details", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
id: "p3", name: "Retaining Wall", price: "View Details", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
id: "p4", name: "Front Entrance", price: "View Details", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
id: "p5", name: "Basement Pour", price: "View Details", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
id: "p6", name: "Stone Walkway", price: "View Details", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
]}
|
|
title="Our Recent Projects"
|
|
description="Browse our latest craftsmanship."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "15+", title: "Years Experience", description: "Serving our local community.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
id: "m2", value: "500+", title: "Projects Completed", description: "Residential and commercial.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
id: "m3", value: "100%", title: "Commitment", description: "Professional quality every time.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
]}
|
|
title="Quality in Numbers"
|
|
description="Dedicated service and proven experience in every project."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "John Doe", handle: "@johndoe", testimonial: "Excellent service and craftsmanship.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
id: "t2", name: "Jane Smith", handle: "@janesmith", testimonial: "Concrete finish looks amazing.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
id: "t3", name: "Mike Ross", handle: "@mikeross", testimonial: "Professional and punctual team.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
id: "t4", name: "Sarah Lee", handle: "@sarahlee", testimonial: "Strongly recommended for anyone.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
{
|
|
id: "t5", name: "David W.", handle: "@davidw", testimonial: "Great attention to detail.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CjEM9gd3HJ1JKpLPXnmk1280Ne/uploaded-1776901036327-ma2kgk8j.jpg"},
|
|
]}
|
|
showRating={true}
|
|
title="Client Feedback"
|
|
description="Read what our customers say about our work."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "Do you offer free estimates?", content: "Yes, we provide free quotes for all projects."},
|
|
{
|
|
id: "f2", title: "How long does a driveway take?", content: "Depending on size, usually 2-4 days."},
|
|
{
|
|
id: "f3", title: "Are you fully insured?", content: "Yes, we carry full insurance and licensure."},
|
|
]}
|
|
sideTitle="Common Questions"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
tag="Contact"
|
|
title="Ready for your project?"
|
|
description="Reach out today and let's get started."
|
|
buttons={[
|
|
{
|
|
text: "Contact Us", href: "mailto:info@yanezconcrete.com"},
|
|
{
|
|
text: "Get Quote", href: "#contact"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Yanez Concrete"
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About", href: "#about"},
|
|
{
|
|
label: "Services", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |