Nav Bar top scrolling and ressponsive added

2025-08-12 23:45:27 -07:00 · 2025-08-12 23:45:27 -07:00 · 4189ef13df
commit 4189ef13df
parent 782616940d
6 changed files with 120 additions and 17 deletions
--- a/components/home/HeroBanner.tsx
+++ b/components/home/HeroBanner.tsx
@ -53,7 +53,7 @@ export default function HomeHeroBanner() {
            modules={[Autoplay, Navigation, Pagination]}
            slidesPerView={1}
            loop={true}
-            autoplay={{ delay: 2000 }}
+            autoplay={{ delay: 5000 }}
            navigation
            pagination={{ clickable: true }}
        >
--- a/components/layout/MobileMenu.tsx
+++ b/components/layout/MobileMenu.tsx
@ -67,7 +67,7 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
 							</ul>
 						</li>
 						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 2 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(2)}><em /></span>
-							<Link href="#" className="hash-nav">Online</Link>
+							<Link href="#" className="hash-nav">Registration	</Link>
 							<ul className={`sub-menu ${isAccordion == 2 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 2 ? "block" : "none"}` }}>
 								<li className="hash-has-sub"><Link href="/online/membership-2024" className="hash-nav">Membership - 2024</Link></li>
 								<li className="hash-has-sub"><Link href="/online/membership-2025" className="hash-nav">Membership - 2025</Link></li>
--- a/components/layout/header/Header1.tsx
+++ b/components/layout/header/Header1.tsx
@ -1,10 +1,52 @@
-import Link from 'next/link'
+"use client";

