MetatroncubeSoftwareSolutions/cibus-industries
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nav structure corrected

Browse Source
This commit is contained in:
Selvi 2025-07-16 12:44:58 +05:30
parent 7dd99527be
commit 3b31bf4b66
4 changed files with 570 additions and 470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/(homes)/home-1/page.jsx
View File

@ -21,7 +21,7 @@ export const metadata = {
export default function Home1() { export default function Home1() {
return ( return (
<> <>
<HeaderTop1 /> {/* <HeaderTop1 /> */}
<Header1 /> <Header1 />
<Hero /> <Hero />
<About /> <About />

119
components/headers/Header1 copy.jsx Normal file
View File

@ -0,0 +1,119 @@
"use client";
import Nav from "./Nav";
import Link from "next/link";
import Offcanvas from "./Offcanvas";
import { openMobilemenu } from "@/utlis/toggleMobilemenu";
import Image from "next/image";
export default function Header1() {
return (
<>
<header className="header-section">
<div className="container-fluid">
<div className="main-header-wrapper">
<div className="logo-image">
<Link href={`/`}>
<Image
src="/assets/img/logo/black-logo.svg"
width={149}
height={64}
alt="img"
/>
</Link>
</div>
<div className="main-header-items">
<div className="header-contact-info-area">
<div className="contact-info-items">
<div className="icon">
<i className="fa-sharp fa-solid fa-location-dot"></i>
</div>
<div className="content">
<p>Office location</p>
<h3>4648 Rocky, New York</h3>
</div>
</div>
<div className="contact-info-items">
<div className="icon">
<i className="fa-solid fa-envelope"></i>
</div>
<div className="content">
<p>send email</p>
<h3>
<a href="mailto:example@gmail.com">example@gmail.com</a>
</h3>
</div>
</div>
<div className="contact-info-items style-2">
<div className="icon">
<i className="fa-solid fa-phone-volume"></i>
</div>
<div className="content">
<p>call emergency</p>
<h3>
<a href="tel:+88012365499">+88 0123 654 99</a>
</h3>
</div>
</div>
<div className="header-button">
<Link href={`/contact`} className="theme-btn">
GAT A QUOTE <i className="fa-regular fa-arrow-right"></i>
</Link>
</div>
</div>
<div id="header-sticky" className="header-1">
<div className="mega-menu-wrapper">
<div className="header-main">
<div className="logo">
<Link href={`/`} className="header-logo">
<Image
src="/assets/img/logo/black-logo.svg"
alt="logo-img"
width={149}
height={64}
/>
</Link>
</div>
<div className="header-left">
<div className="mean__menu-wrapper">
<div className="main-menu">
<nav id="mobile-menu">
<ul>
<Nav />
</ul>
</nav>
</div>
</div>
</div>
<div className="header-right d-flex justify-content-end align-items-center">
<a
href="#0"
onClick={() =>
document
.getElementById("searchWrap")
.classList.add("active")
}
className="search-trigger search-icon"
>
<i className="fal fa-search"></i>
</a>
<div className="header__hamburger d-xl-block my-auto">
<div
onClick={() => openMobilemenu()}
className="sidebar__toggle"
>
<i className="fas fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<Offcanvas>
<Nav />
</Offcanvas>
</>
);
}

63
components/headers/Header1.jsx
View File

@ -4,6 +4,7 @@ import Link from "next/link";
import Offcanvas from "./Offcanvas"; import Offcanvas from "./Offcanvas";
import { openMobilemenu } from "@/utlis/toggleMobilemenu"; import { openMobilemenu } from "@/utlis/toggleMobilemenu";
import Image from "next/image"; import Image from "next/image";
export default function Header1() { export default function Header1() {
return ( return (
<> <>
@ -13,52 +14,14 @@ export default function Header1() {
<div className="logo-image"> <div className="logo-image">
<Link href={`/`}> <Link href={`/`}>
<Image <Image
src="/assets/img/logo/black-logo.svg" src="/assets/img/logo/logo.png"
width={149} width={300}
height={64} height={150}
alt="img" alt="img"
/> />
</Link> </Link>
</div> </div>
<div className="main-header-items"> <div className="main-header-items">
<div className="header-contact-info-area">
<div className="contact-info-items">
<div className="icon">
<i className="fa-sharp fa-solid fa-location-dot"></i>
</div>
<div className="content">
<p>Office location</p>
<h3>4648 Rocky, New York</h3>
</div>
</div>
<div className="contact-info-items">
<div className="icon">
<i className="fa-solid fa-envelope"></i>
</div>
<div className="content">
<p>send email</p>
<h3>
<a href="mailto:example@gmail.com">example@gmail.com</a>
</h3>
</div>
</div>
<div className="contact-info-items style-2">
<div className="icon">
<i className="fa-solid fa-phone-volume"></i>
</div>
<div className="content">
<p>call emergency</p>
<h3>
<a href="tel:+88012365499">+88 0123 654 99</a>
</h3>
</div>
</div>
<div className="header-button">
<Link href={`/contact`} className="theme-btn">
GAT A QUOTE <i className="fa-regular fa-arrow-right"></i>
</Link>
</div>
</div>
<div id="header-sticky" className="header-1"> <div id="header-sticky" className="header-1">
<div className="mega-menu-wrapper"> <div className="mega-menu-wrapper">
<div className="header-main"> <div className="header-main">
@ -84,18 +47,12 @@ export default function Header1() {
</div> </div>
</div> </div>
<div className="header-right d-flex justify-content-end align-items-center"> <div className="header-right d-flex justify-content-end align-items-center">
<a <div className="header-button">
href="#0" <Link href={`/contact`} className="theme-btn">
onClick={() => GET A QUOTE <i className="fa-regular fa-arrow-right"></i>
document </Link>
.getElementById("searchWrap") </div>
.classList.add("active") <div className="header__hamburger my-auto">
}
className="search-trigger search-icon"
>
<i className="fal fa-search"></i>
</a>
<div className="header__hamburger d-xl-block my-auto">
<div <div
onClick={() => openMobilemenu()} onClick={() => openMobilemenu()}
className="sidebar__toggle" className="sidebar__toggle"

164
public/assets/scss/_header.scss
View File

@ -4,6 +4,7 @@
span { span {
color: rgba(255, 255, 255, .8); color: rgba(255, 255, 255, .8);
i { i {
color: $white; color: $white;
margin-right: 5px; margin-right: 5px;
@ -31,7 +32,7 @@
position: relative; position: relative;
z-index: 9; z-index: 9;
@include breakpoint (max-xl){ @include breakpoint (max-xl) {
display: none; display: none;
} }
@ -46,7 +47,7 @@
background-color: $white; background-color: $white;
z-index: -1; z-index: -1;
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
display: none; display: none;
} }
} }
@ -94,7 +95,7 @@
a { a {
color: $header-color; color: $header-color;
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
color: $white; color: $white;
} }
@ -106,22 +107,22 @@
} }
.header-top-section { .header-top-section {
@include breakpoint (max-sm){ @include breakpoint (max-sm) {
display: none; display: none;
} }
.container-fluid { .container-fluid {
padding: 0 150px; padding: 0 150px;
@include breakpoint (max-xl4){ @include breakpoint (max-xl4) {
padding: 0 50px; padding: 0 50px;
} }
@include breakpoint (max-xxxl){ @include breakpoint (max-xxxl) {
padding: 0 40px; padding: 0 40px;
} }
@include breakpoint (max-xl){ @include breakpoint (max-xl) {
padding: 0 20px; padding: 0 20px;
} }
} }
@ -131,15 +132,15 @@
.container-fluid { .container-fluid {
padding: 0 150px; padding: 0 150px;
@include breakpoint (max-xl4){ @include breakpoint (max-xl4) {
padding: 0 50px; padding: 0 50px;
} }
@include breakpoint (max-xxxl){ @include breakpoint (max-xxxl) {
padding: 0 40px; padding: 0 40px;
} }
@include breakpoint (max-xl){ @include breakpoint (max-xl) {
padding: 0 20px; padding: 0 20px;
} }
} }
@ -155,15 +156,15 @@
.container-fluid { .container-fluid {
padding: 0 90px; padding: 0 90px;
@include breakpoint (max-xl4){ @include breakpoint (max-xl4) {
padding: 0 50px; padding: 0 50px;
} }
@include breakpoint (max-xxxl){ @include breakpoint (max-xxxl) {
padding: 0 40px; padding: 0 40px;
} }
@include breakpoint (max-xl){ @include breakpoint (max-xl) {
padding: 0 20px; padding: 0 20px;
} }
} }
@ -174,15 +175,15 @@
@include flex; @include flex;
gap: 100px; gap: 100px;
@include breakpoint (max-xl4){ @include breakpoint (max-xl4) {
gap: 70px; gap: 70px;
} }
@include breakpoint (max-xxxl){ @include breakpoint (max-xxxl) {
gap: 40px; gap: 40px;
} }
@include breakpoint (max-xl){ @include breakpoint (max-xl) {
padding: 15px 0; padding: 15px 0;
} }
@ -195,16 +196,16 @@
padding: 0 50px; padding: 0 50px;
border: 1px solid #D4DCED; border: 1px solid #D4DCED;
@include breakpoint (max-xxxl){ @include breakpoint (max-xxxl) {
padding: 0 30px; padding: 0 30px;
} }
@include breakpoint (max-xl){ @include breakpoint (max-xl) {
display: none; display: none;
} }
@include breakpoint (max-sm){ @include breakpoint (max-sm) {
gap: 30px; gap: 30px;
} }
@ -217,7 +218,7 @@
border-right: 1px solid #D4DCED; border-right: 1px solid #D4DCED;
padding-right: 50px; padding-right: 50px;
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
border-right: none; border-right: none;
padding-right: 0; padding-right: 0;
} }
@ -234,7 +235,7 @@
box-shadow: (0px 4px 25px rgba(0, 0, 0, 0.06)); box-shadow: (0px 4px 25px rgba(0, 0, 0, 0.06));
position: relative; position: relative;
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
width: 30px; width: 30px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
@ -250,9 +251,9 @@
background-color: transparent; background-color: transparent;
border-radius: 50%; border-radius: 50%;
border: 1px solid rgba(30, 32, 35, 0.10); border: 1px solid rgba(30, 32, 35, 0.10);
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
width: 54px; width: 54px;
height: 54px; height: 54px;
} }
@ -274,7 +275,7 @@
color: $header-color; color: $header-color;
text-transform: initial; text-transform: initial;
@include breakpoint (max-xxxl){ @include breakpoint (max-xxxl) {
font-size: 18px; font-size: 18px;
} }
@ -292,7 +293,7 @@
.header-button { .header-button {
.theme-btn { .theme-btn {
@include breakpoint (max-xxxl){ @include breakpoint (max-xxxl) {
font-size: 14px; font-size: 14px;
padding: 24px 27px; padding: 24px 27px;
} }
@ -313,12 +314,12 @@
ul { ul {
li { li {
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
margin-inline-end: 40px; margin-inline-end: 40px;
} }
.has-homemenu { .has-homemenu {
@include breakpoint (max-xl4){ @include breakpoint (max-xl4) {
left: -50px; left: -50px;
} }
} }
@ -336,7 +337,7 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
@include breakpoint (max-xxs){ @include breakpoint (max-xxs) {
padding: 0 15px; padding: 0 15px;
} }
@ -351,13 +352,13 @@
background-color: $theme-color; background-color: $theme-color;
z-index: -1; z-index: -1;
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
display: none; display: none;
} }
} }
.header-main { .header-main {
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
gap: 30px; gap: 30px;
} }
@ -365,7 +366,7 @@
ul { ul {
li { li {
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
margin-inline-end: 25px; margin-inline-end: 25px;
a { a {
@ -374,7 +375,7 @@
} }
.has-homemenu { .has-homemenu {
@include breakpoint (max-xl4){ @include breakpoint (max-xl4) {
left: -50px; left: -50px;
} }
} }
@ -387,14 +388,14 @@
.header-right { .header-right {
gap: 50px !important; gap: 50px !important;
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
gap: 30px !important; gap: 30px !important;
} }
.header-button { .header-button {
margin-right: 57px; margin-right: 57px;
@include breakpoint (max-xl4){ @include breakpoint (max-xl4) {
display: none; display: none;
} }
@ -402,7 +403,9 @@
background-color: $header-color; background-color: $header-color;
&:hover { &:hover {
&::before,&::after {
&::before,
&::after {
background-color: $theme-color; background-color: $theme-color;
} }
} }
@ -414,18 +417,18 @@
gap: 40px; gap: 40px;
margin-right: 40px; margin-right: 40px;
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
margin-right: 0; margin-right: 0;
} }
@include breakpoint (max-md){ @include breakpoint (max-md) {
gap: 20px; gap: 20px;
} }
.search-icon { .search-icon {
color: $white; color: $white;
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
color: $header-color; color: $header-color;
} }
} }
@ -433,7 +436,7 @@
.sidebar__toggle { .sidebar__toggle {
color: $white; color: $white;
@include breakpoint (max-xxl){ @include breakpoint (max-xxl) {
color: $header-color; color: $header-color;
} }
} }
@ -443,7 +446,7 @@
//>>>>> Header Main Start <<<<<// //>>>>> Header Main Start <<<<<//
.menu-thumb { .menu-thumb {
@include breakpoint (max-xl){ @include breakpoint (max-xl) {
display: none !important; display: none !important;
} }
} }
@ -457,6 +460,7 @@
.main-menu { .main-menu {
ul { ul {
margin-bottom: 0; margin-bottom: 0;
li { li {
position: relative; position: relative;
list-style: none; list-style: none;
@ -487,6 +491,7 @@
} }
} }
.submenu { .submenu {
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -498,9 +503,9 @@
opacity: 0; opacity: 0;
transform-origin: top center; transform-origin: top center;
color: $header-color; color: $header-color;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
transform: translateY(10px); transform: translateY(10px);
@include transition; @include transition;
@ -526,17 +531,20 @@
color: $white !important; color: $white !important;
} }
} }
&:last-child { &:last-child {
a { a {
border: none; border: none;
} }
} }
.submenu { .submenu {
inset-inline-start: 100%; inset-inline-start: 100%;
top: 0; top: 0;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
&:hover { &:hover {
>a { >a {
background: $theme-color; background: $theme-color;
@ -546,6 +554,7 @@
color: $theme-color; color: $theme-color;
} }
} }
>.submenu { >.submenu {
-webkit-transform: translateY(1); -webkit-transform: translateY(1);
-moz-transform: translateY(1); -moz-transform: translateY(1);
@ -557,6 +566,7 @@
} }
} }
} }
li.has-dropdown { li.has-dropdown {
>a { >a {
&::after { &::after {
@ -587,12 +597,13 @@
gap: 30px; gap: 30px;
justify-content: space-between; justify-content: space-between;
@include breakpoint (max-lg){ @include breakpoint (max-lg) {
flex-wrap: wrap; flex-wrap: wrap;
} }
.homemenu { .homemenu {
position: relative; position: relative;
.homemenu-thumb { .homemenu-thumb {
position: relative; position: relative;
@ -647,7 +658,8 @@
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
content: ""; content: "";
} }
&:hover{
&:hover {
&::before { &::before {
visibility: visible; visibility: visible;
@ -659,6 +671,7 @@
visibility: visible; visibility: visible;
margin-top: 0; margin-top: 0;
} }
& .homemenu-btn { & .homemenu-btn {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
@ -666,6 +679,7 @@
transform: translateY(50%); transform: translateY(50%);
} }
} }
img { img {
width: 100%; width: 100%;
} }
@ -684,10 +698,12 @@
&:hover { &:hover {
>a { >a {
color: $theme-color; color: $theme-color;
&::after { &::after {
color: $theme-color; color: $theme-color;
} }
} }
>.submenu { >.submenu {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
@ -699,22 +715,28 @@
} }
.header-right { .header-right {
gap: 30px; gap: 50px !important;
@include breakpoint (max-xxl){ @include breakpoint(max-xxl) {
gap: 20px; gap: 30px !important;
} }
.search-icon { .header-button {
color: $header-color; margin-right: 57px;
font-size: 18px; display: block;
@include breakpoint(max-xl) {
display: none !important;
} }
} }
.sidebar__toggle { .header__hamburger {
cursor: pointer; display: none !important;
font-size: 20px;
color: $header-color; @media (max-width: 1024px) {
display: block !important;
}
}
} }
} }
@ -764,6 +786,7 @@
overflow-y: scroll; overflow-y: scroll;
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
scrollbar-width: none; scrollbar-width: none;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
@ -827,7 +850,7 @@
color: $text-color; color: $text-color;
} }
&:not(:last-child){ &:not(:last-child) {
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -914,18 +937,18 @@
//>>>>> Breadcrumb Start <<<<<// //>>>>> Breadcrumb Start <<<<<//
.breadcrumb-wrapper{ .breadcrumb-wrapper {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
z-index: 9; z-index: 9;
padding-top: 190px; padding-top: 190px;
padding-bottom: 50px; padding-bottom: 50px;
@include breakpoint (max-xl){ @include breakpoint (max-xl) {
padding-top: 80px; padding-top: 80px;
} }
@include breakpoint (max-lg){ @include breakpoint (max-lg) {
padding-top: 160px; padding-top: 160px;
padding-bottom: 0; padding-bottom: 0;
} }
@ -942,12 +965,12 @@
right: 0; right: 0;
bottom: 10%; bottom: 10%;
@include breakpoint (max-lg){ @include breakpoint (max-lg) {
display: none; display: none;
} }
} }
.page-heading{ .page-heading {
h1 { h1 {
color: $white; color: $white;
@ -956,11 +979,11 @@
z-index: 9; z-index: 9;
text-transform: uppercase; text-transform: uppercase;
@include breakpoint(max-lg){ @include breakpoint(max-lg) {
font-size: 60px; font-size: 60px;
} }
@include breakpoint(max-sm){ @include breakpoint(max-sm) {
font-size: 42px; font-size: 42px;
} }
} }
@ -970,21 +993,22 @@
margin-top: 20px; margin-top: 20px;
gap: 10px; gap: 10px;
@include breakpoint (max-sm){ @include breakpoint (max-sm) {
margin-top: 15px; margin-top: 15px;
} }
li{ li {
color: $theme-color; color: $theme-color;
text-transform: capitalize; text-transform: capitalize;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
a { a {
color: $white; ; color: $white;
;
@include transition; @include transition;
&:hover{ &:hover {
color: $theme-color; color: $theme-color;
} }
} }
@ -1001,7 +1025,7 @@
@include flex; @include flex;
justify-content: space-between; justify-content: space-between;
@include breakpoint (max-lg){ @include breakpoint (max-lg) {
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -1010,7 +1034,7 @@
height: 380px; height: 380px;
margin-bottom: -50px; margin-bottom: -50px;
@include breakpoint (max-lg){ @include breakpoint (max-lg) {
margin-bottom: 0; margin-bottom: 0;
img { img {
@ -1025,7 +1049,7 @@
left: -27%; left: -27%;
z-index: -1; z-index: -1;
@include breakpoint (max-lg){ @include breakpoint (max-lg) {
display: none; display: none;
} }
} }