Upload Next.js project
@@ -0,0 +1,264 @@
|
|||||||
|
export default function AboutPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section
|
||||||
|
className="hero-remodel-section"
|
||||||
|
style={{ backgroundImage: "url(./assets/images/aboutback.png)" }}
|
||||||
|
>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row align-items-end">
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="hero-remodel-content">
|
||||||
|
<span className="hero-remodel-subtitle">About Us</span>
|
||||||
|
<h1 className="hero-remodel-title">
|
||||||
|
Building Tomorrow's Homes Today
|
||||||
|
</h1>
|
||||||
|
<p className="hero-remodel-text">
|
||||||
|
Where luxury construction meets intelligent living. We create
|
||||||
|
extraordinary spaces that redefine modern living through
|
||||||
|
innovation and craftsmanship.{" "}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="about-section py-5">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row align-items-center">
|
||||||
|
{/* LEFT CONTENT */}
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div>
|
||||||
|
<span className="tag">What this Gives you</span>
|
||||||
|
<h2 style={{ color: "black" }}>
|
||||||
|
About <span>HouseCoin</span>{" "}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p className="section-desc">
|
||||||
|
HouseCoin is a premium construction and smart home company dedicated
|
||||||
|
to creating exceptional living spaces that blend luxury with
|
||||||
|
cutting-edge technology. For over 15 years, we've been at the
|
||||||
|
forefront of architectural innovation.
|
||||||
|
</p>
|
||||||
|
<p className="section-desc marginabout">
|
||||||
|
Our team of expert architects, engineers, and craftsmen work in
|
||||||
|
harmony to transform your vision into reality, ensuring every detail
|
||||||
|
reflects your lifestyle and aspirations.
|
||||||
|
</p>
|
||||||
|
<div className="features d-flex gap-4 mt-3">
|
||||||
|
<div className="feature-item">
|
||||||
|
<img src="assets/images/tickabout.svg" alt="" /> Premium Quality
|
||||||
|
</div>
|
||||||
|
<div className="feature-item">
|
||||||
|
<img src="assets/images/tickabout.svg" alt="" /> Smart Technology
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* RIGHT IMAGES */}
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="row g-3 align-items-end">
|
||||||
|
<div className="col-6">
|
||||||
|
<img
|
||||||
|
src="assets/images/Aboutleft.png"
|
||||||
|
className="img-fluid rounded custom-img small-img"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-6">
|
||||||
|
<img
|
||||||
|
src="assets/images/Aboutright.png"
|
||||||
|
className="img-fluid rounded custom-img large-img"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="kitchen-transform-section pillars-section">
|
||||||
|
<div className="container">
|
||||||
|
{/* Heading */}
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-12 text-center">
|
||||||
|
<div className="services-top">
|
||||||
|
<div style={{ width: "100%" }}>
|
||||||
|
<span className="tag">Values Shape Everything.</span>
|
||||||
|
<h2>
|
||||||
|
Guiding principles that <span> drive our excellence</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Cards */}
|
||||||
|
<div className="row g-4 justify-content-center">
|
||||||
|
{/* Card 1 */}
|
||||||
|
<div className="col-lg-4 col-md-6">
|
||||||
|
<div className="pillar-card">
|
||||||
|
<div className="stepnumber">Mission </div>
|
||||||
|
<div className="icon-box">
|
||||||
|
<img src="assets/images/icons/mission.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<h5>Focused on Impact</h5>
|
||||||
|
<p>
|
||||||
|
Our mission is to deliver high-quality, transparent, and
|
||||||
|
technology-driven construction solutions that create meaningful
|
||||||
|
living spaces.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Card 2 */}
|
||||||
|
<div className="col-lg-4 col-md-6">
|
||||||
|
<div className="pillar-card">
|
||||||
|
<div className="stepnumber">Vision </div>
|
||||||
|
<div className="icon-box">
|
||||||
|
<img src="assets/images/icons/vision.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<h5>Future of Smart Living</h5>
|
||||||
|
<p>
|
||||||
|
Our vision is to redefine modern homes through innovation, smart
|
||||||
|
technology, and premium design experiences.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Card 3 */}
|
||||||
|
<div className="col-lg-4 col-md-6">
|
||||||
|
<div className="pillar-card">
|
||||||
|
<div className="stepnumber">Goals</div>
|
||||||
|
<div className="icon-box">
|
||||||
|
<img src="assets/images/icons/goal.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<h5>Driven by Growth</h5>
|
||||||
|
<p>
|
||||||
|
We aim to scale innovation, deliver consistent quality, and ensure
|
||||||
|
long-term client satisfaction across every project.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="core-values py-5">
|
||||||
|
<div className="container text-center">
|
||||||
|
<div className="services-top">
|
||||||
|
<div style={{ width: "100%" }}>
|
||||||
|
<span className="tag">Core Values</span>
|
||||||
|
<h2>
|
||||||
|
The foundation of <span>everything we do</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row align-items-center">
|
||||||
|
{/* LEFT SIDE */}
|
||||||
|
<div className="col-lg-4">
|
||||||
|
<div className="value-box rightside mb-5">
|
||||||
|
<div className="icon-box">
|
||||||
|
<img src="assets/images/icons/Automated.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<h5>Quality Assured</h5>
|
||||||
|
<p>
|
||||||
|
We never compromise on quality, ensuring every project meets the
|
||||||
|
highest standards.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="value-box rightside">
|
||||||
|
<div className="icon-box">
|
||||||
|
<img src="assets/images/icons/Automated.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<h5>Innovation First</h5>
|
||||||
|
<p>
|
||||||
|
Embracing cutting-edge technology and smart home solutions for
|
||||||
|
modern living.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* CENTER IMAGE */}
|
||||||
|
<div className="col-lg-4 mb-4 mb-lg-0">
|
||||||
|
<img
|
||||||
|
src="assets/images/Core.png"
|
||||||
|
className="img-fluid rounded main-img"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* RIGHT SIDE */}
|
||||||
|
<div className="col-lg-4">
|
||||||
|
<div className="value-box rightleft mb-5">
|
||||||
|
<div className="icon-box">
|
||||||
|
<img src="assets/images/icons/Automated.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<h5>Client Focused</h5>
|
||||||
|
<p>
|
||||||
|
Your vision is our mission. We build relationships alongside
|
||||||
|
structures with trust always.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="value-box rightleft">
|
||||||
|
<div className="icon-box">
|
||||||
|
<img src="assets/images/icons/Automated.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<h5>Sustainable Growth</h5>
|
||||||
|
<p>
|
||||||
|
Eco-friendly practices and sustainable materials for a better
|
||||||
|
tomorrow future growth vision.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="smart-home">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row align-items-center">
|
||||||
|
{/* LEFT IMAGES */}
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="row g-3">
|
||||||
|
<div className="col-6">
|
||||||
|
<img
|
||||||
|
src="assets/images/abtleft.png"
|
||||||
|
className="img-fluid rounded smart-img small-img"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-6">
|
||||||
|
<img
|
||||||
|
src="assets/images/abtright.png"
|
||||||
|
className="img-fluid rounded smart-img large-img"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* RIGHT CONTENT */}
|
||||||
|
<div className="col-lg-6 wraptrack">
|
||||||
|
<h2 className="section-title mb-3">Smart Home Technology</h2>
|
||||||
|
<p className="section-desc mb-4">
|
||||||
|
We integrate the latest smart home technology into every project,
|
||||||
|
ensuring your home is not just beautiful, but intelligent and
|
||||||
|
efficient.
|
||||||
|
</p>
|
||||||
|
<div className="feature-box mb-3">
|
||||||
|
<h6>Energy Management</h6>
|
||||||
|
<p>
|
||||||
|
Advanced systems that optimize energy consumption and reduce
|
||||||
|
costs.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="feature-box mb-3">
|
||||||
|
<h6>Automated Systems</h6>
|
||||||
|
<p>
|
||||||
|
Control lighting, climate, security, and entertainment with ease.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="feature-box">
|
||||||
|
<h6>Advanced Security</h6>
|
||||||
|
<p>State-of-the-art security systems for complete peace of mind.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,151 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function BlogDetails() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* HERO SECTION */}
|
||||||
|
<section
|
||||||
|
className="hero-remodel-section"
|
||||||
|
style={{
|
||||||
|
backgroundImage: "url(/assets/images/Sunroomsbreadcamp.png)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row align-items-end">
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="hero-remodel-content">
|
||||||
|
<span className="hero-remodel-subtitle">
|
||||||
|
Blogs Details
|
||||||
|
</span>
|
||||||
|
<h1 className="hero-remodel-title">
|
||||||
|
Expert Ideas, Trends & Guides for Smarter Living
|
||||||
|
</h1>
|
||||||
|
<p className="hero-remodel-text">
|
||||||
|
Stay updated with the latest trends in home remodeling, smart
|
||||||
|
living, and modern design. Our blog brings you expert insights.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-6 endbreadcamp">
|
||||||
|
<Link href="/contact" className="btn-primary-custom">
|
||||||
|
Schedule Consultation
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* BLOG DETAILS */}
|
||||||
|
<section className="blog-details-section">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
|
||||||
|
{/* LEFT CONTENT */}
|
||||||
|
<div className="col-lg-7">
|
||||||
|
<div className="blog-content">
|
||||||
|
|
||||||
|
<div className="blog-meta mb-3">
|
||||||
|
<span>12 Feb 2026</span> | <span>HouseCoin Team</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="blog-title">
|
||||||
|
Smart Kitchen Remodeling Ideas to Elevate Functionality and Style
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
A well-designed kitchen is the heart of every modern home. At HouseCoin, we believe that kitchen remodeling is not just about aesthetics—it’s about enhancing functionality, improving workflow, and creating a space that reflects your lifestyle. From smart storage solutions to premium finishes, every detail plays a crucial role in transforming your kitchen into a highly efficient and elegant space.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
With the integration of smart home technology, today’s kitchens are more advanced than ever. Features like automated lighting, touchless faucets, and energy-efficient appliances not only add convenience but also contribute to sustainable living. Our expert team ensures that every kitchen renovation is tailored to meet both your design preferences and practical needs.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Image
|
||||||
|
src="/assets/images/blog1.png"
|
||||||
|
alt="kitchen remodel"
|
||||||
|
width={800}
|
||||||
|
height={500}
|
||||||
|
className="img-fluid rounded my-4"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<h4>Key benefits of kitchen remodeling</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Maximizes space with smart storage and layout planning</li>
|
||||||
|
<li>Enhances home value with modern and premium finishes</li>
|
||||||
|
<li>Improves energy efficiency with advanced appliances</li>
|
||||||
|
<li>Creates a seamless blend of style and functionality</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4>Building a future-ready living space</h4>
|
||||||
|
<p>
|
||||||
|
Investing in a kitchen remodel is a step toward a smarter and more comfortable lifestyle. At HouseCoin, we combine innovative design, quality craftsmanship, and cutting-edge technology to deliver spaces that are built to last. Whether you're planning a complete renovation or a simple upgrade, our team ensures a smooth, transparent, and hassle-free experience from start to finish.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-8">
|
||||||
|
<Image
|
||||||
|
src="/assets/images/blog1.png"
|
||||||
|
alt="kitchen remodel"
|
||||||
|
width={500}
|
||||||
|
height={300}
|
||||||
|
className="img-fluid rounded my-4"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-4">
|
||||||
|
<Image
|
||||||
|
src="/assets/images/blog1.png"
|
||||||
|
alt="kitchen remodel"
|
||||||
|
width={300}
|
||||||
|
height={300}
|
||||||
|
className="img-fluid rounded my-4"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* RIGHT SIDEBAR */}
|
||||||
|
<div className="col-lg-5">
|
||||||
|
<div className="sidebar-sticky">
|
||||||
|
|
||||||
|
<div className="sidebar-box">
|
||||||
|
<h5 className="sidebar-title">Popular Posts</h5>
|
||||||
|
|
||||||
|
<div className="post-item d-flex mb-3">
|
||||||
|
<Image src="/assets/images/blog1.png" alt="" width={80} height={80} />
|
||||||
|
<div>
|
||||||
|
<span className="date">18 Feb 2026</span>
|
||||||
|
<p>How Smart Home Technology is Transforming Modern Living</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="post-item d-flex mb-3">
|
||||||
|
<Image src="/assets/images/blog3.png" alt="" width={80} height={80} />
|
||||||
|
<div>
|
||||||
|
<span className="date">25 Feb 2026</span>
|
||||||
|
<p>Sunroom Design Ideas to Brighten Your Living Space</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="post-item d-flex">
|
||||||
|
<Image src="/assets/images/blog2.png" alt="" width={80} height={80} />
|
||||||
|
<div>
|
||||||
|
<span className="date">03 Mar 2026</span>
|
||||||
|
<p>Outdoor Living Spaces: Create the Perfect Backyard Retreat</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Contact from "@/component/Contact";
|
||||||
|
export default function BlogPage() {
|
||||||
|
const blogs = [
|
||||||
|
{
|
||||||
|
img: "/assets/images/blog1.png",
|
||||||
|
date: "12 Feb 2026",
|
||||||
|
title: "Top Kitchen Remodeling Ideas to Maximize Space & Style",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/assets/images/blog2.png",
|
||||||
|
date: "18 Feb 2026",
|
||||||
|
title: "How Smart Home Technology is Transforming Modern Living",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/assets/images/blog3.png",
|
||||||
|
date: "25 Feb 2026",
|
||||||
|
title: "Sunroom Design Ideas to Brighten Your Living Space",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/assets/images/blog4.png",
|
||||||
|
date: "03 Mar 2026",
|
||||||
|
title: "Outdoor Living Spaces: Create the Perfect Backyard Retreat",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/assets/images/blog1.png",
|
||||||
|
date: "10 Mar 2026",
|
||||||
|
title: "Budget-Friendly Renovation Tips Without Compromising Quality",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/assets/images/blog4.png",
|
||||||
|
date: "18 Mar 2026",
|
||||||
|
title: "Step-by-Step Guide to Planning Your Dream Home Remodel",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* HERO SECTION */}
|
||||||
|
<section
|
||||||
|
className="hero-remodel-section"
|
||||||
|
style={{ backgroundImage: "url(/assets/images/blogback.png)" }}
|
||||||
|
>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row align-items-end">
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="hero-remodel-content">
|
||||||
|
<span className="hero-remodel-subtitle">Our Blogs</span>
|
||||||
|
<h1 className="hero-remodel-title">
|
||||||
|
Expert Ideas, Trends & Guides for Smarter Living
|
||||||
|
</h1>
|
||||||
|
<p className="hero-remodel-text">
|
||||||
|
Stay updated with the latest trends in home remodeling, smart
|
||||||
|
living, and modern design. Our blog brings you expert insights.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-6 endbreadcamp">
|
||||||
|
<Link href="/contact" className="btn-primary-custom">
|
||||||
|
Schedule Consultation
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* BLOG GRID */}
|
||||||
|
<section className="kitchen-grid-section">
|
||||||
|
<div className="container">
|
||||||
|
<div className="text-center services-top">
|
||||||
|
<div style={{ width: "100%" }}>
|
||||||
|
<span className="tag">Insights & Inspiration</span>
|
||||||
|
<h2>Expert Ideas for Smarter Home Transformations</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row">
|
||||||
|
<div className="blog-grid">
|
||||||
|
{blogs.map((blog, index) => (
|
||||||
|
<Link href="/blog/blog_details" key={index} className="blog-card">
|
||||||
|
<Image
|
||||||
|
src={blog.img}
|
||||||
|
alt={blog.title}
|
||||||
|
width={400}
|
||||||
|
height={300}
|
||||||
|
className="img-fluid"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="overlay">
|
||||||
|
<span>
|
||||||
|
<Image
|
||||||
|
src="/assets/images/icons/calender.svg"
|
||||||
|
alt="calendar"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>{" "}
|
||||||
|
{blog.date} • HouseCoin Team
|
||||||
|
</span>
|
||||||
|
<h3>{blog.title}</h3>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<Contact/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,305 @@
|
|||||||
|
import Contact from "@/component/Contact"
|
||||||
|
export default function FaqPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section
|
||||||
|
className="hero-remodel-section ourprocesswraptop"
|
||||||
|
style={{ backgroundImage: "url(./assets/images/aboutback.png)" }}
|
||||||
|
>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row align-items-end">
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="hero-remodel-content">
|
||||||
|
<span className="hero-remodel-subtitle">Faq</span>
|
||||||
|
<h1 className="hero-remodel-title">Frequently Asked Questions</h1>
|
||||||
|
<p className="hero-remodel-text">
|
||||||
|
Everything you need to know about our services, pricing, and
|
||||||
|
process.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="processwrap-section">
|
||||||
|
<div className="container">
|
||||||
|
<div className="accordion custom-accordion" id="accordionExample">
|
||||||
|
{/* 1 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#one"
|
||||||
|
>
|
||||||
|
Framing & Structure
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="one"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
We use high-quality materials and advanced construction techniques
|
||||||
|
to ensure strong, durable, and long-lasting structural frameworks
|
||||||
|
for every project.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 2 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#two"
|
||||||
|
>
|
||||||
|
Glazing & Glass
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="two"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
Our glazing solutions include energy-efficient, UV-protected, and
|
||||||
|
weather-resistant glass options designed to enhance aesthetics and
|
||||||
|
comfort.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 3 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#three"
|
||||||
|
>
|
||||||
|
Electrical & HVAC
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="three"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
We integrate safe electrical systems and efficient HVAC solutions
|
||||||
|
to ensure proper lighting, ventilation, and climate control in
|
||||||
|
your space.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 4 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#four"
|
||||||
|
>
|
||||||
|
Flooring Options
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="four"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
Choose from a wide range of flooring options including hardwood,
|
||||||
|
tiles, vinyl, and laminates to match your design and durability
|
||||||
|
needs.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 5 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#five"
|
||||||
|
>
|
||||||
|
Do you offer free consultation?
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="five"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
Yes, we provide a complimentary consultation to understand your
|
||||||
|
requirements and suggest the best solutions tailored to your
|
||||||
|
project.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 6 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#six"
|
||||||
|
>
|
||||||
|
How long does a project take?
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="six"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
Project timelines depend on scope and complexity. Smaller
|
||||||
|
renovations may take a few weeks, while larger projects can take
|
||||||
|
several months.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 7 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#seven"
|
||||||
|
>
|
||||||
|
Are you licensed and insured?
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="seven"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
Yes, we are fully licensed and insured, ensuring compliance with
|
||||||
|
industry standards and complete peace of mind for our clients.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 8 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#eight"
|
||||||
|
>
|
||||||
|
Can I customize my design?
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="eight"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
Absolutely! All our designs are fully customizable. We work
|
||||||
|
closely with you to create a space that matches your vision and
|
||||||
|
lifestyle.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 9 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#nine"
|
||||||
|
>
|
||||||
|
Do you provide project updates?
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="nine"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
Yes, we ensure regular updates and clear communication throughout
|
||||||
|
the project so you stay informed at every stage.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 10 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#ten"
|
||||||
|
>
|
||||||
|
What areas do you serve?
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="ten"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
We primarily serve Central and South Texas, including Austin,
|
||||||
|
Dallas, and San Antonio.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 11 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#eleven"
|
||||||
|
>
|
||||||
|
Do you offer smart home solutions?
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="eleven"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
Yes, we specialize in smart home integrations like automated
|
||||||
|
lighting, security systems, and advanced home technologies.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 12 */}
|
||||||
|
<div className="accordion-item">
|
||||||
|
<h2 className="accordion-header">
|
||||||
|
<button
|
||||||
|
className="accordion-button collapsed"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#twelve"
|
||||||
|
>
|
||||||
|
How do I get started?
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
id="twelve"
|
||||||
|
className="accordion-collapse collapse"
|
||||||
|
data-bs-parent="#accordionExample"
|
||||||
|
>
|
||||||
|
<div className="accordion-body">
|
||||||
|
Simply click on "Get a Quote" or contact us directly. Our team
|
||||||
|
will guide you through the process and schedule your consultation.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<Contact/>
|
||||||
|
</>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 25 KiB |
@@ -1,33 +1,56 @@
|
|||||||
import type { Metadata } from "next";
|
import "bootstrap/dist/css/bootstrap.min.css"
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import "swiper/css"
|
||||||
import "./globals.css";
|
import "aos/dist/aos.css"
|
||||||
|
|
||||||
const geistSans = Geist({
|
|
||||||
variable: "--font-geist-sans",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const geistMono = Geist_Mono({
|
|
||||||
variable: "--font-geist-mono",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: "Create Next App",
|
|
||||||
description: "Generated by create next app",
|
|
||||||
};
|
|
||||||
|
|
||||||
|
import Header from "@/component/header"
|
||||||
|
import Footer from "@/component/Footer"
|
||||||
|
import Script from "next/script"
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode
|
||||||
}>) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html
|
<html lang="en">
|
||||||
lang="en"
|
|
||||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
{/* ✅ YAHAN */}
|
||||||
>
|
<head>
|
||||||
<body className="min-h-full flex flex-col">{children}</body>
|
<link rel="stylesheet" href="/assets/css/style.css" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/responsive.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{children}
|
||||||
|
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
{/* ✅ 1. Bootstrap */}
|
||||||
|
<Script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
|
||||||
|
strategy="afterInteractive"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* ✅ 2. Swiper JS (MISSING THA) */}
|
||||||
|
<Script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"
|
||||||
|
strategy="afterInteractive"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* ✅ 3. AOS JS */}
|
||||||
|
<Script
|
||||||
|
src="https://unpkg.com/aos@2.3.4/dist/aos.js"
|
||||||
|
strategy="afterInteractive"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* ✅ 4. TERA main.js (LAST) */}
|
||||||
|
<Script
|
||||||
|
src="/assets/js/main.js"
|
||||||
|
strategy="afterInteractive"
|
||||||
|
/>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
@@ -1,65 +1,281 @@
|
|||||||
import Image from "next/image";
|
import Services from "@/component/Services"
|
||||||
|
import Trades from "@/component/Trades"
|
||||||
|
import Testimonial from "@/component/Testimonial"
|
||||||
|
import Contact from "@/component/Contact"
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
<>
|
||||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
<section className="hero">
|
||||||
<Image
|
{/* VIDEO */}
|
||||||
className="dark:invert"
|
<video autoPlay muted loop playsInline className="hero-video">
|
||||||
src="/next.svg"
|
<source src="/assets/images/Modernback.mov" type="video/mp4" />
|
||||||
alt="Next.js logo"
|
</video>
|
||||||
width={100}
|
{/* DARK OVERLAY */}
|
||||||
height={20}
|
<div className="hero-overlay" />
|
||||||
priority
|
{/* ================= HERO CONTENT ================= */}
|
||||||
/>
|
<div className="hero-content container">
|
||||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
<div className="hero-left">
|
||||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
<h1>
|
||||||
To get started, edit the page.tsx file.
|
Strategy-Driven Design.
|
||||||
</h1>
|
<br />
|
||||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
Flawlessly Executed Development.
|
||||||
Looking for a starting point or more instructions? Head over to{" "}
|
</h1>
|
||||||
<a
|
<p>
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
From concept to completion, HouseCoin delivers high-quality digital
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
solutions with precision and innovation.
|
||||||
>
|
</p>
|
||||||
Templates
|
<div className="hero-buttons">
|
||||||
</a>{" "}
|
<a href="contact.html" className="btn-primary-custom">
|
||||||
or the{" "}
|
Get a Free Quote
|
||||||
<a
|
</a>
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
<a href="project.html" className="btn-outline">
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
Explore Projects
|
||||||
>
|
</a>
|
||||||
Learning
|
</div>
|
||||||
</a>{" "}
|
|
||||||
center.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel logomark"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Deploy Now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
|
{/* ================= SOCIAL SIDE ================= */}
|
||||||
|
<div className="hero-social">
|
||||||
|
<a href="#">
|
||||||
|
<img src="assets/images/icons/facebook.svg" alt="" />
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<img src="assets/images/icons/linkdien.svg" alt="" />
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<img src="assets/images/icons/instagram.svg" alt="" />
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<img src="assets/images/icons/twitter.svg" alt="" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* ================= BOTTOM STRIP ================= */}
|
||||||
|
<div className="hero-bottom">
|
||||||
|
<div className="hb-item">
|
||||||
|
<div className="icon">
|
||||||
|
<img src="assets/images/icons/project.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<p>500+ Project Complete</p>
|
||||||
|
</div>
|
||||||
|
<div className="hb-item">
|
||||||
|
<div className="icon">
|
||||||
|
<img src="assets/images/icons/Licensed.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<p>Licensed & Insured</p>
|
||||||
|
</div>
|
||||||
|
{/* CENTER HIGHLIGHT */}
|
||||||
|
<div className="hb-item active">
|
||||||
|
<div className="icon">
|
||||||
|
<img src="assets/images/icons/Member.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<p>NKBA Member</p>
|
||||||
|
</div>
|
||||||
|
<div className="hb-item">
|
||||||
|
<div className="icon">
|
||||||
|
<img src="assets/images/icons/Certified.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<p>Smart Home Certified</p>
|
||||||
|
</div>
|
||||||
|
<div className="hb-item">
|
||||||
|
<div className="icon">
|
||||||
|
<img src="assets/images/icons/Warranty.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<p>10-Year Warranty</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#footer">
|
||||||
|
<img className="swipetop" src="assets/images/icons/swipetop.svg" alt="" />
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
<section className="partners-section">
|
||||||
|
<div className="container">
|
||||||
|
<div className="trustedpatnerqrap">
|
||||||
|
<h6 className="text-center">Trusted Partners</h6>
|
||||||
|
<div className="partners-wrapper">
|
||||||
|
<div className="partner-item">
|
||||||
|
<img src="assets/images/lutron.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="partner-item">
|
||||||
|
<img src="assets/images/kohler.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="partner-item">
|
||||||
|
<img src="assets/images/samsung.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="partner-item">
|
||||||
|
<img src="assets/images/ring.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="partner-item">
|
||||||
|
<img src="assets/images/nest.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="partner-item">
|
||||||
|
<img src="assets/images/sherwin.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<Services />
|
||||||
|
<section className="gallery-section">
|
||||||
|
<div className="container">
|
||||||
|
{/* TOP */}
|
||||||
|
<div className="services-top">
|
||||||
|
<div>
|
||||||
|
<span className="tag">Recent Texas Projects</span>
|
||||||
|
<h2>
|
||||||
|
See our transformations across <br />{" "}
|
||||||
|
<span> Central & South Texas</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
{/* SAME BUTTON */}
|
||||||
|
<a href="project.html" className="btn-primary-custom">
|
||||||
|
Explore Our Project
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* GRID */}
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<div className="img-comp-container">
|
||||||
|
<div className="img-comp-img">
|
||||||
|
<img src="assets/images/beforehouse.png" />
|
||||||
|
</div>
|
||||||
|
<div className="img-comp-img img-comp-overlay">
|
||||||
|
<img src="assets/images/afterhouse.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="housearrow">
|
||||||
|
<h5>Cedar Sunroom Extension</h5>
|
||||||
|
<p>Austin, TX</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<div className="img-comp-container">
|
||||||
|
<div className="img-comp-img">
|
||||||
|
<img src="assets/images/beforehouse.png" />
|
||||||
|
</div>
|
||||||
|
<div className="img-comp-img img-comp-overlay">
|
||||||
|
<img src="assets/images/remodel3.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="housearrow">
|
||||||
|
<h5>Kitchen Remodel</h5>
|
||||||
|
<p>Austin, TX</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="pricing-section">
|
||||||
|
<div className="container">
|
||||||
|
{/* TOP CONTENT */}
|
||||||
|
<div className="services-top">
|
||||||
|
<div>
|
||||||
|
<span className="tag">Clear Pricing. No Surprise</span>
|
||||||
|
<h2 className="headprice">
|
||||||
|
Transparency and trust, built
|
||||||
|
<br />
|
||||||
|
into every quote
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<a href="#" className="btn-primary-custom">
|
||||||
|
Smarter Estimate Calculator
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* FULL WIDTH GRID */}
|
||||||
|
<div className="pricing-grid">
|
||||||
|
{/* CARD 1 */}
|
||||||
|
<div className="pricing-card">
|
||||||
|
<div className="card-inner">
|
||||||
|
<h3>Kitchen Remodels</h3>
|
||||||
|
<p className="starting">
|
||||||
|
<img src="assets/images/icons/Starting At.svg" alt="" />
|
||||||
|
</p>
|
||||||
|
<h2 className="price">$25000</h2>
|
||||||
|
<p className="desc">
|
||||||
|
Complete kitchen transformations with quality materials and expert
|
||||||
|
craftsmanship
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="https://housecoins.trailweb.in/gallery.html"
|
||||||
|
className="btn-primary-custom btn-orange"
|
||||||
|
>
|
||||||
|
Request Kitchen Estimate
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* CARD 2 */}
|
||||||
|
<div className="pricing-card">
|
||||||
|
<div className="card-inner">
|
||||||
|
<h3>Cedar Sunrooms</h3>
|
||||||
|
<p className="starting">
|
||||||
|
<img src="assets/images/icons/Starting At.svg" alt="" />
|
||||||
|
</p>
|
||||||
|
<h2 className="price">$18000</h2>
|
||||||
|
<p className="desc">
|
||||||
|
Custom cedar sunrooms that expand your living space beautifully
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="https://housecoins.trailweb.in/gallery.html"
|
||||||
|
className="btn-primary-custom btn-orange"
|
||||||
|
>
|
||||||
|
Request Sunroom Estimate
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="gallery-section">
|
||||||
|
<div className="container">
|
||||||
|
{/* TOP */}
|
||||||
|
<div className="services-top">
|
||||||
|
<div>
|
||||||
|
<span className="tag">Gallery</span>
|
||||||
|
<h2>
|
||||||
|
Inspiration for your <span> transformation</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
{/* SAME BUTTON */}
|
||||||
|
<a
|
||||||
|
href="https://housecoins.trailweb.in/gallery.html"
|
||||||
|
className="btn-primary-custom"
|
||||||
|
>
|
||||||
|
Explore All Photos
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* GRID */}
|
||||||
|
<div className="gallery-grid">
|
||||||
|
{/* LEFT BIG */}
|
||||||
|
<div className="gallery-item big">
|
||||||
|
<img src="assets/images/gallery1.png" alt="" />
|
||||||
|
</div>
|
||||||
|
{/* CENTER */}
|
||||||
|
<div className="gallery-center">
|
||||||
|
<div className="gallery-item wide">
|
||||||
|
<img src="assets/images/gallery2.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="gallery-bottom">
|
||||||
|
<div className="gallery-item">
|
||||||
|
<img src="assets/images/gallery3.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="gallery-item">
|
||||||
|
<img src="assets/images/gallery4.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* RIGHT BIG */}
|
||||||
|
<div className="gallery-item big">
|
||||||
|
<img src="assets/images/gallery5.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<Trades />
|
||||||
|
|
||||||
|
<Testimonial />
|
||||||
|
|
||||||
|
<Contact />
|
||||||
|
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
export default function PrivacyPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section
|
||||||
|
className="hero-remodel-section ourprocesswraptop"
|
||||||
|
style={{ backgroundImage: "url(./assets/images/aboutback.png)" }}
|
||||||
|
>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row align-items-end">
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="hero-remodel-content">
|
||||||
|
<span className="hero-remodel-subtitle">Privacy Policy</span>
|
||||||
|
<h1 className="hero-remodel-title">Your Privacy Matters to Us</h1>
|
||||||
|
<p className="hero-remodel-text">
|
||||||
|
Learn how we collect, use, and protect your personal information
|
||||||
|
while delivering our services.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="process-sectionbottom">
|
||||||
|
<div className="container privacycontent">
|
||||||
|
<h2 className="mb-4">Privacy Policy</h2>
|
||||||
|
<p>
|
||||||
|
At HouseCoin, we are committed to protecting your privacy and ensuring
|
||||||
|
that your personal information is handled in a safe and responsible
|
||||||
|
manner. This policy outlines how we collect, use, and safeguard your
|
||||||
|
data.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">1. Information We Collect</h5>
|
||||||
|
<p>
|
||||||
|
We may collect personal information such as your name, email address,
|
||||||
|
phone number, and project details when you fill out forms or contact us
|
||||||
|
through our website.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">2. How We Use Your Information</h5>
|
||||||
|
<p>
|
||||||
|
Your information is used to provide services, respond to inquiries,
|
||||||
|
improve our offerings, and communicate important updates regarding your
|
||||||
|
project.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">3. Data Protection</h5>
|
||||||
|
<p>
|
||||||
|
We implement appropriate security measures to protect your personal data
|
||||||
|
from unauthorized access, alteration, disclosure, or destruction.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">4. Sharing of Information</h5>
|
||||||
|
<p>
|
||||||
|
We do not sell, trade, or rent your personal information. Your data may
|
||||||
|
only be shared with trusted partners involved in delivering services.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">5. Cookies</h5>
|
||||||
|
<p>
|
||||||
|
Our website may use cookies to enhance user experience and analyze
|
||||||
|
website traffic. You can choose to disable cookies through your browser
|
||||||
|
settings.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">6. Third-Party Links</h5>
|
||||||
|
<p>
|
||||||
|
Our website may contain links to external sites. We are not responsible
|
||||||
|
for the privacy practices of those websites.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">7. Your Rights</h5>
|
||||||
|
<p>
|
||||||
|
You have the right to access, update, or request deletion of your
|
||||||
|
personal data at any time by contacting us.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">8. Updates to Policy</h5>
|
||||||
|
<p>
|
||||||
|
We may update this policy periodically. Any changes will be posted on
|
||||||
|
this page with updated revisions.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">9. Contact Us</h5>
|
||||||
|
<p>
|
||||||
|
If you have any questions about this Privacy Policy, feel free to
|
||||||
|
contact us at
|
||||||
|
<strong>reimagine@housecoin.biz</strong>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,207 @@
|
|||||||
|
import Contact from "@/component/Contact"
|
||||||
|
export default function ProcessPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section
|
||||||
|
className="hero-remodel-section ourprocesswraptop"
|
||||||
|
style={{ backgroundImage: "url(./assets/images/ourprocessback.png)" }}
|
||||||
|
>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row align-items-end">
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="hero-remodel-content">
|
||||||
|
<span className="hero-remodel-subtitle">Process</span>
|
||||||
|
<h1 className="hero-remodel-title">Our Process</h1>
|
||||||
|
<p className="hero-remodel-text">
|
||||||
|
From initial consultation to final handover, we guide you through
|
||||||
|
every step with transparency, expertise, and dedication to
|
||||||
|
excellence.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="processwrap-section">
|
||||||
|
<div className="container">
|
||||||
|
<div className="text-center services-top">
|
||||||
|
<div style={{ width: "100%" }}>
|
||||||
|
<h2 className="processwrap-title">
|
||||||
|
A Seamless Path to <span>Exceptional Living</span>
|
||||||
|
</h2>
|
||||||
|
<p className="processwrap-subtitle">
|
||||||
|
From concept to completion, Housecoin delivers a refined,
|
||||||
|
transparent journey— where every detail is planned and executed
|
||||||
|
flawlessly.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="processwrap-timeline processdown">
|
||||||
|
<div className="bottonarrow" />
|
||||||
|
<div className="row align-items-center processwrap-item paddprocesswith">
|
||||||
|
<div className="col-md-6 left">
|
||||||
|
<div className="processwrap-card">
|
||||||
|
<h5>
|
||||||
|
<div className="imagwrap">
|
||||||
|
<img src="assets/images/icons/Master.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
Consultation
|
||||||
|
</h5>
|
||||||
|
<p>We start by understanding your vision, needs, and budget.</p>
|
||||||
|
<span className="number">01</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6" />
|
||||||
|
</div>
|
||||||
|
<div className="row align-items-center processwrap-item">
|
||||||
|
<div className="col-md-6" />
|
||||||
|
<div className="col-md-6 right">
|
||||||
|
<div className="processwrap-card">
|
||||||
|
<h5>
|
||||||
|
<div className="imagwrap">
|
||||||
|
<img src="assets/images/icons/Master.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
Design
|
||||||
|
</h5>
|
||||||
|
<p>Our team creates detailed plans and 3D visualizations.</p>
|
||||||
|
<span className="number">02</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row align-items-center processwrap-item">
|
||||||
|
<div className="col-md-6 left">
|
||||||
|
<div className="processwrap-card">
|
||||||
|
<h5>
|
||||||
|
<div className="imagwrap">
|
||||||
|
<img src="assets/images/icons/Master.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
Planning
|
||||||
|
</h5>
|
||||||
|
<p>We finalize materials, timeline, and project scope.</p>
|
||||||
|
<span className="number">03</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6" />
|
||||||
|
</div>
|
||||||
|
<div className="row align-items-center processwrap-item">
|
||||||
|
<div className="col-md-6" />
|
||||||
|
<div className="col-md-6 right">
|
||||||
|
<div className="processwrap-card">
|
||||||
|
<h5>
|
||||||
|
<div className="imagwrap">
|
||||||
|
<img src="assets/images/icons/Master.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
Construction
|
||||||
|
</h5>
|
||||||
|
<p>Skilled craftsmen bring your vision to life.</p>
|
||||||
|
<span className="number">04</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row align-items-center processwrap-item">
|
||||||
|
<div className="col-md-6 left">
|
||||||
|
<div className="processwrap-card">
|
||||||
|
<h5>
|
||||||
|
<div className="imagwrap">
|
||||||
|
<img src="assets/images/icons/Master.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
Quality Check
|
||||||
|
</h5>
|
||||||
|
<p>Rigorous inspection ensures perfect execution.</p>
|
||||||
|
<span className="number">05</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6" />
|
||||||
|
</div>
|
||||||
|
<div className="row align-items-center processwrap-item">
|
||||||
|
<div className="col-md-6" />
|
||||||
|
<div className="col-md-6 right">
|
||||||
|
<div className="processwrap-card">
|
||||||
|
<h5>
|
||||||
|
<div className="imagwrap">
|
||||||
|
<img src="assets/images/icons/Master.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
Deliver
|
||||||
|
</h5>
|
||||||
|
<p>
|
||||||
|
We hand over a finished space ready for you to live and grow.
|
||||||
|
</p>
|
||||||
|
<span className="number">06</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="process-sectionbottom">
|
||||||
|
<div className="container">
|
||||||
|
{/* Heading */}
|
||||||
|
<div className="row ">
|
||||||
|
<div className="services-top">
|
||||||
|
<div>
|
||||||
|
<h2>
|
||||||
|
Why Our Process <span>Works</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-muted">
|
||||||
|
We've refined our approach over years of delivering <br />{" "}
|
||||||
|
exceptional results for our clients.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Cards */}
|
||||||
|
<div className="row g-4">
|
||||||
|
{/* 01 */}
|
||||||
|
<div className="col-md-3">
|
||||||
|
<div className="process-cardwrap">
|
||||||
|
<span className="number">01</span>
|
||||||
|
<h5>Transparency</h5>
|
||||||
|
<img
|
||||||
|
src="assets/images/Transparencyprocess.png"
|
||||||
|
className="img-fluid"
|
||||||
|
/>
|
||||||
|
<p>
|
||||||
|
Stay informed at every stage with regular updates and open
|
||||||
|
dialogue.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 02 */}
|
||||||
|
<div className="col-md-3">
|
||||||
|
<div className="process-cardwrap">
|
||||||
|
<span className="number">02</span>
|
||||||
|
<h5>Expert Craftsmanship</h5>
|
||||||
|
<img src="assets/images/expert.png" className="img-fluid" />
|
||||||
|
<p>
|
||||||
|
Our team of experienced professionals ensures exceptional quality.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 03 */}
|
||||||
|
<div className="col-md-3">
|
||||||
|
<div className="process-cardwrap">
|
||||||
|
<span className="number">03</span>
|
||||||
|
<h5>On-Time Delivery</h5>
|
||||||
|
<img src="assets/images/Delivery.png" className="img-fluid" />
|
||||||
|
<p>
|
||||||
|
We respect your time and deliver projects within agreed timelines.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 04 */}
|
||||||
|
<div className="col-md-3">
|
||||||
|
<div className="process-cardwrap">
|
||||||
|
<span className="number">04</span>
|
||||||
|
<h5>Budget Friendly</h5>
|
||||||
|
<img src="assets/images/Budget.png" className="img-fluid" />
|
||||||
|
<p>No hidden costs, just honest pricing and great value.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<Contact/>
|
||||||
|
</>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
export default function TermsPage() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<>
|
||||||
|
<section
|
||||||
|
className="hero-remodel-section ourprocesswraptop"
|
||||||
|
style={{ backgroundImage: "url(./assets/images/aboutback.png)" }}
|
||||||
|
>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row align-items-end">
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="hero-remodel-content">
|
||||||
|
<span className="hero-remodel-subtitle">Terms of Service</span>
|
||||||
|
<h1 className="hero-remodel-title">Terms & Conditions</h1>
|
||||||
|
<p className="hero-remodel-text">
|
||||||
|
Please read these terms carefully before using our services.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="process-sectionbottom">
|
||||||
|
<div className="container privacycontent">
|
||||||
|
<h2 className="mb-4">Terms of Service</h2>
|
||||||
|
<p>
|
||||||
|
Welcome to HouseCoin. By accessing or using our website and services,
|
||||||
|
you agree to follow the terms and conditions outlined below. These terms
|
||||||
|
are designed to ensure a smooth and transparent experience for both our
|
||||||
|
clients and our team. We recommend reviewing them carefully before
|
||||||
|
starting any project with us.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">1. Use of Services</h5>
|
||||||
|
<p>
|
||||||
|
Our services are intended strictly for lawful and professional use. You
|
||||||
|
agree not to misuse, copy, distribute, or exploit any part of our
|
||||||
|
website, content, or services without prior written permission. Any
|
||||||
|
unauthorized activity may lead to suspension of services and necessary
|
||||||
|
legal action.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">2. Service Agreement</h5>
|
||||||
|
<p>
|
||||||
|
Every project is executed based on a clear agreement that defines the
|
||||||
|
scope, deliverables, timeline, and pricing. This helps avoid
|
||||||
|
misunderstandings and ensures transparency. Any modifications or
|
||||||
|
additional requests must be discussed and approved by both parties in
|
||||||
|
advance.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">3. Pricing & Payments</h5>
|
||||||
|
<p>
|
||||||
|
We maintain complete transparency in pricing and provide detailed cost
|
||||||
|
estimates before starting the project. Payments are expected as per the
|
||||||
|
agreed milestones. Delayed payments may affect project progress and can
|
||||||
|
lead to temporary suspension of services until cleared.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">4. Project Timelines</h5>
|
||||||
|
<p>
|
||||||
|
We always strive to deliver projects within the agreed timeline while
|
||||||
|
maintaining quality standards. However, delays may occur due to factors
|
||||||
|
like material availability, unforeseen circumstances, or
|
||||||
|
client-requested changes during the project. We keep clients informed
|
||||||
|
throughout the process.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">5. Client Responsibilities</h5>
|
||||||
|
<p>
|
||||||
|
Clients are expected to provide accurate information, timely approvals,
|
||||||
|
and necessary access required for project completion. Clear
|
||||||
|
communication and cooperation from the client side play a crucial role
|
||||||
|
in meeting deadlines and ensuring successful project delivery.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">6. Intellectual Property</h5>
|
||||||
|
<p>
|
||||||
|
All designs, plans, concepts, and content developed by HouseCoin remain
|
||||||
|
our intellectual property unless otherwise agreed in writing. Clients
|
||||||
|
are not permitted to reuse, reproduce, or distribute these materials
|
||||||
|
without proper authorization.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">7. Limitation of Liability</h5>
|
||||||
|
<p>
|
||||||
|
While we aim to deliver high-quality services, HouseCoin shall not be
|
||||||
|
held responsible for any indirect, incidental, or consequential damages.
|
||||||
|
This includes losses related to delays, business interruptions, or
|
||||||
|
unforeseen issues beyond our control.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">8. Cancellation & Refund</h5>
|
||||||
|
<p>
|
||||||
|
Cancellation requests must be made formally and will be evaluated based
|
||||||
|
on the stage of the project. Any applicable refund will be calculated
|
||||||
|
based on the work completed and expenses already incurred up to that
|
||||||
|
point.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">9. Changes to Terms</h5>
|
||||||
|
<p>
|
||||||
|
We reserve the right to update or modify these terms at any time to
|
||||||
|
reflect changes in our services or policies. Continued use of our
|
||||||
|
website or services after such updates indicates your acceptance of the
|
||||||
|
revised terms.
|
||||||
|
</p>
|
||||||
|
<h5 className="mt-4">10. Contact</h5>
|
||||||
|
<p>
|
||||||
|
If you have any questions, concerns, or require further clarification
|
||||||
|
regarding these Terms of Service, feel free to reach out to us. You can
|
||||||
|
contact us at <strong>reimagine@housecoin.biz</strong> and our team will
|
||||||
|
be happy to assist you.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,182 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
|
||||||
|
export default function Contact() {
|
||||||
|
|
||||||
|
const [form, setForm] = useState({
|
||||||
|
first_name: "",
|
||||||
|
last_name: "",
|
||||||
|
email: "",
|
||||||
|
phone_number: "",
|
||||||
|
project_details: ""
|
||||||
|
})
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [message, setMessage] = useState("")
|
||||||
|
|
||||||
|
// handle change
|
||||||
|
const handleChange = (e) => {
|
||||||
|
setForm({ ...form, [e.target.name]: e.target.value })
|
||||||
|
}
|
||||||
|
|
||||||
|
// validation
|
||||||
|
const validate = () => {
|
||||||
|
if (!form.first_name || !form.last_name) return "Name required"
|
||||||
|
if (!form.email.includes("@")) return "Valid email required"
|
||||||
|
if (form.phone_number.length < 8) return "Valid phone required"
|
||||||
|
if (!form.project_details) return "Project details required"
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// submit
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
const error = validate()
|
||||||
|
if (error) {
|
||||||
|
setMessage(error)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true)
|
||||||
|
setMessage("")
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(
|
||||||
|
"https://rgnbdafzoeryijdgmyuu.supabase.co/functions/v1/submit-form",
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"Authorization":
|
||||||
|
"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJnbmJkYWZ6b2VyeWlqZGdteXV1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzY3NjUyODksImV4cCI6MjA5MjM0MTI4OX0.-PuetNc8pmKhQfCS8jS9xGAjaBA2O26qR9oSRVVvNs4"
|
||||||
|
},
|
||||||
|
body: JSON.stringify(form)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!res.ok) throw new Error("Failed")
|
||||||
|
|
||||||
|
setMessage("✅ Form submitted successfully!")
|
||||||
|
setForm({
|
||||||
|
first_name: "",
|
||||||
|
last_name: "",
|
||||||
|
email: "",
|
||||||
|
phone_number: "",
|
||||||
|
project_details: ""
|
||||||
|
})
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
setMessage("❌ Something went wrong")
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="contact-section">
|
||||||
|
<div className="container">
|
||||||
|
|
||||||
|
{/* TOP */}
|
||||||
|
<div className="services-top text-center">
|
||||||
|
<div style={{ width: "100%" }}>
|
||||||
|
<span className="tag">Let’s Start Your Project</span>
|
||||||
|
<h2 className="headprice">
|
||||||
|
Schedule a complimentary Consultation <br />
|
||||||
|
with our design team
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="contact-box">
|
||||||
|
|
||||||
|
{/* LEFT */}
|
||||||
|
<div className="contact-left">
|
||||||
|
<h3>Get In Touch</h3>
|
||||||
|
<p>Contact us today for tailored marketing strategies and expert advice.</p>
|
||||||
|
|
||||||
|
<div className="contact-item">
|
||||||
|
<img src="/assets/images/icons/phone.svg" />
|
||||||
|
<div>
|
||||||
|
<strong>Phone Number</strong>
|
||||||
|
<span>+15107099142</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="contact-item">
|
||||||
|
<img src="/assets/images/icons/email.svg" />
|
||||||
|
<div>
|
||||||
|
<strong>Email Address</strong>
|
||||||
|
<span>reimagine@housecoin.biz</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="contact-item">
|
||||||
|
<img src="/assets/images/icons/office.svg" />
|
||||||
|
<div>
|
||||||
|
<strong>Office Hours</strong>
|
||||||
|
<span>MON–FRI: 8AM – 6PM</span>
|
||||||
|
<span>SATURDAY: 9AM – 3PM</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* RIGHT FORM */}
|
||||||
|
<form className="contact-right" onSubmit={handleSubmit}>
|
||||||
|
<h3>Send us a Message</h3>
|
||||||
|
|
||||||
|
<div className="form-row">
|
||||||
|
<input
|
||||||
|
name="first_name"
|
||||||
|
value={form.first_name}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="First Name"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
name="last_name"
|
||||||
|
value={form.last_name}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Last Name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-row">
|
||||||
|
<input
|
||||||
|
name="email"
|
||||||
|
value={form.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Email Address"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
name="phone_number"
|
||||||
|
value={form.phone_number}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Phone Number"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<textarea
|
||||||
|
name="project_details"
|
||||||
|
value={form.project_details}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Project Details"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button type="submit" disabled={loading}>
|
||||||
|
{loading ? "Sending..." : "Get a Free Consultation"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* MESSAGE */}
|
||||||
|
{message && (
|
||||||
|
<p style={{ marginTop: "10px", color: "#000" }}>
|
||||||
|
{message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,176 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
export default function Footer() {
|
||||||
|
return (
|
||||||
|
<footer id="footer" className="footer-section">
|
||||||
|
|
||||||
|
{/* TOP BAR */}
|
||||||
|
<div className="footer--linewrap">
|
||||||
|
<div className="container leftline">
|
||||||
|
|
||||||
|
<div className="footer-top d-flex justify-content-between align-items-center">
|
||||||
|
|
||||||
|
<div className="social-icons">
|
||||||
|
<span><img src="/assets/images/icons/footerface.svg" /></span>
|
||||||
|
<span><img src="/assets/images/icons/footerinsta.svg" /></span>
|
||||||
|
<span><img src="/assets/images/icons/footertwitter.svg" /></span>
|
||||||
|
<span><img src="/assets/images/icons/footerlink.svg" /></span>
|
||||||
|
<span><img src="/assets/images/icons/you.svg" /></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="footer-info">
|
||||||
|
Licensed in Texas | NKBA Member | Smart Home Certified
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="go-top"
|
||||||
|
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
||||||
|
style={{ cursor: "pointer" }}
|
||||||
|
>
|
||||||
|
GO TO TOP <img src="/assets/images/icons/gotop.svg" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{/* MAIN FOOTER */}
|
||||||
|
<div className="footer--linewrap">
|
||||||
|
<div className="container leftline">
|
||||||
|
|
||||||
|
<div className="row footer-main">
|
||||||
|
|
||||||
|
{/* LEFT */}
|
||||||
|
<div className="col-lg-4">
|
||||||
|
<div className="logo">
|
||||||
|
<img src="/assets/images/logo.png" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="footer-title">
|
||||||
|
Raise Smart. Grow Fast.<br />Let’s Start Today!
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="footer-desc">
|
||||||
|
Texas's premier remodeling consultancy, delivering turnkey solutions with precision execution and technological sophistication.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* SERVICES */}
|
||||||
|
<div className="col-lg-3">
|
||||||
|
<h5>Services</h5>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">3D Visualization and Interior Design</a></li>
|
||||||
|
<li><a href="/Interior_remodelling">Interior Remodelling</a></li>
|
||||||
|
<li><a href="/Smart_home">Smart Home & Technology</a></li>
|
||||||
|
<li><a href="/Sunroomsenclosures">Sunrooms & Enclosures</a></li>
|
||||||
|
<li><a href="#">Outdoor Living & Kitchens</a></li>
|
||||||
|
<li><a href="/Kitchen_bath">Kitchen & Bath Remodeling</a></li>
|
||||||
|
<li><a href="#">Approval, Documentation, and Project Supervision</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* COMPANY */}
|
||||||
|
<div className="col-lg-2">
|
||||||
|
<h5>Company</h5>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/project">Projects</a></li>
|
||||||
|
<li><a href="#">Services</a></li>
|
||||||
|
<li><a href="/process">Our Process</a></li>
|
||||||
|
<li><a href="/about">About us</a></li>
|
||||||
|
<li><a href="/gallery">Gallery</a></li>
|
||||||
|
<li><a href="/contact">Contact us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* RESOURCE */}
|
||||||
|
<div className="col-lg-3">
|
||||||
|
<h5>Resource</h5>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/blog">Blog</a></li>
|
||||||
|
<li><a href="/faq">FAQ’s</a></li>
|
||||||
|
<li><a href="#">Teams</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{/* CONTACT BAR */}
|
||||||
|
<div className="footer--linewrap">
|
||||||
|
<div className="container leftline">
|
||||||
|
|
||||||
|
<div className="row contact-bar text-center">
|
||||||
|
|
||||||
|
<div className="col-md-3">
|
||||||
|
<div className="footerbottom">
|
||||||
|
<img src="/assets/images/icons/footercall.svg" />
|
||||||
|
<span>
|
||||||
|
<p>Call Us</p>
|
||||||
|
<strong>+15107099142</strong>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-3">
|
||||||
|
<div className="footerbottom">
|
||||||
|
<img src="/assets/images/icons/footeremail.svg" />
|
||||||
|
<span>
|
||||||
|
<p>Email Us</p>
|
||||||
|
<strong>reimagine@housecoin.biz</strong>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-6">
|
||||||
|
<div className="footerbottom d-flex">
|
||||||
|
<img src="/assets/images/icons/footerlocation.svg" style={{ marginRight: "10px" }} />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span className="locationflex">
|
||||||
|
<strong>Global HQ:</strong>
|
||||||
|
<p style={{ margin: 0 }}>
|
||||||
|
700 Central Expy S Suite 400 Allen, TX 75013
|
||||||
|
</p>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span className="locationflex">
|
||||||
|
<strong>EMEA:</strong>
|
||||||
|
<p style={{ margin: 0 }}>
|
||||||
|
10 Malus Close, Peterborough PE7 8DU, UK
|
||||||
|
</p>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{/* BOTTOM */}
|
||||||
|
<div className="footer--linewrap borderbottom">
|
||||||
|
<div className="container leftline">
|
||||||
|
|
||||||
|
<div className="footer-bottom d-flex justify-content-between">
|
||||||
|
<p>© 2026 HouseCoin by Insignia Consultancy Solutions. All rights reserved.</p>
|
||||||
|
|
||||||
|
<p className="pricacy_flex">
|
||||||
|
<a href="/privacy">Privacy Policy</a> |{" "}
|
||||||
|
<a href="/terms">Terms of Service</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
export default function Services() {
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
title: "Outdoor Living & Kitchens",
|
||||||
|
img: "/assets/images/kitchen.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Sunrooms & Enclosures",
|
||||||
|
img: "/assets/images/sunroom.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Interior Remodelling",
|
||||||
|
img: "/assets/images/Outdoor.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Smart Home & Technology",
|
||||||
|
img: "/assets/images/Smart.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="services-sectionwrap">
|
||||||
|
|
||||||
|
<div className="container">
|
||||||
|
<div className="services-top">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span className="tag">Our Services</span>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
Transforming spaces with precision, innovation, <br />
|
||||||
|
<span>and commitment to quality craftsmanship.</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="/service" className="btn-primary-custom">
|
||||||
|
Explore All Services
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* GRID */}
|
||||||
|
<div className="services-grid">
|
||||||
|
|
||||||
|
{services.map((item, index) => (
|
||||||
|
<div className="service-card" key={index}>
|
||||||
|
|
||||||
|
<img src={item.img} alt={item.title} />
|
||||||
|
|
||||||
|
<div className="overlay"></div>
|
||||||
|
|
||||||
|
<h3>{item.title}</h3>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,155 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useEffect } from "react"
|
||||||
|
import Swiper from "swiper"
|
||||||
|
import "swiper/css"
|
||||||
|
import "swiper/css/pagination"
|
||||||
|
import { Pagination, Autoplay } from "swiper/modules"
|
||||||
|
|
||||||
|
export default function Testimonial() {
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
new Swiper(".testimonialSwiper", {
|
||||||
|
modules: [Pagination, Autoplay],
|
||||||
|
|
||||||
|
loop: true,
|
||||||
|
|
||||||
|
slidesPerView: 3,
|
||||||
|
spaceBetween: 30,
|
||||||
|
|
||||||
|
speed: 4000, // 🔥 smooth continuous
|
||||||
|
|
||||||
|
autoplay: {
|
||||||
|
delay: 0, // ❌ no stop
|
||||||
|
disableOnInteraction: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
freeMode: true,
|
||||||
|
freeModeMomentum: false,
|
||||||
|
|
||||||
|
pagination: {
|
||||||
|
el: ".testimonial-pagination",
|
||||||
|
clickable: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
breakpoints: {
|
||||||
|
0: { slidesPerView: 1.2 },
|
||||||
|
768: { slidesPerView: 2 },
|
||||||
|
1024: { slidesPerView: 3 }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className="gallery-section"
|
||||||
|
style={{ background: "url(/assets/images/customerbackground.png)" }}
|
||||||
|
>
|
||||||
|
<div className="container">
|
||||||
|
|
||||||
|
{/* TOP */}
|
||||||
|
<div className="services-top">
|
||||||
|
<div>
|
||||||
|
<span className="tag">What Our Customers Say</span>
|
||||||
|
<h2>Real reviews from real Texas homeowners</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="swiper testimonialSwiper">
|
||||||
|
<div className="swiper-wrapper">
|
||||||
|
|
||||||
|
{/* CARD 1 */}
|
||||||
|
<div className="swiper-slide">
|
||||||
|
<div className="testimonial-card short">
|
||||||
|
<p>
|
||||||
|
“Our new kitchen is perfect! The team was professional, on time, and the quality is outstanding.”
|
||||||
|
</p>
|
||||||
|
<div className="user">
|
||||||
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" />
|
||||||
|
<div>
|
||||||
|
<h6>Sarah T.</h6>
|
||||||
|
<span>San Antonio</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#">See Project →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CARD 2 */}
|
||||||
|
<div className="swiper-slide">
|
||||||
|
<div className="testimonial-card long">
|
||||||
|
<p>
|
||||||
|
“We couldn’t be happier with our new sunroom! The team showed up on time and demonstrated incredible professionalism from start to finish. Their workmanship truly surpassed our expectations. Adding this space has been the best decision we’ve made for our home! We’re thrilled with how it turned out. It has transformed our living area into a bright and inviting space.”
|
||||||
|
</p>
|
||||||
|
<div className="user">
|
||||||
|
<img src="https://randomuser.me/api/portraits/women/65.jpg" />
|
||||||
|
<div>
|
||||||
|
<h6>Jessica L.</h6>
|
||||||
|
<span>Dallas</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#">See Project →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CARD 3 */}
|
||||||
|
<div className="swiper-slide">
|
||||||
|
<div className="testimonial-card short">
|
||||||
|
<p>
|
||||||
|
“Amazing experience! Highly recommended for any renovation work.”
|
||||||
|
</p>
|
||||||
|
<div className="user">
|
||||||
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" />
|
||||||
|
<div>
|
||||||
|
<h6>Emily R.</h6>
|
||||||
|
<span>Austin</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#">See Project →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* REPEAT SAME CARDS (important for smooth loop) */}
|
||||||
|
|
||||||
|
<div className="swiper-slide">
|
||||||
|
<div className="testimonial-card long">
|
||||||
|
<p>
|
||||||
|
“We couldn’t be happier with our new sunroom! The team showed up on time and demonstrated incredible professionalism from start to finish.”
|
||||||
|
</p>
|
||||||
|
<div className="user">
|
||||||
|
<img src="https://randomuser.me/api/portraits/women/65.jpg" />
|
||||||
|
<div>
|
||||||
|
<h6>Jessica L.</h6>
|
||||||
|
<span>Dallas</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#">See Project →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="swiper-slide">
|
||||||
|
<div className="testimonial-card short">
|
||||||
|
<p>
|
||||||
|
“Our new kitchen is perfect! The team was professional, on time, and the quality is outstanding.”
|
||||||
|
</p>
|
||||||
|
<div className="user">
|
||||||
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" />
|
||||||
|
<div>
|
||||||
|
<h6>Sarah T.</h6>
|
||||||
|
<span>San Antonio</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#">See Project →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* DOTS */}
|
||||||
|
<div className="swiper-pagination testimonial-pagination"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,117 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useEffect } from "react"
|
||||||
|
import Swiper from "swiper"
|
||||||
|
import { Pagination, Autoplay, FreeMode } from "swiper/modules"
|
||||||
|
|
||||||
|
import "swiper/css"
|
||||||
|
import "swiper/css/pagination"
|
||||||
|
|
||||||
|
export default function Trades() {
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const swiper = new Swiper(".tradesSwiper", {
|
||||||
|
modules: [Pagination, Autoplay, FreeMode],
|
||||||
|
|
||||||
|
loop: true,
|
||||||
|
slidesPerView: 3,
|
||||||
|
spaceBetween: 25,
|
||||||
|
speed: 1500,
|
||||||
|
|
||||||
|
autoplay: {
|
||||||
|
delay: 0,
|
||||||
|
disableOnInteraction: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
freeMode: true,
|
||||||
|
freeModeMomentum: false,
|
||||||
|
|
||||||
|
pagination: {
|
||||||
|
el: ".swiper-pagination",
|
||||||
|
clickable: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
breakpoints: {
|
||||||
|
0: { slidesPerView: 1 },
|
||||||
|
768: { slidesPerView: 2 },
|
||||||
|
1024: { slidesPerView: 3 }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return () => swiper.destroy() // cleanup
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="trades-section">
|
||||||
|
<div className="container">
|
||||||
|
|
||||||
|
<div className="trades-top">
|
||||||
|
<div>
|
||||||
|
<span className="tag">Meet Our Trades</span>
|
||||||
|
<h2>
|
||||||
|
HouseCoin's specialized capabilities are <br />
|
||||||
|
driven by <span>expert craftsmen.</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<a href="#" className="btn-primary-custom">Explore All Trades</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="swiper tradesSwiper">
|
||||||
|
<div className="swiper-wrapper">
|
||||||
|
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
img: "/assets/images/trader1.png",
|
||||||
|
title: "Woodwork",
|
||||||
|
name: "Mark S",
|
||||||
|
role: "Lead Carpenter",
|
||||||
|
desc: "Specializes in building robust frameworks and custom woodwork."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/assets/images/trader2.png",
|
||||||
|
title: "Electrical",
|
||||||
|
name: "John D",
|
||||||
|
role: "Senior Electrician",
|
||||||
|
desc: "Expert in wiring systems and smart installations."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/assets/images/trader3.png",
|
||||||
|
title: "Plumbing",
|
||||||
|
name: "David R",
|
||||||
|
role: "Master Plumber",
|
||||||
|
desc: "Handles modern plumbing systems with precision."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/assets/images/Masonry.png",
|
||||||
|
title: "Masonry",
|
||||||
|
name: "Alex K",
|
||||||
|
role: "Interior Specialist",
|
||||||
|
desc: "Delivers premium finishes and detailing."
|
||||||
|
}
|
||||||
|
].map((item, i) => (
|
||||||
|
<div key={i} className="swiper-slide trade-card">
|
||||||
|
<img src={item.img} alt="" />
|
||||||
|
<div className="overlay"></div>
|
||||||
|
|
||||||
|
<div className="content">
|
||||||
|
<h3>{item.title}</h3>
|
||||||
|
<div className="info">
|
||||||
|
<h4>{item.name}</h4>
|
||||||
|
<span>{item.role}</span>
|
||||||
|
<p>{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ✅ PAGINATION DOTS */}
|
||||||
|
<div className="swiper-pagination"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
return (
|
||||||
|
<header className="header">
|
||||||
|
<div className="container d-flex justify-content-between align-items-center">
|
||||||
|
{/* LOGO */}
|
||||||
|
<a href="index.html">
|
||||||
|
<img src="assets/images/logo.png" alt="" />
|
||||||
|
</a>
|
||||||
|
{/* NAV */}
|
||||||
|
<nav className="nav">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="project.html">Projects</a>
|
||||||
|
</li>
|
||||||
|
{/* SERVICES DROPDOWN */}
|
||||||
|
<li className="services-menu">
|
||||||
|
<a href="#">
|
||||||
|
Services
|
||||||
|
<span className="arrow" />
|
||||||
|
</a>
|
||||||
|
<div className="mega-menu">
|
||||||
|
{/* LEFT LIST */}
|
||||||
|
<div className="menu-left">
|
||||||
|
<h2> Services</h2>
|
||||||
|
<div className="separator"></div>
|
||||||
|
<ul>
|
||||||
|
<li data-img="img1" className="active">
|
||||||
|
<a href="Visualization_interior.html">
|
||||||
|
3D Visualization and <br /> Interior Design{" "}
|
||||||
|
<img src="assets/images/arrownext.png" alt="" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-img="img2">
|
||||||
|
<a href="Kitchen_bath.html">
|
||||||
|
Kitchen & Bath Remodelling
|
||||||
|
<img src="assets/images/arrownext.png" alt="" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-img="img3">
|
||||||
|
<a href="Interior_remodelling.html">
|
||||||
|
Interior Remodelling
|
||||||
|
<img src="assets/images/arrownext.png" alt="" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-img="img4">
|
||||||
|
<a href="outdoor_living.html">
|
||||||
|
Outdoor Living & Kitchens
|
||||||
|
<img src="assets/images/arrownext.png" alt="" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-img="img5">
|
||||||
|
<a href="Smart_home.html">
|
||||||
|
Smart Home & <br /> Technology
|
||||||
|
<img src="assets/images/arrownext.png" alt="" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-img="img6">
|
||||||
|
<a href="approval,_documentation.html">
|
||||||
|
Approval, Documentation, <br /> and Project Supervision
|
||||||
|
<img src="assets/images/arrownext.png" alt="" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li data-img="img7">
|
||||||
|
<a href="Sunroomsenclosures.html">
|
||||||
|
Sunrooms & Enclosures
|
||||||
|
<img src="assets/images/arrownext.png" alt="" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/* RIGHT IMAGE */}
|
||||||
|
<div className="menu-right">
|
||||||
|
<img
|
||||||
|
id="serviceImage"
|
||||||
|
src="assets/images/menuimages1.png"
|
||||||
|
alt=""
|
||||||
|
style={{ opacity: 1 }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="process">Our Process</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="about">About Us</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="blog">blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="contact">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
{/* CTA */}
|
||||||
|
<a href="contact" className="btn-primary-custom">
|
||||||
|
Get a Quote
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -8,9 +8,12 @@
|
|||||||
"name": "my-next-app",
|
"name": "my-next-app",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"aos": "^2.3.4",
|
||||||
|
"bootstrap": "^5.3.8",
|
||||||
"next": "16.2.4",
|
"next": "16.2.4",
|
||||||
"react": "19.2.4",
|
"react": "19.2.4",
|
||||||
"react-dom": "19.2.4"
|
"react-dom": "19.2.4",
|
||||||
|
"swiper": "^12.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
@@ -1240,6 +1243,17 @@
|
|||||||
"node": ">=12.4.0"
|
"node": ">=12.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@popperjs/core": {
|
||||||
|
"version": "2.11.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||||
|
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/popperjs"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@rtsao/scc": {
|
"node_modules/@rtsao/scc": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
||||||
@@ -2209,6 +2223,17 @@
|
|||||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/aos": {
|
||||||
|
"version": "2.3.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
|
||||||
|
"integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"classlist-polyfill": "^1.0.3",
|
||||||
|
"lodash.debounce": "^4.0.6",
|
||||||
|
"lodash.throttle": "^4.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/argparse": {
|
"node_modules/argparse": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||||
@@ -2458,6 +2483,25 @@
|
|||||||
"node": ">=6.0.0"
|
"node": ">=6.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/bootstrap": {
|
||||||
|
"version": "5.3.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
|
||||||
|
"integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/twbs"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/bootstrap"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"@popperjs/core": "^2.11.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/brace-expansion": {
|
"node_modules/brace-expansion": {
|
||||||
"version": "1.1.14",
|
"version": "1.1.14",
|
||||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
|
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
|
||||||
@@ -2613,6 +2657,12 @@
|
|||||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/classlist-polyfill": {
|
||||||
|
"version": "1.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
|
||||||
|
"integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
|
||||||
|
"license": "Unlicense"
|
||||||
|
},
|
||||||
"node_modules/client-only": {
|
"node_modules/client-only": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
|
||||||
@@ -4828,6 +4878,12 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/lodash.debounce": {
|
||||||
|
"version": "4.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||||
|
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/lodash.merge": {
|
"node_modules/lodash.merge": {
|
||||||
"version": "4.6.2",
|
"version": "4.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||||
@@ -4835,6 +4891,12 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/lodash.throttle": {
|
||||||
|
"version": "4.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
||||||
|
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/loose-envify": {
|
"node_modules/loose-envify": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||||
@@ -6065,6 +6127,25 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/swiper": {
|
||||||
|
"version": "12.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.3.tgz",
|
||||||
|
"integrity": "sha512-XcWlVmkHFICI4fuoJKgbp8PscDcS4i7pBH8nwJRBi3dpQvhCySwsWRYm4bOf/BzKVWkHOYaFw7qz9uBSrY3oug==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "patreon",
|
||||||
|
"url": "https://www.patreon.com/swiperjs"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "open_collective",
|
||||||
|
"url": "http://opencollective.com/swiper"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 4.7.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/tailwindcss": {
|
"node_modules/tailwindcss": {
|
||||||
"version": "4.2.4",
|
"version": "4.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
|
||||||
|
|||||||
@@ -9,9 +9,12 @@
|
|||||||
"lint": "eslint"
|
"lint": "eslint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"aos": "^2.3.4",
|
||||||
|
"bootstrap": "^5.3.8",
|
||||||
"next": "16.2.4",
|
"next": "16.2.4",
|
||||||
"react": "19.2.4",
|
"react": "19.2.4",
|
||||||
"react-dom": "19.2.4"
|
"react-dom": "19.2.4",
|
||||||
|
"swiper": "^12.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
|
|||||||
|
After Width: | Height: | Size: 252 KiB |
|
After Width: | Height: | Size: 293 KiB |
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 218 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 197 KiB |
|
After Width: | Height: | Size: 165 KiB |
|
After Width: | Height: | Size: 184 KiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 245 KiB |
|
After Width: | Height: | Size: 333 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 187 KiB |
|
After Width: | Height: | Size: 246 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 905 B |
|
After Width: | Height: | Size: 180 KiB |
|
After Width: | Height: | Size: 265 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 153 KiB |
|
After Width: | Height: | Size: 182 KiB |
|
After Width: | Height: | Size: 165 KiB |
|
After Width: | Height: | Size: 237 KiB |
|
After Width: | Height: | Size: 154 KiB |
|
After Width: | Height: | Size: 259 KiB |
|
After Width: | Height: | Size: 257 KiB |
|
After Width: | Height: | Size: 162 KiB |
|
After Width: | Height: | Size: 236 KiB |
|
After Width: | Height: | Size: 209 KiB |
|
After Width: | Height: | Size: 281 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 359 KiB |
|
After Width: | Height: | Size: 258 KiB |
|
After Width: | Height: | Size: 262 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 408 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 179 KiB |
|
After Width: | Height: | Size: 242 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 159 KiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 182 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 174 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 334 KiB |
|
After Width: | Height: | Size: 804 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 849 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 223 KiB |
|
After Width: | Height: | Size: 242 KiB |
|
After Width: | Height: | Size: 970 KiB |
|
After Width: | Height: | Size: 327 KiB |
|
After Width: | Height: | Size: 557 KiB |
|
After Width: | Height: | Size: 395 B |
|
After Width: | Height: | Size: 504 KiB |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 672 KiB |
|
After Width: | Height: | Size: 508 KiB |
|
After Width: | Height: | Size: 479 KiB |
|
After Width: | Height: | Size: 1.1 MiB |