+import Link from "next/link";
+import React, { useState } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay, Pagination } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/pagination";

 export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSearch, handleSearch }: any) {
+
+	const [mobileMenu, setMobileMenu] = useState(false);
+
 	return (
 		<>
 			<header>
+
+				<div className="header-top py-3" style={{ backgroundColor: '#ed1b24' }}>
+					<div className="container-fluid">
+						<Swiper
+							loop={true}
+							spaceBetween={30}
+							slidesPerView={1}
+							speed={2000}
+							autoplay={{ delay: 5000, disableOnInteraction: false }}
+							modules={[Autoplay]}
+							className="mySwiper"
+						>
+							<SwiperSlide>
+								<div className="text-center fw-bold" style={{ color: 'white' }}>
+									தமிழ்நாடு தொழில்நுட்ப முன்னேற்ற சங்கம்
+								</div>
+							</SwiperSlide>
+							<SwiperSlide>
+								<div className="text-center fw-bold" style={{ color: 'white' }}>
+									Welcome to our association — advancing innovation for all communities
+								</div>
+							</SwiperSlide>
+							<SwiperSlide>
+								<div className="text-center fw-bold" style={{ color: 'white' }}>
+									Welcome to our association — advancing innovation for all communities
+								</div>
+							</SwiperSlide>
+						</Swiper>
+
+					</div>
+				</div>
+
+
 				<div className={`header-area homepage1 header header-sticky d-none d-lg-block ${scroll ? 'sticky' : ''}`} id="header">
 					<div className="container">
 						<div className="row">
@ -149,7 +191,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 												</ul>
 											</li>
 											<li>
-												<Link href="#">Online <i className="fa-solid fa-angle-down" /></Link>
+												<Link href="#">Registration <i className="fa-solid fa-angle-down" /></Link>
 												<ul className="dropdown-padding">
 													<li><Link href="/online/membership-2024">Membership - 2024</Link></li>
 													<li><Link href="/online/membership-2025">Membership - 2025</Link></li>
@ -260,10 +302,17 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 												</ul>
 											</li> */}
 											<li>
-												<Link href="/contact">Contact</Link>												
+												<Link href="/contact">Contact</Link>
 											</li>
+
 										</ul>
 									</div>
+
+									<div className="btn-area1" style={{ marginTop: '10px' }}>
+										<Link href="/membership-benefits" className="vl-btn9">
+											<span className="demo">Membership</span>
+										</Link>
+									</div>
 									<div className="btn-area">
 										{/* <div className="search-icon header__search header-search-btn" onClick={handleSearch}>
 											<a><img src="/assets/img/icons/search1.svg" alt="" /></a>
@ -275,12 +324,12 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 											<li>
 												<Link href="/#"><i className="fa-brands fa-instagram" /></Link>
 											</li>
-											<li>
+											{/* <li>
 												<Link href="/#"><i className="fa-brands fa-linkedin-in" /></Link>
 											</li>
 											<li>
 												<Link href="/#" className="m-0"><i className="fa-brands fa-pinterest-p" /></Link>
-											</li>
+											</li> */}
 										</ul>
 									</div>
 									{/* <div className={`header-search-form-wrapper ${isSearch ? 'open' : ''}`}>
--- a/package-lock.json
+++ b/package-lock.json
@ -21,7 +21,7 @@
        "sass": "^1.81.0",
        "sitemap": "^8.0.0",
        "slick-carousel": "^1.8.1",
-        "swiper": "^11.1.14",
+        "swiper": "^11.2.10",
        "wowjs": "^1.1.3",
        "yet-another-react-lightbox": "^3.24.0"
      },
@ -5586,9 +5586,9 @@
      }
    },
    "node_modules/swiper": {
-      "version": "11.2.8",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.8.tgz",
-      "integrity": "sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==",
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.10.tgz",
+      "integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
      "funding": [
        {
          "type": "patreon",
--- a/package.json
+++ b/package.json
@ -24,7 +24,7 @@
    "sass": "^1.81.0",
    "sitemap": "^8.0.0",
    "slick-carousel": "^1.8.1",
-    "swiper": "^11.1.14",
+    "swiper": "^11.2.10",
    "wowjs": "^1.1.3",
    "yet-another-react-lightbox": "^3.24.0"
  },
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@ -1699,6 +1699,15 @@ Location:
 	transition: all 0.4s;
 }

+
+@media (max-width: 1200px) {
+.vl-btn9 {
+	font-size: var(--ztc-font-size-font-s17);
+	padding: 20px 26px;
+
+}
+}
+
 .vl-btn10 {
 	color: var(--ztc-text-text-2);
 	font-family: var(--grotesk);
@ -9905,17 +9914,36 @@ html {
 }

 .homepage1-body .header-area.homepage1 .header-elements .site-logo img {
-	width: 180px;
-	height: 80px;
+	width: 200px;
+	height: 130px;
 	object-fit: contain;
 }

+@media (max-width: 1440px) {
+	.homepage1-body .header-area.homepage1 .header-elements .site-logo img {
+		width: 108px;
+		height: 110px;
+		object-fit: contain;
+	}
+}
+
+@media (max-width: 1200px) {
+	.homepage1-body .header-area.homepage1 .header-elements .site-logo img {
+		width: 80px;
+		height: 100px;
+		object-fit: contain;
+	}
+}
+
+
@media (max-width: 1024px) {
 	.homepage1-body .header-area.homepage1 .header-elements .site-logo img {
-		width: 76px;
+		width: 80px;
 		height: 80px;
 		object-fit: contain;
 	}
+
+
 }


@ -10115,7 +10143,7 @@ html {

 .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li a {
 	font-family: var(--grotesk) !important;
-	font-size: var(--ztc-font-size-font-s16);
+	font-size: var(--ztc-font-size-font-s18);
 	font-weight: var(--ztc-weight-medium);
 	color: var(--ztc-text-text-1);
 	display: block;
@ -10123,9 +10151,15 @@ html {
 	padding: 0 20px;
 }

+@media (max-width: 1200px) {
+	.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li a {
+		padding: 0 10px;
+	}
+}
+
@media (max-width: 1024px) {
 	.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li a {
-		padding: 0 11px;
+		padding: 0 9px;
 	}
 }

@ -10309,6 +10343,26 @@ html {
 	transition: all 0.4s;
 }

+
+@media (max-width: 1024px) {
+	.homepage1-body .header-area.homepage1 .header-elements .btn-area ul {
+		display: none;
+	}
+
+	.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li a {
+
+	font-size: var(--ztc-font-size-font-s16);
+}
+
+.vl-btn9 {
+	font-size: var(--ztc-font-size-font-s16);
+		padding: 17px 26px;
+
+}
+
+	
+}
+
 .homepage2-body,
 html {
 	overflow-x: hidden !important;