Merge version_2 into main #2
254
src/app/page.tsx
254
src/app/page.tsx
@@ -4,162 +4,134 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroSignup from '@/components/sections/hero/HeroSignup';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Portfolio", id: "products" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Elite Fencing Co."
|
||||
button={{ text: "Get Quote", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Menu", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Mi Casa"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Secure Your Property with Professional Fencing"
|
||||
description="Expert fence installation, repair, and custom design for residential and commercial clients."
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-posed-outdoor-street-style-rap-singer_627829-2761.jpg", imageAlt: "Residential picket fence beautiful garden" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-male-traveler-with-arm-crossed-standing-near-textured-wall_23-2148221945.jpg", imageAlt: "Security fence commercial property" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-house-decorated-with-american-flag-colors-ornaments-independence-day-celebration_23-2151469885.jpg", imageAlt: "Vinyl fence modern backyard design" },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSignup
|
||||
title="Welcome Home"
|
||||
description="Authentic Mexican flavors in the heart of Houston, MS. Experience cozy, vibrant dining with every bite."
|
||||
tag="Mi Casa"
|
||||
background={{ variant: "gradient-bars" }}
|
||||
buttonText="Order Now"
|
||||
onSubmit={(email) => console.log("Signing up:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{ type: "text", content: "Built for Durability and Style." },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/friends-fitness-training-together-outdoors-living-active-healthy_1328-3011.jpg", alt: "Fencing contractors professional at work" },
|
||||
]}
|
||||
buttons={[{ text: "Learn More", href: "#features" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
title="Meet the Owners"
|
||||
description="At Mi Casa, we pride ourselves on authentic family recipes. From our kitchen to your table, we strive to make every guest feel like family."
|
||||
tag="About Us"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
bulletPoints={[
|
||||
{ title: "Authentic Recipes", description: "Traditional Mexican cuisine made fresh daily." },
|
||||
{ title: "Cozy Atmosphere", description: "A welcoming, homey space to enjoy your meal." },
|
||||
{ title: "Unique Crossovers", description: "Our signature Philly Cheese Steak and specialty wings." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Expert Installation", description: "Highly trained crew with years of field experience.", imageSrc: "http://img.b2bpic.net/free-photo/landscape-shot-brown-wooden-fence-mini-forest-with-clear-blue-sky_181624-17330.jpg", imageAlt: "Durable weather resistant fence materials" },
|
||||
{ title: "Premium Materials", description: "Weather-resistant, durable materials guaranteed.", imageSrc: "http://img.b2bpic.net/free-photo/japanese-house-entrance_23-2149445336.jpg", imageAlt: "Privacy fence garden design" },
|
||||
{ title: "Custom Solutions", description: "Tailored designs for your unique landscape.", imageSrc: "http://img.b2bpic.net/free-photo/walkway-railway_1150-12644.jpg", imageAlt: "Commercial security perimeter fence" },
|
||||
]}
|
||||
title="Why Choose Elite Fencing?"
|
||||
description="We combine premium materials with master craftsmanship to deliver fences that stand the test of time."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
title="Our Menu Classics"
|
||||
description="Explore our traditional Mexican favorites and unique house specials."
|
||||
tag="Menu"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", brand: "Classic", name: "Street Tacos", price: "$9.99", rating: 4.8, reviewCount: "120", imageSrc: "https://img.b2bpic.net/free-photo/tacos-with-meat-vegetables_1147-321.jpg" },
|
||||
{ id: "2", brand: "Special", name: "Philly Cheese Steak", price: "$12.50", rating: 4.9, reviewCount: "85", imageSrc: "https://img.b2bpic.net/free-photo/tasty-sandwich-table_23-2148762512.jpg" },
|
||||
{ id: "3", brand: "House", name: "Signature Wings", price: "$11.99", rating: 4.7, reviewCount: "200", imageSrc: "https://img.b2bpic.net/free-photo/chicken-wings-table_23-2148762499.jpg" },
|
||||
{ id: "4", brand: "Traditional", name: "Enchiladas", price: "$10.99", rating: 4.8, reviewCount: "95", imageSrc: "https://img.b2bpic.net/free-photo/enchiladas-plate_23-2148762505.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Classic Picket", price: "Custom Quote", variant: "Wood", imageSrc: "http://img.b2bpic.net/free-photo/trees-with-leaves-cloudy-day_58702-10709.jpg" },
|
||||
{ id: "p2", name: "Modern Iron", price: "Custom Quote", variant: "Metal", imageSrc: "http://img.b2bpic.net/free-photo/wooden-cross-nature-with-wooden-fence-it_181624-45737.jpg" },
|
||||
{ id: "p3", name: "Privacy Vinyl", price: "Custom Quote", variant: "Vinyl", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-black-african-american-man-hat-sunglasses-against-fence_627829-3839.jpg" },
|
||||
]}
|
||||
title="Our Fence Solutions"
|
||||
description="Explore our variety of fencing options."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="Restaurant Stats"
|
||||
description="Quality you can taste, service you will love."
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "m1", title: "Customer Rating", value: "4.7/5", icon: (props) => <svg {...props} viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> },
|
||||
{ id: "m2", title: "Years Serving", value: "10+", icon: (props) => <svg {...props} viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13h-1v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg> }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "500+", title: "Projects Completed", items: ["Residential", "Commercial"] },
|
||||
{ id: "m2", value: "15+", title: "Years Experience", items: ["Skilled Crew"] },
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Proven results for residential and commercial clients."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="Hear from Our Guests"
|
||||
description="Our community loves the cozy atmosphere and our signature crossover plates!"
|
||||
tag="Testimonials"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
kpiItems={[{ value: "4.7", label: "Star Rating" }, { value: "500+", label: "Happy Guests" }, { value: "10+", label: "Years Local" }]}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Maria G.", role: "Local Resident", company: "Houston, MS", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/happy-woman-dining_23-2148762512.jpg" },
|
||||
{ id: "2", name: "James T.", role: "Regular Customer", company: "Houston, MS", rating: 4, imageSrc: "https://img.b2bpic.net/free-photo/man-enjoying-meal_23-2148762500.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "John D.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe-with-laptop_273609-12858.jpg" },
|
||||
{ id: "2", name: "Sarah W.", imageSrc: "http://img.b2bpic.net/free-photo/man-looking-away-while-going-upstairs-with-coffee_171337-19937.jpg" },
|
||||
]}
|
||||
cardTitle="Client Reviews"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
title="Visit Mi Casa Today"
|
||||
description="Located at 929 N Jackson St, Houston, MS 38851. Call us at 662-567-1272 to place an order or book a table!"
|
||||
tag="Contact Us"
|
||||
background={{ variant: "gradient-bars" }}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/restaurant-table-setup_23-2148762505.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How long does installation take?", content: "Typically 2-4 days depending on the scope of the project." },
|
||||
{ id: "f2", title: "Do you offer warranties?", content: "Yes, all materials and workmanship are covered by a 3-year warranty." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our fencing process."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contact Us"
|
||||
title="Start Your Project Today"
|
||||
description="Fill out the form for a free on-site consultation."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/engineer-helmet-standing-by-factory_1157-35643.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Elite Fencing"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Services", href: "#features" }] },
|
||||
]}
|
||||
copyrightText="© 2024 Elite Fencing Co. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Mi Casa"
|
||||
columns={[
|
||||
{ title: "Address", items: [{ label: "929 N Jackson St, Houston, MS", href: "#" }] },
|
||||
{ title: "Socials", items: [{ label: "Facebook", href: "#" }, { label: "Instagram", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1c1c1c;
|
||||
--background: #f6f0e9;
|
||||
--card: #efe7dd;
|
||||
--foreground: #2b180a;
|
||||
--primary-cta: #8b1a1a;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #f1c40f;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #15479c;
|
||||
--background-accent: #a8cce8;
|
||||
--accent: #d35400;
|
||||
--background-accent: #efe7dd;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user