Update src/app/page.tsx
This commit is contained in:
385
src/app/page.tsx
385
src/app/page.tsx
@@ -12,7 +12,7 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import { Award, Building, CheckCircle, Smile } from "lucide-react";
|
||||
import { Award, Building, CheckCircle, Smile, Hammer, HardHat } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -20,31 +20,26 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Projects", id: "products" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Quiroz Construction"
|
||||
/>
|
||||
@@ -52,340 +47,128 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Building Your Vision with Excellence"
|
||||
description="Quiroz Construction delivers reliable, top-tier construction services for residential and commercial projects."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-check-long-haired-pretty-woman-gray-business-suit-hardhat-with-drawings-looking-brick-wall-standing-building-construction-outdoors_259150-57853.jpg?_wi=1",
|
||||
imageAlt: "construction site professional architecture",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/site-engineer-construction-site_53876-42834.jpg?_wi=1",
|
||||
imageAlt: "architectural plan on site",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-site-with-tower-crane-apartments-urban-modern-architecture_169016-69092.jpg",
|
||||
imageAlt: "modern luxury house construction",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-skyscrapers-japan-business-district_23-2148836758.jpg",
|
||||
imageAlt: "commercial real estate development",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/architects-face-mask-planning-construction-new-normal_53876-100298.jpg",
|
||||
imageAlt: "construction workers building site",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/construction-check-long-haired-pretty-woman-gray-business-suit-hardhat-with-drawings-looking-brick-wall-standing-building-construction-outdoors_259150-57853.jpg", imageAlt: "construction site professional architecture" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/site-engineer-construction-site_53876-42834.jpg", imageAlt: "architectural plan on site" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/construction-site-with-tower-crane-apartments-urban-modern-architecture_169016-69092.jpg", imageAlt: "modern luxury house construction" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-skyscrapers-japan-business-district_23-2148836758.jpg", imageAlt: "commercial real estate development" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/architects-face-mask-planning-construction-new-normal_53876-100298.jpg", imageAlt: "construction workers building site" }
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/realtor-startup-entrepreneur-office-hunt-touring-potential-property_482257-95097.jpg",
|
||||
imageAlt: "blueprint of new building project",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-two-architect-working-together-construction-site_23-2148203939.jpg",
|
||||
imageAlt: "construction workers building site",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fourth-block-chernobyl-nuclear-power-plant-30-years-after-explosion-nuclear-power-plant_627829-11676.jpg",
|
||||
imageAlt: "commercial real estate development",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cityscape-wuxi_1127-4022.jpg",
|
||||
imageAlt: "modern luxury house construction",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-construction-worker-wearing-safety-glasses-helmet_23-2148784052.jpg",
|
||||
imageAlt: "architectural plan on site",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-architect-designing-plans-buildings-restorations-alterations_482257-112178.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cross-stitch-pattern_23-2148145972.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-complex-architectural-plan_23-2148242993.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/architecture-concept-with-building-plan_23-2147813067.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/building-blueprints-table_23-2147710828.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/architectural-blueprint-with-hard-hat_23-2151933422.jpg",
|
||||
alt: "Partner 1",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-clipboard_23-2148921393.jpg",
|
||||
alt: "Partner 2",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/three-people-discussing-plan-factory_1303-30624.jpg",
|
||||
alt: "Partner 3",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/men-looking-tablet-medium-shot_23-2148921388.jpg",
|
||||
alt: "Partner 4",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/engineers-helmets-standing-by-factory_1157-35351.jpg",
|
||||
alt: "Partner 5",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/realtor-startup-entrepreneur-office-hunt-touring-potential-property_482257-95097.jpg", imageAlt: "blueprint of new building project" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-two-architect-working-together-construction-site_23-2148203939.jpg", imageAlt: "construction workers building site" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/fourth-block-chernobyl-nuclear-power-plant-30-years-after-explosion-nuclear-power-plant_627829-11676.jpg", imageAlt: "commercial real estate development" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cityscape-wuxi_1127-4022.jpg", imageAlt: "modern luxury house construction" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/outdoor-construction-worker-wearing-safety-glasses-helmet_23-2148784052.jpg", imageAlt: "architectural plan on site" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
title="Decades of Construction Expertise"
|
||||
description="At Quiroz Construction, we pride ourselves on precision, durability, and customer satisfaction."
|
||||
bulletPoints={[
|
||||
{ title: "Expert Team", description: "Licensed and certified professionals." },
|
||||
{ title: "Quality Materials", description: "Sourcing only top-tier products." },
|
||||
{ title: "On-time Delivery", description: "Respecting your schedule and budget." }
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Decades of Construction Expertise"
|
||||
description="At Quiroz Construction, we pride ourselves on precision, durability, and customer satisfaction. From ground-up builds to intricate renovations, we execute every project with the highest standards."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Expert Team",
|
||||
description: "Licensed and certified professionals.",
|
||||
},
|
||||
{
|
||||
title: "Quality Materials",
|
||||
description: "Sourcing only top-tier products.",
|
||||
},
|
||||
{
|
||||
title: "On-time Delivery",
|
||||
description: "Respecting your schedule and budget.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/building-construction-worker-site-with-architect_23-2149124293.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Modern Luxury Home",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-apartment-building-facade-with-balconies-varied-hues_84443-73937.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Corporate Renovation",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/city-center-construction-work-urban-petronas_1122-1557.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Warehouse Development",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-building-seen-from_1203-1116.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Landscape Deck",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pots_23-2148013514.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Interior Remodel",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tiler-working-renovation-apartment_23-2149278564.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Commercial Structure",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-modern-construction-site_23-2151317233.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Modern Luxury Home", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/modern-apartment-building-facade-with-balconies-varied-hues_84443-73937.jpg" },
|
||||
{ id: "p2", name: "Corporate Renovation", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/city-center-construction-work-urban-petronas_1122-1557.jpg" },
|
||||
{ id: "p3", name: "Warehouse Development", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/construction-building-seen-from_1203-1116.jpg" }
|
||||
]}
|
||||
title="Our Featured Projects"
|
||||
description="Take a look at some of the high-quality residential and commercial structures we have delivered recently."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
title="Comprehensive Construction Solutions"
|
||||
description="We offer a full suite of services to ensure your construction journey is seamless from start to finish."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Foundation Work",
|
||||
description: "Solid groundwork for long-term stability.",
|
||||
bentoComponent: {
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Hammer,
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-view-house-model_23-2150761180.jpg",
|
||||
imageAlt: "blueprint of new building project",
|
||||
title: "Foundation Work", description: "Solid groundwork for long-term stability.", bentoComponent: { bentoComponent: "reveal-icon", icon: Hammer }
|
||||
},
|
||||
{
|
||||
title: "Framing & Structure",
|
||||
description: "Precision framing for reliable buildings.",
|
||||
bentoComponent: {
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Building,
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-check-long-haired-pretty-woman-gray-business-suit-hardhat-with-drawings-looking-brick-wall-standing-building-construction-outdoors_259150-57853.jpg?_wi=2",
|
||||
imageAlt: "blueprint of new building project",
|
||||
title: "Framing & Structure", description: "Precision framing for reliable buildings.", bentoComponent: { bentoComponent: "reveal-icon", icon: Building }
|
||||
},
|
||||
{
|
||||
title: "General Contracting",
|
||||
description: "Project management that keeps you updated.",
|
||||
bentoComponent: {
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: HardHat,
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/site-engineer-construction-site_53876-42834.jpg?_wi=2",
|
||||
imageAlt: "blueprint of new building project",
|
||||
},
|
||||
title: "General Contracting", description: "Project management that keeps you updated.", bentoComponent: { bentoComponent: "reveal-icon", icon: HardHat }
|
||||
}
|
||||
]}
|
||||
title="Comprehensive Construction Solutions"
|
||||
description="We offer a full suite of services to ensure your construction journey is seamless from start to finish."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15+",
|
||||
title: "Years Experience",
|
||||
description: "Industry expertise.",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "200+",
|
||||
title: "Successful Projects",
|
||||
description: "Completed safely.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Client Satisfaction",
|
||||
description: "Quality assured.",
|
||||
icon: Smile,
|
||||
},
|
||||
]}
|
||||
title="Proven Results"
|
||||
description="Our numbers speak to our commitment to excellence."
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "15+", title: "Years Experience", description: "Industry expertise.", icon: Award },
|
||||
{ id: "m2", value: "200+", title: "Successful Projects", description: "Completed safely.", icon: CheckCircle },
|
||||
{ id: "m3", value: "100%", title: "Client Satisfaction", description: "Quality assured.", icon: Smile }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Quiroz Construction handled our home renovation perfectly. Every detail was meticulously addressed. Highly recommend their professional team."
|
||||
rating={5}
|
||||
author="Elena Martinez"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/father-daughter-having-fun_23-2148969787.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/colleagues-examining-blueprint_23-2147808040.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/crazy-businessman-happy-expression_1194-3549.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/group-engineers-table-building_23-2147704207.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/lifestyle-portrait-businesswoman_23-2148139885.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/father-daughter-having-fun_23-2148969787.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/colleagues-examining-blueprint_23-2147808040.jpg", alt: "Client 2" }
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do you handle budget updates?",
|
||||
content: "We maintain transparent communication regarding all project costs.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Are you licensed?",
|
||||
content: "Yes, we are fully licensed and bonded for all types of construction.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How long do projects typically take?",
|
||||
content: "Timelines vary by complexity, but we provide detailed schedules upon agreement.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How do you handle budget updates?", content: "We maintain transparent communication regarding all project costs." },
|
||||
{ id: "f2", title: "Are you licensed?", content: "Yes, we are fully licensed and bonded for all types of construction." },
|
||||
{ id: "f3", title: "How long do projects typically take?", content: "Timelines vary by complexity, but we provide detailed schedules upon agreement." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get in Touch"
|
||||
title="Start Your Project"
|
||||
description="Ready to bring your architectural dreams to life? Contact our team for an estimate today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Us", href: "#" }]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -393,41 +176,9 @@ export default function LandingPage() {
|
||||
<FooterBaseCard
|
||||
logoText="Quiroz Construction Inc"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Foundation",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Contracting",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Projects", href: "#products" }] },
|
||||
{ title: "Services", items: [{ label: "Foundation", href: "#features" }, { label: "Contracting", href: "#features" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user