Merge version_2 into main #4
@@ -1,203 +1,207 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import Link from "next/link";
|
||||
import { Zap, Heart } from "lucide-react";
|
||||
|
||||
export default function AboutPage() {
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Portfolio", href: "/portfolio" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{ label: "Kitchen Renovation", href: "/services" },
|
||||
{ label: "Bathroom Renovation", href: "/services" },
|
||||
{ label: "Living Space Redesign", href: "/services" },
|
||||
{ label: "Commercial Renovation", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
import { ThemeProvider } from '@/components/theme';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import TextBox from '@/components/Textbox';
|
||||
|
||||
const page = () => {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLarge"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="Wah Wai"
|
||||
bottomLeftText="Singapore Based"
|
||||
bottomRightText="hello@wahwai.sg"
|
||||
/>
|
||||
</div>
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About', id: '/about' },
|
||||
{ name: 'Services', id: 'services' },
|
||||
{ name: 'Blog', id: 'blog' },
|
||||
{ name: 'Contact', id: 'contact' },
|
||||
]}
|
||||
button={{ text: 'Get Started', href: 'contact' }}
|
||||
/>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="Our Story"
|
||||
description={[
|
||||
"Wah Wai Renovation was founded with a simple mission: to deliver exceptional renovation services that transform homes and businesses into spaces our clients love.",
|
||||
"Our journey began over 15 years ago with a small team of passionate craftsmen. Today, we've grown to a full-service renovation company with architects, designers, project managers, and skilled tradespeople working in perfect harmony.",
|
||||
"Every project we undertake reflects our commitment to excellence, innovation, and client satisfaction. We believe that great renovations are built on trust, transparency, and meticulous attention to detail.",
|
||||
<div id="about-hero" data-section="about-hero" className="py-20 md:py-32">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{ type: 'text', content: 'Crafting Excellence Since' },
|
||||
{
|
||||
type: 'image',
|
||||
src: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=100&q=80',
|
||||
alt: 'Luxury brand mark',
|
||||
},
|
||||
{ type: 'text', content: '1995' },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Quote",
|
||||
href: "/contact",
|
||||
},
|
||||
{ text: 'Our Story', href: '#company-info' },
|
||||
{ text: 'Contact Us', href: 'contact' },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
showBorder={true}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="expertise" data-section="expertise">
|
||||
<MetricCardEleven
|
||||
title="Our Expertise"
|
||||
description="We bring together years of experience and a proven track record of successful projects across Singapore."
|
||||
tag="Why Choose Us"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
<div id="company-info" data-section="company-info" className="py-20 md:py-32">
|
||||
<TextBox
|
||||
title="About Our Company"
|
||||
description="We are dedicated to delivering exceptional luxury experiences through meticulous craftsmanship and timeless design. Our commitment to excellence has made us a trusted name in premium goods for three decades."
|
||||
textboxLayout="default"
|
||||
center={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="founder" data-section="founder" className="py-20 md:py-32">
|
||||
<TeamCardFive
|
||||
team={[
|
||||
{
|
||||
id: "1",
|
||||
value: "500+",
|
||||
title: "Projects Completed",
|
||||
description: "Successfully transformed homes and businesses since 2009.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-engineer-architect-looking-clipboard_23-2148233772.jpg?_wi=2",
|
||||
imageAlt: "Renovation projects completed",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "98%",
|
||||
title: "Client Satisfaction",
|
||||
description: "Our clients consistently rate us highly for quality and service.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-professional-engineers_23-2147704204.jpg?_wi=2",
|
||||
imageAlt: "Satisfied clients",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "15+",
|
||||
title: "Years Experience",
|
||||
description: "More than a decade of proven expertise in renovation industry.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-reading-blueprint-near-colleagues_23-2147808039.jpg?_wi=3",
|
||||
imageAlt: "Professional team experience",
|
||||
id: '1',
|
||||
name: 'Ken Richardson',
|
||||
role: 'Founder & Creative Director',
|
||||
imageSrc:
|
||||
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80',
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
title="Meet Our Founder"
|
||||
description="Ken Richardson's vision and passion for luxury have shaped our brand into what it is today."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="values" data-section="values">
|
||||
<TestimonialCardSixteen
|
||||
title="Our Values"
|
||||
description="These core principles guide everything we do at Wah Wai Renovation."
|
||||
tag="Core Values"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
<div id="team" data-section="team" className="py-20 md:py-32">
|
||||
<TeamCardFive
|
||||
team={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Quality",
|
||||
role: "Excellence in Execution",
|
||||
company: "Every Detail Matters",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-man-smiling-portrait_23-2149280769.jpg?_wi=2",
|
||||
imageAlt: "Quality commitment",
|
||||
id: '1',
|
||||
name: 'Sarah Chen',
|
||||
role: 'Head of Design',
|
||||
imageSrc:
|
||||
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&q=80',
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Transparency",
|
||||
role: "Open Communication",
|
||||
company: "No Hidden Costs",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2",
|
||||
imageAlt: "Transparency principle",
|
||||
id: '2',
|
||||
name: 'Michael Torres',
|
||||
role: 'Quality Assurance',
|
||||
imageSrc:
|
||||
'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&q=80',
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Innovation",
|
||||
role: "Modern Solutions",
|
||||
company: "Latest Techniques",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-standing-bu-office-building_1303-31732.jpg?_wi=2",
|
||||
imageAlt: "Innovation focus",
|
||||
id: '3',
|
||||
name: 'Emma Laurent',
|
||||
role: 'Brand Ambassador',
|
||||
imageSrc:
|
||||
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80',
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Reliability",
|
||||
role: "On-Time Delivery",
|
||||
company: "Trusted Partner",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-standing-outdoors_1262-20546.jpg?_wi=2",
|
||||
imageAlt: "Reliability commitment",
|
||||
id: '4',
|
||||
name: 'James Mitchell',
|
||||
role: 'Artisan Master',
|
||||
imageSrc:
|
||||
'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&q=80',
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "15+",
|
||||
label: "Years in Business",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
label: "Happy Clients",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Commitment",
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
title="Our Talented Team"
|
||||
description="Meet the exceptional people behind our luxury brand."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2024 Wah Wai Renovation. All rights reserved. Singapore."
|
||||
/>
|
||||
<div id="testimonials" data-section="testimonials" className="py-20 md:py-32">
|
||||
<div className="mb-16">
|
||||
<TextBox
|
||||
title="Customer Reviews"
|
||||
description="Hear from our satisfied clients who experience true luxury with every purchase."
|
||||
textboxLayout="default"
|
||||
center={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="The quality and craftsmanship are extraordinary. Every detail speaks to the dedication of your team. I am a loyal customer for life."
|
||||
rating={5}
|
||||
author="Margaret Ashford, Luxury Collector"
|
||||
avatars={[
|
||||
{
|
||||
src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&q=80',
|
||||
alt: 'Margaret Ashford',
|
||||
},
|
||||
{
|
||||
src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80',
|
||||
alt: 'Client',
|
||||
},
|
||||
{
|
||||
src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80',
|
||||
alt: 'Client',
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
|
||||
<TestimonialCardFifteen
|
||||
testimonial="An investment piece that will be treasured for generations. The elegance and sophistication are unmatched in today's market."
|
||||
rating={5}
|
||||
author="Richard Pemberton, Art Curator"
|
||||
avatars={[
|
||||
{
|
||||
src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&q=80',
|
||||
alt: 'Richard Pemberton',
|
||||
},
|
||||
{
|
||||
src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80',
|
||||
alt: 'Client',
|
||||
},
|
||||
{
|
||||
src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80',
|
||||
alt: 'Client',
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
|
||||
<TestimonialCardFifteen
|
||||
testimonial="Exceptional service matched with exceptional products. This is what true luxury is all about. Highly recommended to anyone with refined taste."
|
||||
rating={5}
|
||||
author="Victoria Sterling, Executive"
|
||||
avatars={[
|
||||
{
|
||||
src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&q=80',
|
||||
alt: 'Victoria Sterling',
|
||||
},
|
||||
{
|
||||
src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80',
|
||||
alt: 'Client',
|
||||
},
|
||||
{
|
||||
src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80',
|
||||
alt: 'Client',
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
||||
@@ -1,130 +1,156 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import Link from "next/link";
|
||||
import { Sparkles, Hammer, Award, Heart, Zap, HelpCircle } from "lucide-react";
|
||||
import { ThemeProvider } from '@/components/theme/ThemeProvider';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { ReactLenis } from '@/components/common/ReactLenis';
|
||||
import { Mail, Phone, MapPin } from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Portfolio", href: "/portfolio" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{ label: "Kitchen Renovation", href: "/services" },
|
||||
{ label: "Bathroom Renovation", href: "/services" },
|
||||
{ label: "Living Space Redesign", href: "/services" },
|
||||
{ label: "Commercial Renovation", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
<ReactLenis root>
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Services', id: '/#services' },
|
||||
{ name: 'About', id: '/#about' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
]}
|
||||
brandName="Wah Wai"
|
||||
bottomLeftText="Singapore Based"
|
||||
bottomRightText="hello@wahwai.sg"
|
||||
button={{ text: 'Get Started', href: '/contact' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get in Touch"
|
||||
description="Ready to transform your space? Contact us today for a free consultation and discover how we can bring your renovation dreams to life."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Your Phone Number",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "projectType",
|
||||
type: "text",
|
||||
placeholder: "Type of Project (e.g., Kitchen, Bathroom, Office)",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your renovation project...",
|
||||
rows: 5,
|
||||
required: true,
|
||||
}}
|
||||
buttonText="Send Inquiry"
|
||||
useInvertedBackground={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/working-from-home-time-management-concept_23-2149065331.jpg?_wi=5"
|
||||
imageAlt="renovation planning discussion interior"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
{/* Contact Form Section */}
|
||||
<div id="contact-form" data-section="contact-form" className="py-24">
|
||||
<ContactSplit
|
||||
tag="Get in Touch"
|
||||
title="Let's Start a Conversation"
|
||||
description="Whether you have a project in mind or want to discuss how we can help elevate your brand, we're here to listen. Reach out today."
|
||||
tagIcon={Mail}
|
||||
background={{ variant: 'sparkles-gradient' }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="/placeholders/placeholder5.jpg"
|
||||
mediaPosition="right"
|
||||
buttonText="Send Message"
|
||||
inputPlaceholder="your@email.com"
|
||||
onSubmit={(email) => console.log('Email submitted:', email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact Details Section */}
|
||||
<div id="contact-details" data-section="contact-details" className="py-24 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">Contact Information</h2>
|
||||
<p className="text-lg text-foreground/75 max-w-2xl mx-auto">
|
||||
Prefer to reach out directly? Here's how you can get in touch with our team.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
{/* Email */}
|
||||
<div className="p-8 rounded-xl bg-card border border-accent/20 text-center hover:border-accent/40 transition-colors">
|
||||
<div className="flex justify-center mb-4">
|
||||
<Mail className="w-8 h-8 text-primary-cta" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Email</h3>
|
||||
<p className="text-foreground/75">
|
||||
<a href="mailto:hello@webild.com" className="hover:text-primary-cta transition-colors">
|
||||
hello@webild.com
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-sm text-foreground/60 mt-2">We respond within 24 hours</p>
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div className="p-8 rounded-xl bg-card border border-accent/20 text-center hover:border-accent/40 transition-colors">
|
||||
<div className="flex justify-center mb-4">
|
||||
<Phone className="w-8 h-8 text-primary-cta" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Phone</h3>
|
||||
<p className="text-foreground/75">
|
||||
<a href="tel:+1234567890" className="hover:text-primary-cta transition-colors">
|
||||
+1 (234) 567-890
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-sm text-foreground/60 mt-2">Mon-Fri, 9am-6pm EST</p>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div className="p-8 rounded-xl bg-card border border-accent/20 text-center hover:border-accent/40 transition-colors">
|
||||
<div className="flex justify-center mb-4">
|
||||
<MapPin className="w-8 h-8 text-primary-cta" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Location</h3>
|
||||
<p className="text-foreground/75">
|
||||
San Francisco, CA<br />
|
||||
United States
|
||||
</p>
|
||||
<p className="text-sm text-foreground/60 mt-2">Available for remote work globally</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* WhatsApp Floating Button */}
|
||||
<div className="fixed bottom-8 right-8 z-50">
|
||||
<a
|
||||
href="https://wa.me/1234567890?text=Hello%20Webild%2C%20I%27d%20like%20to%20discuss%20a%20project%20with%20you."
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center w-14 h-14 bg-green-500 text-white rounded-full shadow-lg hover:bg-green-600 transition-all hover:scale-110 hover:shadow-xl group"
|
||||
aria-label="Chat on WhatsApp"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.67-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.076 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421-7.403h-.004a6.963 6.963 0 00-6.957 6.96c0 1.928.533 3.81 1.545 5.458L2.705 20.94a.75.75 0 00.961.961l5.06-1.257a6.963 6.963 0 005.457 1.545c3.859 0 6.957-3.099 6.957-6.958 0-1.86-.716-3.61-2.016-4.911-1.3-1.3-3.051-2.016-4.911-2.016z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2024 Wah Wai Renovation. All rights reserved. Singapore."
|
||||
columns={[
|
||||
{
|
||||
title: 'Product',
|
||||
items: [
|
||||
{ label: 'Features', href: '/#services' },
|
||||
{ label: 'Pricing', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{ label: 'About', href: '/#about' },
|
||||
{ label: 'Blog', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Legal',
|
||||
items: [
|
||||
{ label: 'Privacy', href: '#' },
|
||||
{ label: 'Terms', href: '#' },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 | Webild"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
1450
src/app/layout.tsx
1450
src/app/layout.tsx
File diff suppressed because it is too large
Load Diff
485
src/app/page.tsx
485
src/app/page.tsx
@@ -1,445 +1,72 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import Link from "next/link";
|
||||
import { Sparkles, Hammer, Award, Heart, Zap, HelpCircle } from "lucide-react";
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Portfolio", href: "/portfolio" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{ label: "Kitchen Renovation", href: "/services" },
|
||||
{ label: "Bathroom Renovation", href: "/services" },
|
||||
{ label: "Living Space Redesign", href: "/services" },
|
||||
{ label: "Commercial Renovation", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
import { ThemeProvider } from '@/components/theme/ThemeProvider';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { ReactLenis } from '@/components/common/ReactLenis';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
<ReactLenis root>
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Services', id: '#services' },
|
||||
{ name: 'About', id: '#about' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
]}
|
||||
brandName="Wah Wai"
|
||||
bottomLeftText="Singapore Based"
|
||||
bottomRightText="hello@wahwai.sg"
|
||||
button={{ text: 'Get Started', href: '/contact' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
title="Transform Your Space with Expert Renovation"
|
||||
description="Professional renovation contractor in Singapore specializing in residential and commercial projects. We bring your vision to life with quality craftsmanship and attention to detail."
|
||||
background={{ variant: "plain" }}
|
||||
tag="Premium Renovations"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-wearing-helmet_23-2149328066.jpg",
|
||||
imageAlt: "Modern luxury kitchen renovation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-engineer-architect-looking-clipboard_23-2148233772.jpg?_wi=1",
|
||||
imageAlt: "Professional renovation team at work",
|
||||
},
|
||||
]}
|
||||
rating={5}
|
||||
ratingText="Trusted by Singapore homeowners"
|
||||
<HeroLogo
|
||||
logoText="Webild"
|
||||
description="Building exceptional digital experiences with innovative design solutions"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Free Consultation",
|
||||
href: "/contact",
|
||||
},
|
||||
{
|
||||
text: "View Our Work",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{ text: 'Get Started', href: '/contact' },
|
||||
{ text: 'Learn More', href: '#about' },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="/placeholders/placeholder5.jpg"
|
||||
imageAlt="Hero background"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="About Wah Wai"
|
||||
description={[
|
||||
"With over 15 years of experience in the Singapore renovation industry, Wah Wai has established a reputation for delivering exceptional quality and customer satisfaction.",
|
||||
"Our team of skilled architects, designers, and craftsmen work collaboratively to transform spaces into beautiful, functional environments that exceed expectations.",
|
||||
"We pride ourselves on transparent communication, fair pricing, and meticulous project management from consultation to completion.",
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "/about",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
showBorder={true}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardOne
|
||||
title="Our Services"
|
||||
description="Comprehensive renovation solutions tailored to your needs and budget"
|
||||
tag="What We Offer"
|
||||
tagIcon={Hammer}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Kitchen Renovation",
|
||||
description: "Modern kitchen designs with premium materials and smart storage solutions.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-design-interior_23-2150954770.jpg?_wi=1",
|
||||
button: {
|
||||
text: "Explore",
|
||||
href: "/services",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Bathroom Upgrade",
|
||||
description: "Luxurious bathroom renovations with spa-like aesthetics and functionality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-bathroom-with-bathtub-shower_23-2151995358.jpg?_wi=1",
|
||||
button: {
|
||||
text: "Explore",
|
||||
href: "/services",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Living Space Redesign",
|
||||
description: "Transform your living areas into stylish, comfortable gathering spaces.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/office-workers-collaborating-together_23-2147668764.jpg?_wi=1",
|
||||
button: {
|
||||
text: "Explore",
|
||||
href: "/services",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Commercial Renovation",
|
||||
description: "Office and retail space renovation with modern design and functionality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899443.jpg?_wi=1",
|
||||
button: {
|
||||
text: "Explore",
|
||||
href: "/services",
|
||||
},
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardTwo
|
||||
title="Our Portfolio"
|
||||
description="Showcase of our finest renovation projects across Singapore"
|
||||
tag="Recent Projects"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Wah Wai",
|
||||
name: "Luxury Marina Bay Apartment",
|
||||
price: "Completed 2024",
|
||||
rating: 5,
|
||||
reviewCount: "12.8k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-file-posing-office_23-2147668798.jpg?_wi=1",
|
||||
imageAlt: "Luxury apartment renovation",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Wah Wai",
|
||||
name: "Tech Startup Office Renovation",
|
||||
price: "Completed 2024",
|
||||
rating: 5,
|
||||
reviewCount: "9.3k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899443.jpg?_wi=2",
|
||||
imageAlt: "Commercial office space renovation",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Wah Wai",
|
||||
name: "HDB Bukit Merah Modernization",
|
||||
price: "Completed 2023",
|
||||
rating: 5,
|
||||
reviewCount: "15.2k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coworkers-table-working-with-papers_23-2147668784.jpg?_wi=1",
|
||||
imageAlt: "HDB flat modern renovation",
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="Client Stories"
|
||||
description="Hear from our satisfied clients about their renovation experience with Wah Wai"
|
||||
tag="Testimonials"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Rachel Tan",
|
||||
role: "Homeowner",
|
||||
company: "Singapore",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-man-smiling-portrait_23-2149280769.jpg?_wi=1",
|
||||
imageAlt: "Rachel Tan testimonial",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "David Lim",
|
||||
role: "Business Owner",
|
||||
company: "Singapore",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1",
|
||||
imageAlt: "David Lim testimonial",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Priya Kumar",
|
||||
role: "Interior Designer",
|
||||
company: "Singapore",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-standing-bu-office-building_1303-31732.jpg?_wi=1",
|
||||
imageAlt: "Priya Kumar testimonial",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "James Wong",
|
||||
role: "Architect",
|
||||
company: "Singapore",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-standing-outdoors_1262-20546.jpg?_wi=1",
|
||||
imageAlt: "James Wong testimonial",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "500+",
|
||||
label: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "98%",
|
||||
label: "Client Satisfaction",
|
||||
},
|
||||
{
|
||||
value: "15+",
|
||||
label: "Years Experience",
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<MetricCardEleven
|
||||
title="Our Renovation Process"
|
||||
description="A systematic approach to ensure quality results and client satisfaction at every stage"
|
||||
tag="How We Work"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "Step 1",
|
||||
title: "Free Consultation",
|
||||
description: "We discuss your vision, requirements, and budget.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-reading-blueprint-near-colleagues_23-2147808039.jpg?_wi=1",
|
||||
imageAlt: "Renovation consultation meeting",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "Step 2",
|
||||
title: "Design & Planning",
|
||||
description: "Our team creates detailed designs and project timelines.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-reading-blueprint-near-colleagues_23-2147808039.jpg?_wi=2",
|
||||
imageAlt: "Design planning process",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "Step 3",
|
||||
title: "Expert Execution",
|
||||
description: "Skilled craftsmen deliver quality work with transparent updates.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-professional-engineers_23-2147704204.jpg?_wi=1",
|
||||
imageAlt: "Renovation work in progress",
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our renovation services"
|
||||
tag="Support"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How long does a typical renovation project take?",
|
||||
content: "Project duration depends on scope and complexity. A typical HDB 3-room flat takes 2-3 months, while a larger residential project may take 4-6 months. We provide detailed timelines during the consultation phase.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you provide warranty on renovation work?",
|
||||
content: "Yes, we offer a 2-year workmanship warranty on all renovation services. Additionally, materials come with their respective manufacturer warranties.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can you work within a specific budget?",
|
||||
content: "Absolutely. We believe in transparent pricing and work with clients to optimize their budget without compromising quality. We provide detailed quotes upfront.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Do you handle all necessary permits and approvals?",
|
||||
content: "Yes, we manage all the necessary MCST and HDB permits required for your renovation project in Singapore, ensuring compliance with regulations.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "What is your approach to sustainability?",
|
||||
content: "We prioritize eco-friendly materials and waste management practices. We can recommend sustainable options that align with your environmental values.",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "How do I get started with a renovation project?",
|
||||
content: "Simply contact us through our website or call for a free consultation. We'll discuss your needs and provide a detailed proposal at no obligation.",
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/working-from-home-time-management-concept_23-2149065331.jpg?_wi=1"
|
||||
imageAlt="Renovation planning consultation"
|
||||
mediaAnimation="slide-up"
|
||||
faqsAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactSplitForm
|
||||
title="Ready to Start Your Renovation?"
|
||||
description="Let's discuss your project requirements and bring your vision to life. Fill out the form below and we'll get back to you within 24 hours."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Your Phone Number",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "projectType",
|
||||
type: "text",
|
||||
placeholder: "Type of Project",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your project...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
buttonText="Get Started"
|
||||
useInvertedBackground={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/working-from-home-time-management-concept_23-2149065331.jpg?_wi=2"
|
||||
imageAlt="Contact us for renovation consultation"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2024 Wah Wai Renovation. All rights reserved. Singapore."
|
||||
columns={[
|
||||
{
|
||||
title: 'Product',
|
||||
items: [
|
||||
{ label: 'Features', href: '#services' },
|
||||
{ label: 'Pricing', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{ label: 'About', href: '#about' },
|
||||
{ label: 'Blog', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Legal',
|
||||
items: [
|
||||
{ label: 'Privacy', href: '#' },
|
||||
{ label: 'Terms', href: '#' },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 | Webild"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
77
src/app/projects/page.tsx
Normal file
77
src/app/projects/page.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/context/ThemeContext";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
||||
import { ImageIcon, Zap } from "lucide-react";
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const projects = [
|
||||
{
|
||||
title: "Modern Residential Complex", description: "Luxury residential development featuring before and after transformation of urban landscape into premium living spaces.", icon: ImageIcon,
|
||||
mediaItems: [
|
||||
{ imageSrc: "https://images.unsplash.com/photo-1590129476917-a3a90bc9d798?w=800&q=80", imageAlt: "Before - Urban site" },
|
||||
{ imageSrc: "https://images.unsplash.com/photo-1574901755052-e0c8c1f7d90e?w=800&q=80", imageAlt: "After - Completed residential complex" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Commercial Office Building", description: "Contemporary office space redesign showcasing architectural excellence and sustainable design principles.", icon: Zap,
|
||||
mediaItems: [
|
||||
{ imageSrc: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80", imageAlt: "Before - Original office building" },
|
||||
{ imageSrc: "https://images.unsplash.com/photo-1497366216548-495affb08cdc?w=800&q=80", imageAlt: "After - Modern renovated office" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Boutique Retail Space", description: "High-end retail transformation featuring luxury minimal aesthetic and cutting-edge interior design.", icon: ImageIcon,
|
||||
mediaItems: [
|
||||
{ imageSrc: "https://images.unsplash.com/photo-1493857671505-72967e2e2760?w=800&q=80", imageAlt: "Before - Basic retail space" },
|
||||
{ imageSrc: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800&q=80", imageAlt: "After - Luxurious retail experience" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Wellness Spa Retreat", description: "Serene wellness center renovation emphasizing clean lines, natural materials, and tranquil atmospheres.", icon: Zap,
|
||||
mediaItems: [
|
||||
{ imageSrc: "https://images.unsplash.com/photo-1544161515-81e2b6b773b9?w=800&q=80", imageAlt: "Before - Traditional spa design" },
|
||||
{ imageSrc: "https://images.unsplash.com/photo-1584622281867-8a748c1f66f5?w=800&q=80", imageAlt: "After - Modern minimal spa" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{ text: "Get Started", href: "contact" }}
|
||||
/>
|
||||
<main className="min-h-screen w-full">
|
||||
<section id="projects" data-section="projects" className="py-24">
|
||||
<FeatureCardTwentyFive
|
||||
features={projects}
|
||||
animationType="slide-up"
|
||||
title="Our Projects"
|
||||
description="Explore our portfolio of luxury minimal transformations featuring before and after photography"
|
||||
tag="Portfolio"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,139 +1,118 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import Link from "next/link";
|
||||
import { Hammer } from "lucide-react";
|
||||
|
||||
export default function ServicesPage() {
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Portfolio", href: "/portfolio" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Kitchen Renovation", href: "/services" },
|
||||
{ label: "Bathroom Renovation", href: "/services" },
|
||||
{ label: "Living Space Redesign", href: "/services" },
|
||||
{ label: "Commercial Renovation", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
import { ThemeProvider } from '@/components/ThemeProvider';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
|
||||
export default function Services() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="Wah Wai"
|
||||
bottomLeftText="Singapore Based"
|
||||
bottomRightText="hello@wahwai.sg"
|
||||
/>
|
||||
</div>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Services', id: '/services' },
|
||||
]}
|
||||
brandName="Webild"
|
||||
button={{ text: 'Get Started', href: '#' }}
|
||||
/>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardOne
|
||||
title="Our Comprehensive Services"
|
||||
description="From concept to completion, we offer a full range of renovation services tailored to meet your unique needs and budget."
|
||||
tag="What We Offer"
|
||||
tagIcon={Hammer}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
<PricingCardNine
|
||||
plans={[
|
||||
{
|
||||
title: "Kitchen Renovation", description: "Transform your kitchen with modern designs, premium cabinetry, and state-of-the-art appliances. We specialize in layout optimization and smart storage solutions.", imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-design-interior_23-2150954770.jpg", button: {
|
||||
text: "Learn More", href: "/contact"},
|
||||
id: 'hdb',
|
||||
title: 'HDB Renovation',
|
||||
price: 'Custom',
|
||||
period: 'Quote',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&h=400&fit=crop',
|
||||
imageAlt: 'HDB renovation project',
|
||||
button: { text: 'Request Quote', href: '#' },
|
||||
features: [
|
||||
'Complete space optimization',
|
||||
'Modern fixtures and finishes',
|
||||
'Expert space planning',
|
||||
'Quality materials throughout',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Bathroom Upgrade", description: "Create your spa-like retreat with luxurious bathroom renovations featuring premium fixtures, elegant tiling, and modern lighting design.", imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-bathroom-with-bathtub-shower_23-2151995358.jpg", button: {
|
||||
text: "Learn More", href: "/contact"},
|
||||
id: 'condo',
|
||||
title: 'Condo Renovation',
|
||||
price: 'Custom',
|
||||
period: 'Quote',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1565183928294-7563f3ce68c5?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Condo renovation project',
|
||||
button: { text: 'Request Quote', href: '#' },
|
||||
features: [
|
||||
'Luxury condo transformations',
|
||||
'Premium finishes and fixtures',
|
||||
'Structural excellence',
|
||||
'Modern design integration',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Living Space Redesign", description: "Maximize comfort and style in your living areas. From open-plan layouts to intimate gathering spaces, we create environments that enhance your lifestyle.", imageSrc: "http://img.b2bpic.net/free-photo/office-workers-collaborating-together_23-2147668764.jpg", button: {
|
||||
text: "Learn More", href: "/contact"},
|
||||
id: 'carpentry',
|
||||
title: 'Carpentry Services',
|
||||
price: 'Custom',
|
||||
period: 'Quote',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1565614666747-d8a40e16481f?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Carpentry craftsmanship',
|
||||
button: { text: 'Request Quote', href: '#' },
|
||||
features: [
|
||||
'Custom woodwork design',
|
||||
'Fine joinery techniques',
|
||||
'Built-in storage solutions',
|
||||
'Premium wood selection',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Commercial Renovation", description: "Professional office and retail space renovations designed to boost productivity and create lasting impressions on clients and employees.", imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899443.jpg?_wi=1", button: {
|
||||
text: "Learn More", href: "/contact"},
|
||||
id: 'kitchen',
|
||||
title: 'Kitchen Remodel',
|
||||
price: 'Custom',
|
||||
period: 'Quote',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Modern kitchen renovation',
|
||||
button: { text: 'Request Quote', href: '#' },
|
||||
features: [
|
||||
'State-of-the-art appliances',
|
||||
'Custom cabinetry design',
|
||||
'Luxury countertops',
|
||||
'Professional layout planning',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'bathroom',
|
||||
title: 'Bathroom Remodel',
|
||||
price: 'Custom',
|
||||
period: 'Quote',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Luxury bathroom design',
|
||||
button: { text: 'Request Quote', href: '#' },
|
||||
features: [
|
||||
'Spa-like ambiance creation',
|
||||
'Premium fixtures and tiles',
|
||||
'Smart storage solutions',
|
||||
'Water-resistant design',
|
||||
],
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
title="Our Premium Services"
|
||||
description="Discover our comprehensive range of luxury renovation services tailored to transform your space with elegance and excellence."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="service-cta" data-section="service-cta">
|
||||
<ContactSplitForm
|
||||
title="Discuss Your Project"
|
||||
description="Ready to bring your renovation vision to life? Our expert team is here to discuss your requirements, provide honest advice, and deliver exceptional results."
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
{
|
||||
name: "phone", type: "tel", placeholder: "Your Phone Number", required: true,
|
||||
},
|
||||
{
|
||||
name: "service", type: "text", placeholder: "Service Interested In", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "details", placeholder: "Describe your project in detail...", rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
buttonText="Request Consultation"
|
||||
useInvertedBackground={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/working-from-home-time-management-concept_23-2149065331.jpg?_wi=1"
|
||||
imageAlt="Service consultation planning"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2024 Wah Wai Renovation. All rights reserved. Singapore."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--background: #f5f1ed;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1f514c;
|
||||
--foreground: #1a1a1a;
|
||||
--primary-cta: #d4af37;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #2d2d2d;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #35c18b;
|
||||
--background-accent: #ecebe4;
|
||||
--accent: #8b7355;
|
||||
--background-accent: #e8e0d8;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user