You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
606 lines
33 KiB
HTML
606 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Responsive Navbar & Swiper Hero</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
|
<!-- 1. Include Swiper's CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
|
|
|
|
<style>
|
|
/* Navbar transition */
|
|
.nav-menu {
|
|
transition: max-height 0.5s ease-in-out;
|
|
}
|
|
|
|
/* Custom animation for the text sliding up */
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(50px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Class to trigger the animation */
|
|
.animate-slide-in-up {
|
|
animation: slideInUp 0.8s ease-out forwards;
|
|
}
|
|
|
|
/* Generic styling for ALL pagination dots */
|
|
.swiper-pagination-bullet {
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Generic styling for ALL ACTIVE pagination dots */
|
|
.swiper-pagination-bullet-active {
|
|
background-color: rgb(177, 151, 119); /* Your brand gold color */
|
|
}
|
|
|
|
/* ======================================================== */
|
|
/* NEW STYLES FOR THE PROJECTS AND NEWS SLIDER PAGINATION */
|
|
/* ======================================================== */
|
|
|
|
/* This targets the containers for the dots, not the dots themselves */
|
|
.projects-pagination,
|
|
.news-pagination {
|
|
/* Add space between the slider images and the dots */
|
|
margin-top: 3rem !important; /* 48px - adjust as you like */
|
|
|
|
/* Override Swiper's default absolute positioning to place the dots
|
|
in the normal document flow, below the slider content. */
|
|
position: relative !important;
|
|
bottom: auto !important;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body class="bg-[rgba(39,39,39,255)]">
|
|
|
|
<!-- =========== NAVBAR (from previous step) =========== -->
|
|
<nav x-data="{ isOpen: false }" class="relative bg-[rgba(39,39,39,255)] lg:bg-transparent z-20">
|
|
<!-- ... your navbar code ... -->
|
|
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
|
<a href="#" class="text-white"><img src="images/logo.png" alt="Your Logo" class="h-8"></a>
|
|
<div class="hidden lg:flex items-center space-x-6 text-white"><a href="#" class="hover:text-[rgb(177,151,119)]">Home</a><a href="#" class="hover:text-[rgb(177,151,119)]">About</a><a href="#" class="hover:text-[rgb(177,151,119)]">Services</a><a href="#" class="hover:text-[rgb(177,151,119)]">Projects</a><a href="#" class="hover:text-[rgb(177,151,119)]">Pages</a><a href="#" class="hover:text-[rgb(177,151,119)]">Blog</a><a href="#" class="hover:text-[rgb(177,151,119)]">Contact</a></div>
|
|
<button @click="isOpen = !isOpen" class="lg:hidden text-white focus:outline-none"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4" /></svg></button>
|
|
</div>
|
|
<div :class="isOpen ? 'max-h-screen' : 'max-h-0'" class="nav-menu lg:hidden overflow-hidden absolute w-full bg-[rgba(39,39,39,255)]"><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Home</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">About</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Services</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Projects</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Pages</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Blog</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Contact</a></div>
|
|
</nav>
|
|
|
|
<!-- =========== SWIPER HERO SECTION START =========== -->
|
|
<section class="relative -mt-20 h-screen min-h-[600px] lg:pl-40 w-full"> <!-- -mt-20 to pull it under the navbar -->
|
|
<!-- Swiper -->
|
|
<div class="swiper hero-swiper h-full w-full">
|
|
<div class="swiper-wrapper">
|
|
<!-- Slide 1 -->
|
|
<div class="swiper-slide bg-cover bg-center" style="background-image: url('images/slider1.jpg')">
|
|
<div class="slide-content absolute inset-0 bg-black bg-opacity-40 flex items-center p-8 lg:p-16">
|
|
<div class="text-container w-full flex justify-end lg:justify-start">
|
|
<div class="animated-text max-w-lg text-right lg:text-left text-white opacity-0">
|
|
<h1 class="text-4xl lg:text-6xl font-semibold leading-tight">Innovate Design in Toronto</h1>
|
|
<p class="mt-4 text-sm">Architecture viverra tellus nec massa dictum the euismoe.<br>Curabitur viverra the posuere aukue velit.</p>
|
|
<a href="#" class="mt-8 inline-block border border-white text-white font-bold py-3 px-8 hover:bg-opacity-80 transition-colors">
|
|
Buy Now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2 -->
|
|
<div class="swiper-slide bg-cover bg-center" style="background-image: url('images/slider2.jpg')">
|
|
<div class="slide-content absolute inset-0 bg-black bg-opacity-40 flex items-center p-8 lg:p-16">
|
|
<div class="text-container w-full flex justify-end lg:justify-start">
|
|
<div class="animated-text max-w-lg text-right lg:text-left text-white opacity-0">
|
|
<h1 class="text-4xl lg:text-6xl font-semibold leading-tight">Innovate Design in Canada</h1>
|
|
<p class="mt-4 text-sm">Srchitecture viverra tellus nec massa dictum the euismoe.<br>Curabitur viverra the posuere aukue velit.</p>
|
|
<a href="#" class="mt-8 inline-block border border-white text-white font-bold py-3 px-8 hover:bg-opacity-80 transition-colors">
|
|
Buy Now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Pagination (Circles) - Hidden on mobile, visible on large screens -->
|
|
<div class="swiper-pagination hidden lg:block"></div>
|
|
</div>
|
|
</section>
|
|
<!-- =========== SWIPER HERO SECTION END =========== -->
|
|
|
|
<!-- =========== ABOUT US SECTION START =========== -->
|
|
<section id="about-us" class="bg-[rgba(39,39,39,255)] py-16 lg:py-24">
|
|
<div class="container mx-auto px-6">
|
|
<!-- Main grid for text and image -->
|
|
<div class="flex flex-col lg:flex-row items-start gap-12 lg:gap-16">
|
|
|
|
<!-- Left Column: Text Content -->
|
|
<div class="lg:w-1/2 pl-20">
|
|
<!-- Wrapper Div with Flexbox -->
|
|
<div class="flex items-baseline gap-x-2 mb-4">
|
|
<h2 class="text-4xl font-semibold text-white">ABOUT</h2>
|
|
<h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">BAUEN</h2>
|
|
</div>
|
|
|
|
|
|
<p class="text-gray-300 leading-relaxed">
|
|
Architecture viverra tristique justo duis vitae diam neque nivamus aestan ateuene artines aringianu atelit finibus viverra nec lacus. Nedana theme erodino setlie suscipe no curabit tristique.
|
|
|
|
</p>
|
|
<p class="text-gray-300 leading-relaxed mt-4">
|
|
Design inilla duiman at elit finibus viverra nec a lacus themo the drudea seneoice misuscipit non sagie the fermen.
|
|
</p>
|
|
<p class="text-gray-300 leading-relaxed mt-4">
|
|
Planner inilla duiman at elit finibus viverra nec a lacus themo the drudea seneoice misuscipit non sagie the fermen. Viverra tristique jusio the ivite dianne onen nivami acsestion augue artine.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Right Column: Image and Office Box (Corrected) -->
|
|
<div class="lg:w-1/2 w-full pl-20">
|
|
|
|
<!--
|
|
The Image Wrapper:
|
|
1. We add 'relative' here to create the positioning context.
|
|
2. The image and the box will both live inside this div.
|
|
-->
|
|
<div class="relative group overflow-hidden rounded-lg">
|
|
<img src="images/about.jpg" alt="Modern building interior" class="w-full h-auto object-cover transform transition-transform duration-500 ease-in-out group-hover:scale-105">
|
|
|
|
|
|
<div class="absolute bottom-0 right-0 translate-y-1/2 w-3/4 mr-40 bg-[rgb(50,50,50)] text-white p-6 m-6 shadow-lg">
|
|
<h3 class="font-semibold text-lg">Canada Office</h3>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- =========== ABOUT US SECTION END =========== -->
|
|
|
|
<!-- =========== OUR PROJECTS SECTION START =========== -->
|
|
<section class="pl-20 bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white">
|
|
<div class="container mx-auto px-6">
|
|
|
|
<!-- Section Title: "Our PROJECTS" -->
|
|
<div class="flex items-baseline gap-x-2 mb-12">
|
|
<h2 class="text-4xl font-semibold text-white">Our</h2>
|
|
<h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">Projects</h2>
|
|
</div>
|
|
|
|
<!-- Swiper container with relative positioning for pagination -->
|
|
<div class="relative">
|
|
<!-- Swiper instance with a unique class 'projects-swiper' -->
|
|
<div class="swiper projects-swiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<!-- SLIDE 1 (Contains two projects) -->
|
|
<div class="swiper-slide">
|
|
<div class="grid grid-cols-2 md:grid-cols-2 gap-8">
|
|
<!-- Project 1 -->
|
|
<div class="project-card">
|
|
<!-- Image with hover effects wrapper -->
|
|
<div class="relative group overflow-hidden ">
|
|
<img src="images/slider1.jpg" alt="Interior Design Project" class="w-full h-auto object-cover">
|
|
<!-- Dark overlay that appears on hover -->
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300"></div>
|
|
|
|
<!-- Text Block Container (Title and Type) -->
|
|
<div class="absolute bottom-8 left-8 transform group-hover:-translate-y-4 transition-transform duration-300">
|
|
<h3 class="text-xl font-semibold text-white">Modern Villa, Toronto</h3>
|
|
<p class="font-semibold text-lg text-[rgb(177,151,119)] mt-1">Residential</p>
|
|
</div>
|
|
|
|
<!-- Arrow that appears on hover -->
|
|
<div class="absolute bottom-8 right-8 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-2 transition-all duration-300">
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
|
|
</div>
|
|
</div>
|
|
<!-- The text under the image has been REMOVED from here -->
|
|
</div>
|
|
<!-- Project 2 -->
|
|
<div class="project-card">
|
|
<div class="relative group overflow-hidden ">
|
|
<img src="images/proj2.jpg" alt="Commercial Building Project" class="w-full h-auto object-cover">
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300"></div>
|
|
<div class="absolute bottom-8 left-8 transform group-hover:-translate-y-4 transition-transform duration-300">
|
|
<h3 class="text-xl font-semibold text-white">The Glass Tower</h3>
|
|
<p class="font-semibold text-lg text-[rgb(177,151,119)] mt-1">Commercial</p>
|
|
</div>
|
|
<div class="absolute bottom-8 right-8 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-2 transition-all duration-300">
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 2 (Contains another two projects) -->
|
|
<div class="swiper-slide">
|
|
<div class="grid grid-cols-2 md:grid-cols-2 gap-8">
|
|
<!-- Project 3 -->
|
|
<div class="project-card">
|
|
<div class="relative group overflow-hidden ">
|
|
<img src="images/proj3.jpg" alt="Urban Planning Project" class="w-full h-auto object-cover">
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300"></div>
|
|
<div class="absolute bottom-8 left-8 transform group-hover:-translate-y-4 transition-transform duration-300">
|
|
<h3 class="text-xl font-semibold text-white">City Park Complex</h3>
|
|
<p class="font-semibold text-lg text-[rgb(177,151,119)] mt-1">Urban</p>
|
|
</div>
|
|
<div class="absolute bottom-8 right-8 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-2 transition-all duration-300">
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Project 4 -->
|
|
<div class="project-card">
|
|
<div class="relative group overflow-hidden ">
|
|
<img src="images/proj4.jpg" alt="Interior Design Project" class="w-full h-auto object-cover">
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300"></div>
|
|
<div class="absolute bottom-8 left-8 transform group-hover:-translate-y-4 transition-transform duration-300">
|
|
<h3 class="text-xl font-semibold text-white">Loft Renovation</h3>
|
|
<p class="font-semibold text-lg text-[rgb(177,151,119)] mt-1">Interior</p>
|
|
</div>
|
|
<div class="absolute bottom-8 right-8 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-2 transition-all duration-300">
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination (Dots) - REPLACED the navigation buttons -->
|
|
<div class="swiper-pagination projects-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- =========== OUR PROJECTS SECTION END =========== -->
|
|
<!-- =========== OUR SERVICES SECTION START =========== -->
|
|
<section class="pl-20 bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white">
|
|
<div class="container mx-auto px-6">
|
|
|
|
<!-- Section Title -->
|
|
<h2 class=" text-4xl font-semibold mb-12">Our Services</h2>
|
|
|
|
<!-- Responsive Grid for the service cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Service Card 1: Architecture -->
|
|
<div class="service-card group relative p-8 border border-gray-700 h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] ">
|
|
<!-- Icon/Image -->
|
|
<img src="images/icon1.png" alt="Architecture Icon" class="h-12 w-12 mb-6">
|
|
|
|
<!-- Text Content -->
|
|
<h3 class="font-semibold text-xl mb-2">Architecture</h3>
|
|
<p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300">
|
|
Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss.
|
|
</p>
|
|
|
|
<!-- Number in the corner -->
|
|
<div class="absolute bottom-8 right-8 text-7xl font-bold text-white/10 group-hover:text-white/20 transition-colors duration-300">
|
|
01
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Card 2: Interior Design -->
|
|
<div class="service-card group relative p-8 border border-gray-700 h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] ">
|
|
<!-- Icon/Image -->
|
|
<img src="images/icon2.png" alt="Interior Design Icon" class="h-12 w-12 mb-6">
|
|
|
|
<!-- Text Content -->
|
|
<h3 class="font-semibold text-xl mb-2">Interior Design</h3>
|
|
<p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300">
|
|
Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss.
|
|
</p>
|
|
|
|
<!-- Number in the corner -->
|
|
<div class="absolute bottom-8 right-8 text-7xl font-bold text-white/10 group-hover:text-white/20 transition-colors duration-300">
|
|
02
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Card 3: Urban Design -->
|
|
<div class="service-card group relative p-8 border border-gray-700 h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] ">
|
|
<!-- Icon/Image -->
|
|
<img src="images/icon3.png" alt="Urban Design Icon" class="h-12 w-12 mb-6">
|
|
|
|
<!-- Text Content -->
|
|
<h3 class="font-semibold text-xl mb-2">Urban Design</h3>
|
|
<p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300">
|
|
Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss.
|
|
</p>
|
|
|
|
<!-- Number in the corner -->
|
|
<div class="absolute bottom-8 right-8 text-7xl font-bold text-white/10 group-hover:text-white/20 transition-colors duration-300">
|
|
03
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =========== OUR SERVICES SECTION END =========== -->
|
|
<!-- =========== CURRENT NEWS SECTION START =========== -->
|
|
<section class="bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white pl-20">
|
|
<div class="container mx-auto px-6">
|
|
|
|
<!-- Section Title: "Current NEWS" -->
|
|
<div class="flex items-baseline gap-x-3 mb-12">
|
|
<h2 class="text-4xl font-semibold text-white">Current</h2>
|
|
<h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">News</h2>
|
|
</div>
|
|
|
|
<!-- Swiper container with relative positioning for pagination -->
|
|
<div class="relative">
|
|
<!-- Swiper instance with a unique class 'news-swiper' -->
|
|
<div class="swiper news-swiper pb-16"> <!-- Added pb-16 for space for the overlapping box -->
|
|
<div class="swiper-wrapper">
|
|
|
|
<!-- SLIDE 1 (Contains two news items) -->
|
|
<div class="swiper-slide">
|
|
<div class="grid grid-cols-2 md:grid-cols-2 gap-x-8 gap-y-16">
|
|
<!-- News Card 1 -->
|
|
<div class="news-card relative group">
|
|
<img src="images/slider1.jpg" alt="A modern building facade" class=" object-cover w-full h-full">
|
|
|
|
<!-- Text Box (Half in, Half out) -->
|
|
<div class="absolute bottom-0 left-1/2 w-11/12 p-6 text-center
|
|
-translate-x-1/2 translate-y-1/2
|
|
bg-[rgba(39,39,39,255)] border border-gray-700
|
|
transition-all duration-300 ease-in-out
|
|
group-hover:translate-y-0 ">
|
|
<p class="text-sm text-gray-400">Architecture- 20.12.2025</p>
|
|
<h3 class="font-semibold text-lg mt-2 text-[rgb(177,151,119)]">Modern Architectural Structures</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- News Card 2 -->
|
|
<div class="news-card relative group">
|
|
<img src="images/proj2.jpg" alt="An open-plan office interior" class=" object-cover w-full h-full">
|
|
|
|
<!-- Text Box (Half in, Half out) -->
|
|
<div class="absolute bottom-0 left-1/2 w-11/12 p-6 text-center
|
|
-translate-x-1/2 translate-y-1/2
|
|
bg-[rgba(39,39,39,255)] border border-gray-700
|
|
transition-all duration-300 ease-in-out
|
|
group-hover:translate-y-0 ">
|
|
<p class="text-sm text-gray-400">Interior -18.12.2025</p>
|
|
<h3 class="font-semibold text-lg mt-2 text-[rgb(177,151,119)]">Modernism in Architecture</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLIDE 2 (Contains two more news items) -->
|
|
<div class="swiper-slide">
|
|
<div class="grid grid-cols-2 md:grid-cols-2 gap-x-8 gap-y-16">
|
|
<!-- News Card 3 -->
|
|
<div class="news-card relative group">
|
|
<img src="images/proj3.jpg" alt="A residential building at dusk" class=" object-cover w-full h-full">
|
|
<div class="absolute bottom-0 left-1/2 w-11/12 p-6 text-center -translate-x-1/2 translate-y-1/2 bg-[rgba(39,39,39,255)] border border-gray-700 transition-all duration-300 ease-in-out group-hover:translate-y-0 ">
|
|
<p class="text-sm text-gray-400">Urban -16.12.2025</p>
|
|
<h3 class="font-semibold text-lg mt-2 text-[rgb(177,151,119)]">Postmodern Architecture</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- News Card 4 -->
|
|
<div class="news-card relative group">
|
|
<img src="images/proj4.jpg" alt="A minimalist kitchen design" class=" object-cover w-full h-full">
|
|
<div class="absolute bottom-0 left-1/2 w-11/12 p-6 text-center -translate-x-1/2 translate-y-1/2 bg-[rgba(39,39,39,255)] border border-gray-700 transition-all duration-300 ease-in-out group-hover:translate-y-0 ">
|
|
<p class="text-sm text-gray-400">Planning -14.12.2025</p>
|
|
<h3 class="font-semibold text-lg mt-2 text-[rgb(177,151,119)]">Modern Architectural Buildinds</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination (Dots) -->
|
|
<div class="swiper-pagination news-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- =========== FULL-WIDTH PROMO VIDEO SECTION START =========== -->
|
|
<section class="w-full bg-[rgba(39,39,39,1)] py-16 sm:py-24">
|
|
<div class="container mx-auto px-6">
|
|
|
|
<!-- THIS IS THE DIV TO CHANGE -->
|
|
<div
|
|
class="relative w-full aspect-video bg-cover bg-center"
|
|
style="background-image: url('images/slider2.jpg');">
|
|
<!-- IMPORTANT: Change the path to your background image file -->
|
|
<!-- ADDED bg-cover, bg-center, and the inline style attribute -->
|
|
|
|
<!-- 1. YouTube Player Container (the iframe will be inserted here by JS) -->
|
|
<div class="absolute inset-0 z-0">
|
|
<div id="youtube-player" class="w-full h-full"></div>
|
|
</div>
|
|
|
|
<!-- 2. Custom Overlay (Holds controls and is hidden when video plays) -->
|
|
<div id="video-overlay" class="absolute inset-0 z-20 transition-opacity duration-500">
|
|
|
|
<!-- Dark tint for better text readability on any video -->
|
|
<div class="absolute inset-0 bg-black/40"></div>
|
|
|
|
<!-- Content on top of the tint -->
|
|
<div class="relative z-10 h-full flex items-center justify-start">
|
|
<div class="pl-8 sm:pl-16 lg:pl-24 text-left">
|
|
|
|
<!-- Custom Play Button (Gold circle on all screen sizes) -->
|
|
<button id="promo-video-play-btn"
|
|
class="
|
|
flex items-center justify-center h-20 w-20 lg:h-24 lg:w-24 rounded-full
|
|
bg-[rgb(177,151,119)]
|
|
transition-all duration-300 transform hover:scale-105">
|
|
|
|
<!-- White Play Icon SVG -->
|
|
<svg class="w-8 h-8 lg:w-10 lg:h-10 text-white ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
|
|
</button>
|
|
|
|
<!-- Text under the button -->
|
|
<p class="mt-4 text-white font-semibold">View Promo Video</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- =========== FULL-WIDTH PROMO VIDEO SECTION END =========== -->
|
|
<!-- =========== FULL-WIDTH PROMO VIDEO SECTION END =========== -->
|
|
<!-- =========== CURRENT NEWS SECTION END =========== -->
|
|
<!-- 4. Include Swiper's JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
|
|
<!-- 5. Initialize Swiper -->
|
|
<script>
|
|
// ===================================
|
|
// YOUTUBE API SCRIPT (PART 1 - GLOBAL SETUP)
|
|
// This loads the YouTube API and defines the functions it will call.
|
|
// This part MUST be outside the 'DOMContentLoaded' event listener.
|
|
// ===================================
|
|
const tag = document.createElement('script');
|
|
tag.src = "https://www.youtube.com/iframe_api";
|
|
const firstScriptTag = document.getElementsByTagName('script')[0];
|
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
|
|
let player; // This creates the 'player' variable so the whole script can access it.
|
|
|
|
// --- IMPORTANT: REPLACE THIS ID WITH YOUR YOUTUBE VIDEO ID ---
|
|
const YOUTUBE_VIDEO_ID = '';
|
|
|
|
// This special function is called automatically by the YouTube API when it's ready.
|
|
// This is where the 'player' variable gets its value.
|
|
function onYouTubeIframeAPIReady() {
|
|
player = new YT.Player('youtube-player', {
|
|
height: '100%',
|
|
width: '100%',
|
|
videoId: YOUTUBE_VIDEO_ID,
|
|
playerVars: {
|
|
'autoplay': 1, // Autoplay the video
|
|
'mute': 1, // Mute it (required for autoplay)
|
|
'controls': 0, // Hide the default YouTube controls
|
|
'showinfo': 0, // Hide video title
|
|
'rel': 0, // Do not show related videos
|
|
'loop': 1, // Loop the video
|
|
'playlist': YOUTUBE_VIDEO_ID, // Required for loop to work
|
|
'playsinline': 1 // Important for mobile browsers
|
|
},
|
|
events: {
|
|
'onStateChange': onPlayerStateChange
|
|
}
|
|
});
|
|
}
|
|
|
|
// This function is called when the player's state changes (e.g., playing, paused).
|
|
function onPlayerStateChange(event) {
|
|
const videoOverlay = document.getElementById('video-overlay');
|
|
if (videoOverlay) {
|
|
if (event.data === YT.PlayerState.PLAYING) {
|
|
// When video is playing, hide the custom overlay
|
|
videoOverlay.classList.add('opacity-0', 'pointer-events-none');
|
|
} else {
|
|
// When video is paused or ended, show the overlay again
|
|
videoOverlay.classList.remove('opacity-0', 'pointer-events-none');
|
|
}
|
|
}
|
|
}
|
|
|
|
// ===================================
|
|
// MAIN SCRIPT (INITIALIZES SWIPERS & BUTTONS AFTER PAGE LOADS)
|
|
// ===================================
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
// 1. INITIALIZE THE HERO SLIDER
|
|
const heroSwiper = new Swiper('.hero-swiper', {
|
|
direction: 'horizontal',
|
|
loop: true,
|
|
effect: 'fade',
|
|
fadeEffect: { crossFade: true },
|
|
autoplay: { delay: 5000, disableOnInteraction: false, },
|
|
pagination: { el: '.swiper-pagination', clickable: true, },
|
|
navigation: false,
|
|
on: {
|
|
slideChangeTransitionStart: function () {
|
|
const allAnimatedText = this.el.querySelectorAll('.animated-text');
|
|
allAnimatedText.forEach(text => {
|
|
text.classList.remove('animate-slide-in-up');
|
|
text.style.opacity = '0';
|
|
});
|
|
const activeSlide = this.slides[this.activeIndex];
|
|
const activeAnimatedText = activeSlide.querySelector('.animated-text');
|
|
if (activeAnimatedText) {
|
|
activeAnimatedText.classList.add('animate-slide-in-up');
|
|
}
|
|
},
|
|
init: function () {
|
|
const activeSlide = this.slides[this.activeIndex];
|
|
const activeAnimatedText = activeSlide.querySelector('.animated-text');
|
|
if (activeAnimatedText) {
|
|
activeAnimatedText.classList.add('animate-slide-in-up');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 2. INITIALIZE THE PROJECTS SLIDER
|
|
const projectsSwiper = new Swiper('.projects-swiper', {
|
|
slidesPerView: 1,
|
|
spaceBetween: 30,
|
|
loop: true,
|
|
pagination: {
|
|
el: '.projects-pagination',
|
|
clickable: true,
|
|
},
|
|
});
|
|
|
|
// 3. INITIALIZE THE NEWS SLIDER
|
|
const newsSwiper = new Swiper('.news-swiper', {
|
|
slidesPerView: 1,
|
|
spaceBetween: 30,
|
|
loop: true,
|
|
pagination: {
|
|
el: '.news-pagination',
|
|
clickable: true,
|
|
},
|
|
});
|
|
|
|
// ===================================
|
|
// YOUTUBE API SCRIPT (PART 2 - EVENT LISTENER FOR THE BUTTON)
|
|
// ===================================
|
|
const playButton = document.getElementById('promo-video-play-btn');
|
|
if (playButton) {
|
|
playButton.addEventListener('click', () => {
|
|
// When the custom button is clicked, unmute and play the video.
|
|
// We check if 'player' is ready before trying to use it.
|
|
if (player && typeof player.unMute === 'function') {
|
|
player.unMute();
|
|
player.playVideo();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |