| Server IP : 65.108.144.40 / Your IP : 216.73.217.165 Web Server : Apache/2.4.52 (Ubuntu) System : Linux ubuntu-8gb-hel1-1 5.15.0-173-generic #183-Ubuntu SMP Fri Mar 6 13:29:34 UTC 2026 x86_64 User : dev ( 1000) PHP Version : 8.2.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/Solum-construction/demo-job/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Solum Construction – Residential Renovations</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Tailwind CDN -->
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: "Inter", sans-serif;
}
/* Hero Slider */
.slide {
opacity: 0;
transform: scale(1.06);
transition: opacity 1.2s ease-in-out, transform 8s ease-in-out;
}
.slide.active {
opacity: 1;
transform: scale(1);
}
header .logo {
transition: 0.5s ease-in-out;
}
header.active .logo {
width: 90px;
height: 90px;
}
/* Simple fade-up */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-up {
animation: fadeUp 0.8s ease-out both;
}
</style>
</head>
<body class="bg-slate-50 text-slate-900">
<!-- ===================================
HEADER
==================================== -->
<header id="siteHeader" class="backdrop-blur-0 fixed top-0 left-0 right-0 z-40 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
<!-- Logo / Brand -->
<div class="flex items-center gap-2">
<div class="logo h-[125px] w-[125px]">
<a href="#"><img src="./images/Solum+Logo-1920w.webp" alt=""></a>
</div>
</div>
<!-- Desktop Nav -->
<nav class="hidden md:flex items-center gap-6 text-sm font-medium">
<a href="#home" class="text-lg font-light header-link text-white hover:text-blue-200 transition">Home</a>
<a href="#about" class="header-link text-lg font-light text-white hover:text-blue-200 transition">About</a>
<a href="#services"
class="header-link text-lg font-light text-white hover:text-blue-200 transition">Services</a>
<a href="#contact" class="header-link text-lg font-light text-white hover:text-blue-200 transition">Contact
us</a>
<a href="#contact"
class="ml-2 text-lg inline-flex header-btn items-center justify-center px-6 py-3 rounded-lg border border-white/70 text-white text-xs font-semibold hover:bg-white hover:text-slate-900 transition shadow-sm">
Free Estimation
</a>
</nav>
<!-- Mobile menu button -->
<button id="menuToggle"
class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg border border-white/70 text-white hover:bg-white/10 transition"
aria-label="Open menu">
<div class="space-y-1.5">
<span class="block w-5 h-0.5 bg-current"></span>
<span class="block w-5 h-0.5 bg-current"></span>
<span class="block w-5 h-0.5 bg-current"></span>
</div>
</button>
</div>
<!-- Mobile overlay -->
<div id="mobileOverlay"
class="fixed inset-0 bg-black/40 opacity-0 pointer-events-none transition-opacity duration-300"></div>
<!-- Mobile slide-in menu -->
<aside id="mobileMenu"
class="fixed top-0 right-0 h-full w-64 bg-white shadow-xl translate-x-full transition-transform duration-300 z-50 flex flex-col">
<div class="flex items-center justify-between px-4 py-4 border-b">
<span class="font-semibold">Menu</span>
<button id="closeMenu" class="text-2xl leading-none">×</button>
</div>
<nav class="flex-1 flex bg-white flex-col gap-4 px-6 py-6 text-sm">
<a href="#home" class="hover:text-blue-600 transition">Home</a>
<a href="#about" class="hover:text-blue-600 transition">About</a>
<a href="#services" class="hover:text-blue-600 transition">Services</a>
<a href="#contact" class="hover:text-blue-600 transition">Contact us</a>
<a href="#contact"
class="mt-4 inline-flex items-center justify-center px-4 py-2 rounded-lg bg-blue-600 text-white text-xs font-semibold hover:bg-blue-700 transition">
Free Estimation
</a>
</nav>
</aside>
</header>
<main id="home">
<!-- ===================================
HERO FULLSCREEN SLIDER
==================================== -->
<section class="relative h-screen flex items-center justify-center overflow-hidden">
<!-- Slides -->
<div class="absolute inset-0 -z-10">
<!-- Slide 1 -->
<div class="slide active absolute inset-0">
<img src="./images/corporate.png" class="w-full h-full object-cover" alt="Bright open kitchen and living area" />
</div>
<!-- Slide 2 -->
<div class="slide absolute inset-0">
<img src="./images/livingroom_580417750-1920w.webp" class="w-full h-full object-cover"
alt="Modern living room with wood floors" />
</div>
<!-- Slide 3 -->
<div class="slide absolute inset-0">
<img src="./images/basement_377603306-1920w.webp" class="w-full h-full object-cover" alt="Finished basement" />
</div>
<!-- gradient overlay for readability -->
<div class="absolute inset-0 bg-gradient-to-b from-black/45 via-black/15 to-black/100"></div>
</div>
<!-- Hero content -->
<div class="relative max-w-6xl mx-auto px-4 text-center text-white fade-up">
<h1 class="text-3xl lg:leading-snug sm:text-4xl md:text-6xl tracking-[0.1em] uppercase font-semibold mb-4">
Residential Renovations
</h1>
<p
class="uppercase lg:leading-snug tracking-[0.3em] max-w-xl mx-auto text-lg sm:text-xl md:text-2xl lg:text-4xl text-slate-100 mb-8">
In Montreal and Surrounding Areas
</p>
<a href="#contact"
class="inline-flex items-center justify-center px-8 py-3 rounded-lg bg-[rgb(30,58,94)] hover:bg-[rgb(255,255,255)] text-sm md:text-base hover:text-black font-medium shadow-xl shadow-blue-900/40 transition transform hover:-translate-y-0.5">
Contact us
</a>
</div>
</section>
<!-- ===================================
ABOUT SECTION
==================================== -->
<section id="about" class="relative py-20 bg-white overflow-hidden">
<div class="max-w-6xl mx-auto px-4 relative">
<!-- Decorative Background Shapes -->
<div class="absolute -top-20 -left-20 w-72 h-72 bg-blue-100 rounded-full blur-3xl opacity-40 -z-10"></div>
<div class="absolute -bottom-20 -right-20 w-96 h-96 bg-blue-200 rounded-full blur-3xl opacity-30 -z-10"></div>
<div class="grid md:grid-cols-2 gap-12 items-center">
<!-- Text Content -->
<div class="space-y-6 fade-up text-center md:text-left">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">
Your Residential Projects<br>
<span class="text-[rgb(196,171,141)] italic font-normal">Our Mission</span>
</h2>
<p class="text-gray-700 text-base md:text-lg leading-relaxed max-w-lg">
In your home, every detail counts. For owners of detached and semi-detached homes,
Solum Construction offers custom renovations with quality materials, fast turnaround,
and proven expertise. From floor installation to deck repairs, we make your home a
better place to live.
</p>
<a href="#contact"
class="text-white inline-flex items-center justify-center px-8 py-3 rounded-lg bg-[rgb(30,58,94)] hover:bg-[rgb(255,255,255)] text-sm md:text-base hover:text-black font-medium shadow-xl shadow-blue-900/40 transition transform hover:-translate-y-0.5">
Get Started
</a>
</div>
<!-- Image Card -->
<div class="relative fade-up">
<div
class="rounded-3xl overflow-hidden shadow-2xl shadow-gray-300/40 hover:scale-105 transition-transform duration-500">
<img src="./images/livingroom_580417750-1920w.webp" alt="Renovated interior"
class="w-full h-full object-cover rounded-3xl" />
</div>
<!-- Optional overlay caption -->
<div
class="absolute bottom-4 left-4 bg-white bg-opacity-90 px-4 py-2 rounded-full shadow-md text-sm font-medium text-gray-700">
Modern Renovation
</div>
</div>
</div>
</div>
</section>
<!-- ===================================
PARALLAX CTA
==================================== -->
<section class="relative py-24 lg:py-32 bg-fixed bg-center bg-cover"
style="background-image: url('kitchen_703633966-1920w.webp');">
<div class="absolute inset-0 bg-gradient-to-r from-slate-900/80 to-slate-800/60 backdrop-blur-sm"></div>
<div class="relative max-w-4xl mx-auto px-6 text-center text-white space-y-6">
<div class="flex flex-col items-center space-y-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 text-[rgb(255,255,255)] animate-bounce" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 8c-1.333 0-4 0-4 4s2.667 4 4 4 4-2.667 4-4-2.667-4-4-4zM12 2v4m0 12v4m8-8h-4M4 12H0m15.364-7.364l-2.828 2.828M6.464 17.536l-2.828 2.828m12.728 0l2.828-2.828M6.464 6.464L3.636 3.636" />
</svg>
<h2 class="text-3xl md:text-4xl font-bold">Request Your <span
class="text-[rgb(196,171,141)] italic font-normal">Free Estimate</span> Today!</h2>
</div>
<div class="space-y-4 md:space-y-6">
<p class="text-base md:text-lg text-slate-100">
Tell us about your renovation ideas and we’ll provide a clear, detailed estimate tailored to your home.
</p>
<div class="flex flex-col md:flex-row md:justify-center md:space-x-6 space-y-3 md:space-y-0">
<div class="flex items-center space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-[rgb(255,255,255)]" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
<span>Fast & Transparent Estimates</span>
</div>
<div class="flex items-center space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-[rgb(255,255,255)]" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13 16h-1v-4h-1m4 0h1v4h1m-6-8v1m0 0h.01M12 7v1m0 0h.01M12 3v1m0 0h.01" />
</svg>
<span>Expert Guidance for Your Home</span>
</div>
</div>
</div>
<!-- Call to action -->
<a href="#contact"
class="mt-6 inline-flex items-center space-x-2 justify-center px-10 py-4 rounded-xl bg-[rgb(30,58,94)] hover:bg-white text-white hover:text-[rgb(30,58,94)] text-base md:text-lg font-semibold shadow-xl shadow-[rgb(30,58,94)]/40 transition-transform transform hover:-translate-y-1">
<span>Contact Us</span>
</a>
</div>
</section>
<section class="py-16 bg-gray-50">
<div class="max-w-6xl mx-auto px-4 text-center space-y-6">
<!-- Heading -->
<p class="text-xs font-semibold tracking-[0.2em] uppercase text-[rgb(30,58,94)] mb-4">
About
</p>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">
Building Success, One Project at a Time
</h2>
<p class="text-gray-500 text-base md:text-lg max-w-2xl mx-auto">
Delivering fast, reliable, and efficient construction solutions—on-time project completion, seamless
coordination, and quality craftsmanship for every client.
</p>
<!-- Stats Card -->
<div
class="mt-10 bg-gray-900 text-white rounded-2xl shadow-xl flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-gray-700 overflow-hidden">
<!-- Stat 1 -->
<div class="flex-1 flex flex-col items-center justify-center p-6">
<div class="bg-yellow-400 rounded-full p-3 mb-3">
<!-- Icon: Check -->
<svg class="w-6 h-6 text-gray-900" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<h3 class="text-2xl font-bold">100+ Countries</h3>
</div>
<!-- Stat 2 -->
<div class="flex-1 flex flex-col items-center justify-center p-6">
<div class="bg-blue-400 rounded-full p-3 mb-3">
<!-- Icon: People -->
<svg class="w-6 h-6 text-gray-900" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17 20h5v-2a4 4 0 0 0-3-3.87M9 20H4v-2a4 4 0 0 1 3-3.87M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold">50M+ People</h3>
</div>
<!-- Stat 3 -->
<div class="flex-1 flex flex-col items-center justify-center p-6">
<div class="bg-pink-400 rounded-full p-3 mb-3">
<!-- Icon: Thumbs Up -->
<svg class="w-6 h-6 text-gray-900" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M14 9l2-2 4 4M5 13l4 4L19 7"></path>
</svg>
</div>
<h3 class="text-2xl font-bold">20K+ Orders processed</h3>
</div>
</div>
</div>
</section>
<!-- ===================================
SERVICES SECTIONSolum Construction
(Left cards + Right image)
==================================== -->
<section id="services" class="py-16 md:py-20 bg-white">
<div class="max-w-6xl mx-auto px-4">
<div class="text-center mb-10">
<p class="text-xs font-semibold tracking-[0.2em] uppercase text-[rgb(30,58,94)] mb-4">
Our services
</p>
<h2 class="text-2xl md:text-4xl font-bold">
Renovation Services Built for Your Home
</h2>
</div>
<div class="grid md:grid-cols-2 gap-10 items-center">
<!-- Left: service cards with SVG icons -->
<div class="space-y-4">
<!-- Card 1 - Flooring -->
<div class="bg-white rounded-2xl p-5 shadow-lg shadow-slate-300/60 flex gap-4 items-start">
<div class="flex-shrink-0">
<!-- Simple floor tile SVG -->
<svg viewBox="0 0 32 32" class="w-10 h-10 text-blue-600">
<rect x="3" y="3" width="10" height="10" fill="currentColor" opacity="0.85" />
<rect x="3" y="19" width="10" height="10" fill="currentColor" opacity="0.55" />
<rect x="19" y="3" width="10" height="10" fill="currentColor" opacity="0.55" />
<rect x="19" y="19" width="10" height="10" fill="currentColor" opacity="0.85" />
</svg>
</div>
<div>
<h3 class="font-semibold text-sm md:text-base mb-1">Flooring Installation</h3>
<p class="text-xs md:text-sm text-slate-600">
Durable, stylish flooring installed with precision to match your lifestyle and home layout.
</p>
</div>
</div>
<!-- Card 2 - Decks & Patios -->
<div class="bg-white rounded-2xl p-5 shadow-lg shadow-slate-300/60 flex gap-4 items-start">
<div class="flex-shrink-0">
<!-- Deck icon SVG -->
<svg viewBox="0 0 32 32" class="w-10 h-10 text-amber-600">
<rect x="3" y="18" width="26" height="3" fill="currentColor" />
<rect x="3" y="23" width="26" height="3" fill="currentColor" opacity="0.9" />
<rect x="3" y="28" width="26" height="3" fill="currentColor" opacity="0.7" />
<line x1="8" y1="3" x2="8" y2="18" stroke="currentColor" stroke-width="2" />
<line x1="24" y1="3" x2="24" y2="18" stroke="currentColor" stroke-width="2" />
</svg>
</div>
<div>
<h3 class="font-semibold text-sm md:text-base mb-1">Decks and Patios</h3>
<p class="text-xs md:text-sm text-slate-600">
Outdoor decks and patios designed for comfort, safety and Montreal’s changing seasons.
</p>
</div>
</div>
<!-- Card 3 - Interior Finishes -->
<div class="bg-white rounded-2xl p-5 shadow-lg shadow-slate-300/60 flex gap-4 items-start">
<div class="flex-shrink-0">
<!-- Paint roller SVG -->
<svg viewBox="0 0 32 32" class="w-10 h-10 text-emerald-600">
<rect x="4" y="5" width="18" height="8" rx="2" fill="currentColor" />
<rect x="10" y="13" width="4" height="5" fill="currentColor" opacity="0.7" />
<path d="M12 18 v8 a2 2 0 0 0 2 2 h2" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</div>
<div>
<h3 class="font-semibold text-sm md:text-base mb-1">Interior Finishes</h3>
<p class="text-xs md:text-sm text-slate-600">
Trim, baseboards, wall finishes and details that elevate the look and feel of your spaces.
</p>
</div>
</div>
<!-- Card 4 - Concrete -->
<div class="bg-white rounded-2xl p-5 shadow-lg shadow-slate-300/60 flex gap-4 items-start">
<div class="flex-shrink-0">
<!-- Concrete block SVG -->
<svg viewBox="0 0 32 32" class="w-10 h-10 text-slate-700">
<path d="M4 12 L16 6 L28 12 L16 18 Z" fill="currentColor" opacity="0.85" />
<path d="M4 12 v10 l12 6 v-10 Z" fill="currentColor" opacity="0.7" />
<path d="M28 12 v10 l-12 6 v-10 Z" fill="currentColor" opacity="0.5" />
</svg>
</div>
<div>
<h3 class="font-semibold text-sm md:text-base mb-1">Small Concrete Jobs</h3>
<p class="text-xs md:text-sm text-slate-600">
Steps, landings and small exterior concrete work built to last, with clean finishes.
</p>
</div>
</div>
</div>
<!-- Right: image -->
<div class="fade-up">
<div class="relative">
<div
class="absolute -inset-3 rounded-3xl bg-gradient-to-tr from-blue-100 via-transparent to-blue-200 -z-10">
</div>
<img src="./images/basement_377603306-1920w.webp" alt="Finished basement living room"
class="rounded-3xl shadow-xl shadow-slate-400/50 w-full object-cover" />
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-gray-50">
<div class="max-w-6xl mx-auto px-4 text-center mb-12">
<p class="text-xs font-bold tracking-widest uppercase text-[rgb(30,58,94)] mb-4">Integration</p>
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">Industries we serve</h2>
<p class="text-gray-600 max-w-2xl mx-auto">
We deliver tailored solutions that meet the unique needs of each sector. Our cross-industry expertise allows
us to innovate, adapt, and drive results that matter.
</p>
</div>
<div class="max-w-6xl mx-auto px-4 grid md:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="relative group rounded-xl overflow-hidden shadow-lg">
<img src="./images/vacational.png" alt="Vacation rentals"
class="w-full h-100 object-cover transition-transform duration-500 group-hover:scale-110">
<div
class="absolute bottom-0 left-0 w-full bg-black/50 p-6 text-white transition-all duration-500 group-hover:bg-black/80 rounded-t-lg">
<h3 class="text-lg font-semibold mb-1">Vacation rentals</h3>
<p class="text-sm">Enjoy fully furnished spaces with amenities like full kitchens.</p>
</div>
</div>
<!-- Card 2 -->
<div class="relative group rounded-xl overflow-hidden shadow-lg">
<img src="./images/corporate.png" alt="Corporate housing"
class="w-full h-100 object-cover transition-transform duration-500 group-hover:scale-110">
<div
class="absolute bottom-0 left-0 w-full bg-black/50 p-6 text-white transition-all duration-500 group-hover:bg-black/80 rounded-t-lg">
<h3 class="text-lg font-semibold mb-1">Corporate housing</h3>
<p class="text-sm">Corporate housing offers a convenient and comfortable living solution for business.</p>
</div>
</div>
<!-- Card 3 -->
<div class="relative group rounded-xl overflow-hidden shadow-lg">
<img src="./images/Hotels.png" alt="Hotels & resorts"
class="w-full h-100 object-cover transition-transform duration-500 group-hover:scale-110">
<div
class="absolute bottom-0 left-0 w-full bg-black/50 p-6 text-white transition-all duration-500 group-hover:bg-black/80 rounded-t-lg">
<h3 class="text-lg font-semibold mb-1">Hotels & resorts</h3>
<p class="text-sm">Discover a world where comfort meets elegance. Our curated spaces redefine hospitality.
</p>
</div>
</div>
</div>
</section>
<!-- ===================================
SERVICE AREAS + MAP
==================================== -->
<section class="py-16 md:py-20 bg-white">
<div class="max-w-6xl mx-auto px-4">
<!-- Header / Intro -->
<div class="text-center space-y-4 fade-up">
<p class="text-xs font-bold tracking-widest uppercase text-[rgb(30,58,94)] font-semibold">Service Areas</p>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">Service Areas</h2>
<p class="text-gray-700 text-base md:text-lg leading-relaxed max-w-2xl mx-auto">
We proudly serve the Town of Mount Royal, the entire island of Montreal, and the North Shore. Our team
excels in managing Montreal's logistical challenges to deliver quality services throughout the Greater
Montreal Area with care and efficiency.
</p>
<p class="text-3xl"><span class="text-[rgb(196,171,141)] italic font-normal"> Give us a call</span> and let's
talk about your project!</p>
</div>
<!-- Map Card -->
<div
class="mt-10 fade-up relative rounded-3xl overflow-hidden shadow-2xl shadow-gray-300/30 h-72 md:h-96 hover:scale-105 transition-transform duration-500">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2795.597632092616!2d-73.640!3d45.515!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4f2b8d5a5b%3A0x2d2a2c9a4af0!2sMontreal%2C%20QC!5e0!3m2!1sen!2sca!4v1700000000000"
width="100%" height="100%" class="border-0" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
<div
class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white bg-opacity-90 px-5 py-2 rounded-full shadow-md text-sm font-medium text-gray-700">
Greater Montreal Area
</div>
</div>
<!-- CTA Button -->
<div class="mt-8 text-center fade-up">
<a href="tel:+1234567890"
class="text-white inline-flex items-center justify-center px-8 py-3 rounded-lg bg-[rgb(30,58,94)] hover:bg-[rgb(255,255,255)] text-sm md:text-base hover:text-black font-medium shadow-xl shadow-blue-900/40 transition transform hover:-translate-y-0.5">
Call Us Today
</a>
</div>
</div>
</section>
<!-- ===================================
QUALITY & PRECISION
==================================== -->
<section class="relative py-20 md:py-24 bg-gradient-to-b from-slate-900 to-slate-800 text-white overflow-hidden">
<!-- Decorative Circles -->
<div class="absolute -top-16 -left-16 w-64 h-64 bg-blue-800/30 rounded-full blur-3xl animate-pulse-slow"></div>
<div class="absolute -bottom-16 -right-16 w-80 h-80 bg-purple-800/30 rounded-full blur-3xl animate-pulse-slow">
</div>
<div class="max-w-6xl mx-auto px-4 grid md:grid-cols-2 gap-12 items-center relative z-10">
<!-- Text Content -->
<div class="space-y-6 fade-up">
<p class="text-xs font-semibold tracking-widest uppercase text-blue-300">
Why Solum
</p>
<h2 class="text-3xl md:text-4xl font-bold leading-snug">
Quality and Precision<br />
<span class="text-[rgb(196,171,141)] italic font-normal">Under One Roof</span>
</h2>
<p class="text-base md:text-lg text-slate-100 leading-relaxed">
Because your home deserves the best, Solum Construction emphasizes a collaborative approach at every stage
of your renovation.<br />
Thanks to modern tools such as QuickBooks for fast, fluid communication, attentive customer service and
high-quality materials, we ensure meticulous results that meet your expectations and your budget.
</p>
<!-- Highlight Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
<div class="flex items-start gap-3 p-4 bg-slate-800/50 rounded-xl hover:bg-slate-700/70 transition">
<div class="text-blue-400 text-2xl">
🔧
</div>
<p class="text-sm md:text-base text-slate-100">
High-quality materials and meticulous workmanship.
</p>
</div>
<div class="flex items-start gap-3 p-4 bg-slate-800/50 rounded-xl hover:bg-slate-700/70 transition">
<div class="text-purple-400 text-2xl">
🕒
</div>
<p class="text-sm md:text-base text-slate-100">
Efficient communication with modern tools like QuickBooks.
</p>
</div>
</div>
</div>
<!-- Image with Overlay -->
<div class="fade-up relative group">
<img src="./images/apchq-1.jpg" alt="Quality kitchen renovation"
class="rounded-3xl w-full object-cover transition-transform duration-500 group-hover:scale-100" />
</div>
</div>
</section>
<!-- ===================================
FOOTER / CONTACT
==================================== -->
<footer id="contact" class="bg-white pt-14 border-t border-slate-200">
<div class="max-w-6xl mx-auto px-4 grid grid-cols-1 md:grid-cols-[2fr_1fr_1fr] gap-10 items-start">
<!-- Logo -->
<div class="flex justify-start">
<a href="#">
<img src="./images/Solum+Logo.webp" alt="Solum Construction" class="w-[200px] h-auto">
</a>
</div>
<!-- Address + Opening Hours -->
<div class="text-sm space-y-6">
<div>
<h3 class="font-semibold text-[rgb(30,58,94)] text-lg mb-1">
Address
</h3>
<p class="text-slate-700 leading-relaxed">
Villeray, Montreal, QC<br>
H2P 2G3
</p>
</div>
<div>
<h3 class="font-semibold text-[rgb(30,58,94)] text-lg mb-1">
Opening Hours
</h3>
<p class="text-slate-700 leading-relaxed">
lundi – vendredi<br>
10h00 – 18h00
</p>
</div>
</div>
<!-- Contact -->
<div class="text-sm space-y-6">
<div>
<h3 class="font-semibold text-[rgb(30,58,94)] text-lg mb-1">
Phone
</h3>
<p class="text-slate-700">514-835-8396</p>
</div>
<div>
<h3 class="font-semibold text-[rgb(30,58,94)] text-lg mb-1">
Email
</h3>
<p class="text-slate-700">info@solum-construction.com</p>
</div>
<p class="text-slate-600 text-sm">
RBQ 5851-0462-01
</p>
</div>
</div>
<!-- Bottom Bar -->
<div class="mt-12 text-center py-5 text-xs text-slate-400 bg-[rgb(30,58,94)]">
© <span id="year" class="text-white"></span> Solum Construction. All rights reserved.
</div>
</footer>
</main>
<!-- ===================================
SCRIPTS
==================================== -->
<script>
// Footer year
document.getElementById('year').textContent = new Date().getFullYear();
// Mobile menu
const menuToggle = document.getElementById('menuToggle');
const closeMenuBtn = document.getElementById('closeMenu');
const mobileMenu = document.getElementById('mobileMenu');
const mobileOverlay = document.getElementById('mobileOverlay');
function openMenu() {
mobileMenu.classList.remove('translate-x-full');
mobileOverlay.classList.remove('pointer-events-none');
mobileOverlay.classList.add('opacity-100');
}
function closeMenu() {
mobileMenu.classList.add('translate-x-full');
mobileOverlay.classList.add('pointer-events-none');
mobileOverlay.classList.remove('opacity-100');
}
menuToggle.addEventListener('click', openMenu);
closeMenuBtn.addEventListener('click', closeMenu);
mobileOverlay.addEventListener('click', closeMenu);
// Hero slider
const slides = document.querySelectorAll('.slide');
let current = 0;
function showNextSlide() {
slides[current].classList.remove('active');
current = (current + 1) % slides.length;
slides[current].classList.add('active');
}
setInterval(showNextSlide, 6000); // every 6 seconds
// Transparent -> solid header on scroll
const header = document.getElementById('siteHeader');
const headerLinks = document.querySelectorAll('.header-link');
const headerBtn = document.querySelector('.header-btn');
function onScroll() {
if (window.scrollY > window.innerHeight * 0.1) {
// Header background
header.classList.add('bg-white/90', 'shadow', 'backdrop-blur-md', 'active');
header.classList.remove('bg-transparent', 'backdrop-blur-0');
// Links → BLUE
headerLinks.forEach(link => {
link.classList.remove('text-white', 'hover:text-blue-200');
link.classList.add('text-[rgb(30,58,94)]', 'hover:text-blue-700');
});
// Button → BLUE
headerBtn.classList.remove(
'border-white',
'text-white',
'hover:bg-white',
'hover:text-slate-900'
);
headerBtn.classList.add(
'border-[rgb(30,58,94)]',
'text-[rgb(30,58,94)]',
'hover:bg-[rgb(30,58,94)]',
'hover:text-white'
);
} else {
// Back to top
header.classList.remove('bg-white/90', 'shadow', 'backdrop-blur-md', 'active');
header.classList.add('bg-transparent', 'backdrop-blur-0');
// Links → WHITE
headerLinks.forEach(link => {
link.classList.add('text-white', 'hover:text-blue-200');
link.classList.remove('text-[rgb(30,58,94)]', 'hover:text-blue-700');
});
// Button → WHITE
headerBtn.classList.add(
'border-white',
'text-white',
'hover:bg-white',
'hover:text-slate-900'
);
headerBtn.classList.remove(
'border-[rgb(30,58,94)]',
'text-[rgb(30,58,94)]',
'hover:bg-[rgb(30,58,94)]',
'hover:text-white'
);
}
}
window.addEventListener('scroll', onScroll);
onScroll();
</script>
</body>
</html>