Upload Next.js project
This commit is contained in:
@@ -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>
|
||||
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user