Files
cdb1cd93-730e-4367-8f5b-9fc…/src/app/projects/page.tsx

178 lines
8.6 KiB
TypeScript

"use client";
import Link from "next/link";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { ImageIcon, Zap, Phone } from "lucide-react";
export default function ProjectsPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Projects", id: "/projects" },
{ name: "About", id: "/about" },
];
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="smallMedium"
sizing="large"
background="floatingGradient"
cardStyle="soft-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Startec Construction"
navItems={navItems.map((item) => ({
name: item.name,
id: item.id === "/" ? "/" : item.id,
}))}
button={{
text: "Get Consultation", href: "/contact"}}
animateOnLoad={true}
navItemClassName="text-sm font-medium tracking-wide hover:text-primary-cta transition-colors"
buttonClassName="bg-primary-cta hover:bg-opacity-90 text-primary-cta-text"
buttonTextClassName="font-semibold"
/>
</div>
{/* Projects Gallery */}
<div id="projects" data-section="projects">
<ProductCardOne
title="Our Complete Project Gallery"
description="Browse our extensive portfolio of completed renovations. Each project showcases our commitment to excellence, innovative design solutions, and premium craftsmanship across HDB, condo, and luxury residential spaces."
tag="Before & After Gallery"
tagIcon={ImageIcon}
tagAnimation="slide-up"
products={[
{
id: "1", name: "Modern HDB Transformation", price: "Completed 2024", imageSrc: "http://img.b2bpic.net/free-photo/creative-people-talking-office_23-2147668785.jpg", imageAlt: "Modern HDB renovation project"},
{
id: "2", name: "Luxury Condo Makeover", price: "Completed 2024", imageSrc: "http://img.b2bpic.net/free-photo/modern-lounge-room-interior-office-building_1262-12374.jpg", imageAlt: "Luxury condo renovation project"},
{
id: "3", name: "Premium Kitchen Suite", price: "Completed 2023", imageSrc: "http://img.b2bpic.net/free-photo/couple-enjoying-quality-time-home_23-2149262112.jpg", imageAlt: "Premium kitchen renovation project"},
{
id: "4", name: "Spa-Inspired Bathroom", price: "Completed 2023", imageSrc: "http://img.b2bpic.net/free-photo/backlit-mirror-minimalist-sink-spa-bathroom_169016-68891.jpg", imageAlt: "Luxury bathroom renovation project"},
{
id: "5", name: "Custom Carpentry Showcase", price: "Completed 2024", imageSrc: "http://img.b2bpic.net/free-photo/man-starting-own-small-business-home-workshop_1163-3122.jpg", imageAlt: "Custom carpentry project showcase"},
{
id: "6", name: "Complete Home Renovation", price: "Completed 2023", imageSrc: "http://img.b2bpic.net/free-photo/interior-shot-luxurious-house-dining-room_181624-10412.jpg", imageAlt: "Complete home renovation project"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="bento-grid"
/>
</div>
{/* Project Impact Metrics */}
<div id="metrics" data-section="metrics">
<MetricCardSeven
title="Our Project Excellence"
description="Demonstrating our commitment to quality, timely delivery, and customer satisfaction across every renovation project we undertake."
tag="Project Achievements"
tagIcon={Zap}
tagAnimation="slide-up"
metrics={[
{
id: "1", value: "150+", title: "Successful Projects", items: [
"HDB renovations completed", "Condo transformations", "Luxury home upgrades"],
},
{
id: "2", value: "98%", title: "Client Satisfaction", items: [
"5-star reviews and ratings", "Repeat clients and referrals", "Long-term relationships"],
},
{
id: "3", value: "10+", title: "Years Experience", items: [
"Industry expertise and knowledge", "Award-winning designs", "Proven track record"],
},
{
id: "4", value: "20+", title: "Design Awards", items: [
"Recognition for excellence", "Innovation in renovation", "Premium craftsmanship accolades"],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
{/* Contact Section */}
<div id="contact" data-section="contact">
<ContactCenter
tag="Get Started"
title="Interested in Your Next Renovation?"
description="Browse our projects for inspiration and then schedule a consultation with our design team. Let's discuss how we can transform your space into something extraordinary."
tagIcon={Phone}
tagAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Your email address"
buttonText="Get Free Consultation"
termsText="We respect your privacy. We'll only contact you regarding your renovation consultation."
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/interior-shot-luxurious-house-dining-room_181624-10412.jpg"
imageAlt="Luxury home interior renovation inspiration"
logoText="Startec Construction Pte Ltd"
copyrightText="© 2024 Startec Construction. All rights reserved. Singapore's Premium Renovation Partner."
columns={[
{
title: "Services", items: [
{
label: "HDB Renovation", href: "/services"},
{
label: "Condo Renovation", href: "/services"},
{
label: "Kitchen Remodel", href: "/services"},
{
label: "Bathroom Remodel", href: "/services"},
{
label: "Carpentry Services", href: "/services"},
],
},
{
title: "Company", items: [
{
label: "About Us", href: "/about"},
{
label: "Our Projects", href: "/projects"},
{
label: "Contact Us", href: "/contact"},
{
label: "Testimonials", href: "/"},
],
},
{
title: "Connect", items: [
{
label: "WhatsApp", href: "https://wa.me/6581234567"},
{
label: "Email", href: "mailto:info@startec.sg"},
{
label: "Instagram", href: "https://instagram.com"},
{
label: "Facebook", href: "https://facebook.com"},
],
},
]}
/>
</div>
</ThemeProvider>
);
}