Initial Commit
This commit is contained in:
mukesh13
273
components/footers/Footer2.jsx
Normal file
273
components/footers/Footer2.jsx
Normal file
@ -0,0 +1,273 @@
|
||||
"use client";
|
||||
import React, { useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { services } from "@/data/services";
|
||||
export default function Footer2() {
|
||||
useEffect(() => {
|
||||
const headings = document.querySelectorAll(".footer-heading-mobile");
|
||||
|
||||
const toggleOpen = (event) => {
|
||||
const parent = event.target.closest(".footer-col-block");
|
||||
const content = parent.querySelector(".tf-collapse-content");
|
||||
|
||||
if (parent.classList.contains("open")) {
|
||||
parent.classList.remove("open");
|
||||
content.style.height = "0px";
|
||||
} else {
|
||||
parent.classList.add("open");
|
||||
content.style.height = content.scrollHeight + 10 + "px";
|
||||
}
|
||||
};
|
||||
|
||||
headings.forEach((heading) => {
|
||||
heading.addEventListener("click", toggleOpen);
|
||||
});
|
||||
|
||||
// Clean up event listeners when the component unmounts
|
||||
return () => {
|
||||
headings.forEach((heading) => {
|
||||
heading.removeEventListener("click", toggleOpen);
|
||||
});
|
||||
};
|
||||
}, []); // Empty dependency array means this will run only once on mount
|
||||
|
||||
return (
|
||||
<footer id="footer" className="footer style-1">
|
||||
<div className="footer-wrap">
|
||||
<div className="tf-container">
|
||||
<div className="footer-body">
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
<div className="left">
|
||||
<div className="content flex-md-row">
|
||||
<div className="footer-col-block">
|
||||
<div className="text-body-1 footer-heading text_white footer-heading-mobile">
|
||||
Services
|
||||
</div>
|
||||
<div className="tf-collapse-content">
|
||||
<ul className="footer-menu-list">
|
||||
{services.map((service, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="text-body-3 text_mono-gray-8"
|
||||
>
|
||||
<Link
|
||||
href={`/service-details/${service.id}`}
|
||||
className="link footer-menu_item"
|
||||
>
|
||||
{service.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
<li className="text-body-3 text_mono-gray-8" />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-col-block home">
|
||||
<div className="text-body-1 footer-heading text_white footer-heading-mobile">
|
||||
Home
|
||||
</div>
|
||||
<div className="tf-collapse-content">
|
||||
<ul className="footer-menu-list">
|
||||
<li className="text-body-3 text_mono-gray-8">
|
||||
<Link
|
||||
href={`/about`}
|
||||
className="link footer-menu_item"
|
||||
>
|
||||
Page
|
||||
</Link>
|
||||
</li>
|
||||
<li className="text-body-3 text_mono-gray-8">
|
||||
<Link
|
||||
href={`/blog`}
|
||||
className="link footer-menu_item"
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
</li>
|
||||
<li className="text-body-3 text_mono-gray-8">
|
||||
<Link
|
||||
href={`/portfolio`}
|
||||
className="link footer-menu_item"
|
||||
>
|
||||
Project
|
||||
</Link>
|
||||
</li>
|
||||
<li className="text-body-3 text_mono-gray-8">
|
||||
<Link
|
||||
href={`/contact-us`}
|
||||
className="link footer-menu_item"
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-col-block contact">
|
||||
<div className="text-body-1 footer-heading text_white footer-heading-mobile">
|
||||
Contact
|
||||
</div>
|
||||
<div className="tf-collapse-content">
|
||||
<ul className="footer-menu-list">
|
||||
<li className="text_mono-gray-6">
|
||||
<span className="text-body-3 text_mono-gray-8">
|
||||
Address
|
||||
</span>
|
||||
<p className="text-body-3 text_white">
|
||||
58 Howard, San Francisco CA 411
|
||||
</p>
|
||||
</li>
|
||||
<li className="text_mono-gray-6">
|
||||
<span className="text-body-3 text_mono-gray-8">
|
||||
Email
|
||||
</span>
|
||||
<a href="#" className="text-body-3 text_white link">
|
||||
themesflat@gmail.com
|
||||
</a>
|
||||
</li>
|
||||
<li className="text_mono-gray-6">
|
||||
<span className="text-body-3 text_mono-gray-8">
|
||||
Fax
|
||||
</span>
|
||||
<a href="#" className="text-body-3 text_white link">
|
||||
themesflat@gmail.com
|
||||
</a>
|
||||
</li>
|
||||
<li className="text_mono-gray-6">
|
||||
<span className="text-body-3 text_mono-gray-8">
|
||||
Work Hour
|
||||
</span>
|
||||
<p className="text-body-3 text_white">
|
||||
Mon - Sat: 9:00 - 18:00
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-logo mb-0">
|
||||
<Image
|
||||
alt="logo"
|
||||
src="/images/logo/footer-logo-2.1.png"
|
||||
width={160}
|
||||
height={40}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<div className="right">
|
||||
<div className="content">
|
||||
<h5 className="text_mono-dark-9 mb_11">
|
||||
We’re here to help
|
||||
</h5>
|
||||
<p className="text_mono-gray-7 mb_25 text-body-3">
|
||||
Have questions or need guidance? Our team is always
|
||||
available to provide the support and expertise you need to
|
||||
move forward with confidence.
|
||||
</p>
|
||||
<form
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
className="form-help d-grid gap_24"
|
||||
>
|
||||
<fieldset>
|
||||
<input
|
||||
className="rounded-0"
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<input
|
||||
className="rounded-0"
|
||||
type="email"
|
||||
placeholder="Email address"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset className="mb_8">
|
||||
<textarea
|
||||
className="message rounded-0"
|
||||
placeholder="Write something for us"
|
||||
defaultValue={""}
|
||||
/>
|
||||
</fieldset>
|
||||
<button
|
||||
type="submit"
|
||||
className="tf-btn btn-dark height-2 rounded-0 w-full"
|
||||
>
|
||||
<span>Get started</span>
|
||||
<span className="bg-effect" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="image hide-sm">
|
||||
<Image
|
||||
className="lazyload"
|
||||
data-src="/images/section/banner-form-help.jpg"
|
||||
alt="banner"
|
||||
src="/images/section/banner-form-help.jpg"
|
||||
width={406}
|
||||
height={611}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<div className="tf-container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="wrapper d-flex align-items-center flex-wrap gap_12">
|
||||
<p className="text-body-3 text_mono-gray-5">
|
||||
© {new Date().getFullYear()}{" "}
|
||||
<a href="#" className="link text_mono-gray-5 text-body-3">
|
||||
Themesflat
|
||||
</a>{" "}
|
||||
. All Right Reserved.
|
||||
</p>
|
||||
<ul className="right d-flex align-items-center">
|
||||
<li>
|
||||
<Link
|
||||
href={`/pricing`}
|
||||
className="link text_mono-gray-5 text-body-3"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href={`/service-details/1`}
|
||||
className="link text_mono-gray-5 text-body-3"
|
||||
>
|
||||
Terms of Services
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="link text_mono-gray-5 text-body-3">
|
||||
Virtual Reality
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="social d-flex gap_12 align-items-center">
|
||||
<li>
|
||||
<a href="#" className="icon-twitter text_white link" />
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="icon-facebook-f text_white link" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user