608 lines
35 KiB
TypeScript
608 lines
35 KiB
TypeScript
import React from "react";
|
||
|
||
// ── Preloader ──────────────────────────────────────────────
|
||
export const Preloader = () => (
|
||
<div id="preloader">
|
||
<div className="bd-loader-inner">
|
||
<div className="bd-loader">
|
||
<span className="bd-loader-item"></span>
|
||
<span className="bd-loader-item"></span>
|
||
<span className="bd-loader-item"></span>
|
||
<span className="bd-loader-item"></span>
|
||
<span className="bd-loader-item"></span>
|
||
<span className="bd-loader-item"></span>
|
||
<span className="bd-loader-item"></span>
|
||
<span className="bd-loader-item"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
// ── Back To Top ────────────────────────────────────────────
|
||
export const BackToTop = () => (
|
||
<div className="backtotop-wrap cursor-pointer">
|
||
<svg className="backtotop-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
||
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
||
</svg>
|
||
</div>
|
||
);
|
||
|
||
// ── Search Overlay ─────────────────────────────────────────
|
||
export const SearchOverlay = () => (
|
||
<>
|
||
<div className="df-search-area">
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-xl-12">
|
||
<div className="df-search-form">
|
||
<div className="df-search-close text-center mb-20">
|
||
<button className="df-search-close-btn df-search-close-btn"></button>
|
||
</div>
|
||
<form action="#">
|
||
<div className="df-search-input mb-10">
|
||
<input type="text" placeholder="Search here..." />
|
||
<button type="submit"><i className="fa-solid fa-magnifying-glass"></i></button>
|
||
</div>
|
||
<div className="df-search-category">
|
||
<span>Search by : </span>
|
||
<a href="#">Modified Metatron, </a>
|
||
<a href="#">Metatron Installation, </a>
|
||
<a href="#">Metatron Cornering, </a>
|
||
<a href="#">Metatron Renovation </a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="body-overlay"></div>
|
||
</>
|
||
);
|
||
|
||
// ── Offcanvas Sidebar ──────────────────────────────────────
|
||
export const Offcanvas = () => (
|
||
<>
|
||
<div className="fix">
|
||
<div className="offcanvas__info">
|
||
<div className="offcanvas__wrapper">
|
||
<div className="offcanvas__content">
|
||
<div className="offcanvas__top mb-40 d-flex justify-content-between align-items-center">
|
||
<div className="offcanvas__logo">
|
||
<a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="Header Logo" /></a>
|
||
</div>
|
||
<div className="offcanvas__close">
|
||
<button><i className="fa-solid fa-xmark"></i></button>
|
||
</div>
|
||
</div>
|
||
<div className="offcanvas__search mb-25">
|
||
<p className="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum maxime accusamus corrupti natus obcaecati vitae dignissimos, id officiis similique eos.</p>
|
||
</div>
|
||
<div className="mobile-menu fix mb-40"></div>
|
||
<div className="offcanvas__contact mt-30 mb-20">
|
||
<h4>Contact Info</h4>
|
||
<ul>
|
||
<li className="d-flex align-items-center">
|
||
<div className="offcanvas__contact-icon mr-15">
|
||
<i className="fa-solid fa-location-dot"></i>
|
||
</div>
|
||
<div className="offcanvas__contact-text">
|
||
<a target="_blank" href="#">31 Park End St, Brockhampton, UK</a>
|
||
</div>
|
||
</li>
|
||
<li className="d-flex align-items-center">
|
||
<div className="offcanvas__contact-icon mr-15">
|
||
<i className="fa-solid fa-phone"></i>
|
||
</div>
|
||
<div className="offcanvas__contact-text">
|
||
<a href="tel:+00112233665">+00112233665</a>
|
||
</div>
|
||
</li>
|
||
<li className="d-flex align-items-center">
|
||
<div className="offcanvas__contact-icon mr-15">
|
||
<i className="fa-solid fa-envelope"></i>
|
||
</div>
|
||
<div className="offcanvas__contact-text">
|
||
<a href="mailto:support@example.com">support@example.com</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div className="offcanvas__social">
|
||
<ul>
|
||
<li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
|
||
<li><a href="#"><i className="fab fa-twitter"></i></a></li>
|
||
<li><a href="#"><i className="fab fa-youtube"></i></a></li>
|
||
<li><a href="#"><i className="fab fa-linkedin"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="offcanvas__overlay"></div>
|
||
<div className="offcanvas__overlay-white"></div>
|
||
</>
|
||
);
|
||
|
||
// ── Shared Nav Menu ────────────────────────────────────────
|
||
export const NavMenu = () => (
|
||
<ul>
|
||
<li className="has-dropdown active">
|
||
<a href="/">Home</a>
|
||
{/* <ul className="submenu">
|
||
<li><a href="/">Home One</a></li>
|
||
<li><a href="/home-2">Home Two</a></li>
|
||
<li><a href="/home-3">Home Three</a></li>
|
||
<li><a href="#">Home Dark</a></li>
|
||
</ul> */}
|
||
</li>
|
||
<li><a href="/about">About</a></li>
|
||
<li className="has-dropdown">
|
||
<a href="/services">Services</a>
|
||
<ul className="submenu">
|
||
<li><a href="/services">Services</a></li>
|
||
<li><a href="/service-details">Service Details</a></li>
|
||
</ul>
|
||
</li>
|
||
<li className="has-dropdown">
|
||
<a href="/blog-grid">Pages</a>
|
||
<ul className="submenu">
|
||
<li className="has-dropdown">
|
||
<a href="/projects">Projects</a>
|
||
<ul className="submenu">
|
||
<li><a href="/projects">Projects</a></li>
|
||
<li><a href="/project-details">Projects Details</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="/team">Team</a></li>
|
||
<li><a href="/team-details">Team Details</a></li>
|
||
<li><a href="/faq">Faq's</a></li>
|
||
<li><a href="/error">Error Page</a></li>
|
||
</ul>
|
||
</li>
|
||
<li className="has-dropdown">
|
||
<a href="/blog-grid">Blog</a>
|
||
<ul className="submenu">
|
||
<li><a href="/blog-standard">Blog Default</a></li>
|
||
<li><a href="/blog-grid">Blog Grid</a></li>
|
||
<li><a href="/blog-details">Blog Details</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="/contact">Contact</a></li>
|
||
</ul>
|
||
);
|
||
|
||
// ── Header 1 (Home One) ────────────────────────────────────
|
||
export const Header1 = () => (
|
||
<header>
|
||
<div className="container-fluid bg-color-1">
|
||
<div className="header-top">
|
||
<div className="header-top-contact-info">
|
||
<span className="email p-relative"><a href="mailto:info@Metatron.com">info@Metatron.com</a></span>
|
||
<span className="time p-relative">Hours: Mon - Sat: 10.00 AM - 4.00 PM</span>
|
||
</div>
|
||
<div className="header-top-socials">
|
||
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-twitter"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-youtube"></i></a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="header-sticky" className="header-area">
|
||
<div className="large-container">
|
||
<div className="mega-menu-wrapper">
|
||
<div className="header-main">
|
||
<div className="header-left">
|
||
<div className="header-logo">
|
||
<a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="header logo" /></a>
|
||
</div>
|
||
</div>
|
||
<div className="header-right d-flex justify-content-end">
|
||
<div className="mean__menu-wrapper d-none d-lg-block">
|
||
<div className="main-menu">
|
||
<nav id="mobile-menu"><NavMenu /></nav>
|
||
</div>
|
||
</div>
|
||
<div className="search-toggle-open header-search my-auto">
|
||
<div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
|
||
</div>
|
||
<div className="header-shopping-cart my-auto">
|
||
<div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
|
||
</div>
|
||
<div className="header-action d-none d-xl-inline-flex gap-5">
|
||
<div className="header-link">
|
||
<a className="primary-btn-1 btn-hover" href="/contact">
|
||
GET A QUOTE | <i className="fa-solid fa-arrow-right"></i>
|
||
<span className="btn-hover-span"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="header-action">
|
||
<div className="header-link-1">
|
||
<div className="icon"><i className="fa-solid fa-phone-volume"></i></div>
|
||
<div className="content">
|
||
<span>Call Us Now</span>
|
||
<h6><a href="tel:2085550112">+208-555-0112</a></h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="header__hamburger d-xl-none my-auto">
|
||
<div className="sidebar__toggle">
|
||
<a className="bar-icon" href="javascript:void(0)">
|
||
<i className="fa-solid fa-bars"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
|
||
// ── Header 2 (Home Two) ───────────────────────────────────
|
||
export const Header2 = () => (
|
||
<header>
|
||
<div id="header-sticky" className="header-area header-style-two">
|
||
<div className="large-container">
|
||
<div className="mega-menu-wrapper">
|
||
<div className="header-main">
|
||
<div className="header-left">
|
||
<div className="header-logo">
|
||
<a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="header logo" /></a>
|
||
</div>
|
||
</div>
|
||
<div className="header-right d-flex justify-content-end">
|
||
<div className="mean__menu-wrapper d-none d-lg-block">
|
||
<div className="main-menu">
|
||
<nav id="mobile-menu"><NavMenu /></nav>
|
||
</div>
|
||
</div>
|
||
<div className="search-toggle-open header-search my-auto">
|
||
<div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
|
||
</div>
|
||
<div className="header-shopping-cart my-auto">
|
||
<div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
|
||
</div>
|
||
<div className="header-action d-none d-xl-inline-flex gap-5">
|
||
<div className="header-link">
|
||
<a className="primary-btn-2 btn-hover" href="/contact">
|
||
GET A QUOTE | <i className="fa-solid fa-arrow-right"></i>
|
||
<span className="btn-hover-span"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="header-action">
|
||
<div className="header-link-1">
|
||
<div className="icon text-white"><i className="fa-solid fa-phone-volume"></i></div>
|
||
<div className="content">
|
||
<span className="text-white">Call Us Now</span>
|
||
<h6><a href="tel:2085550112" className="text-white">+208-555-0112</a></h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="header__hamburger d-xl-none my-auto">
|
||
<div className="sidebar__toggle">
|
||
<a className="bar-icon" href="javascript:void(0)">
|
||
<i className="fa-solid fa-bars"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
|
||
// ── Header 3 (Home Three) ─────────────────────────────────
|
||
export const Header3 = () => (
|
||
<header>
|
||
<div className="container-fluid bg-color-1">
|
||
<div className="header-top">
|
||
<div className="header-top-contact-info">
|
||
<span className="email p-relative"><a href="mailto:info@Metatron.com">info@Metatron.com</a></span>
|
||
<span className="time p-relative">Hours: Mon - Sat: 10.00 AM - 4.00 PM</span>
|
||
</div>
|
||
<div className="header-top-socials">
|
||
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-twitter"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-youtube"></i></a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="header-sticky" className="header-area header-style-three">
|
||
<div className="large-container">
|
||
<div className="mega-menu-wrapper">
|
||
<div className="header-main">
|
||
<div className="header-left">
|
||
<div className="header-logo">
|
||
<a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="header logo" /></a>
|
||
</div>
|
||
</div>
|
||
<div className="header-right d-flex justify-content-end">
|
||
<div className="mean__menu-wrapper d-none d-lg-block">
|
||
<div className="main-menu">
|
||
<nav id="mobile-menu"><NavMenu /></nav>
|
||
</div>
|
||
</div>
|
||
<div className="search-toggle-open header-search my-auto">
|
||
<div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
|
||
</div>
|
||
<div className="header-shopping-cart my-auto">
|
||
<div className="cart-icon"><a href="/shop"><i className="fa-solid fa-cart-shopping"></i></a></div>
|
||
</div>
|
||
<div className="header__hamburger d-xl-block my-auto">
|
||
<div className="sidebar__toggle">
|
||
<a className="bar-icon" href="javascript:void(0)">
|
||
<i className="fa-solid fa-bars"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
|
||
// ── Footer 1 (Home One) ───────────────────────────────────
|
||
export const Footer1 = () => (
|
||
<footer>
|
||
<div className="footer-main bg-color-1">
|
||
<div className="footer-top section-space-medium">
|
||
<div className="small-container">
|
||
<div className="row g-4">
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-1">
|
||
<figure className="image">
|
||
<img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="" />
|
||
</figure>
|
||
<p className="mt-40 mb-40">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
|
||
<div className="footer-socials">
|
||
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-twitter"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-youtube"></i></a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-2 pl-50">
|
||
<h4 className="mb-20 footer-title">Our Services</h4>
|
||
<ul className="service-list">
|
||
<li><a href="/service-details">IT Management</a></li>
|
||
<li><a href="/service-details">SEO Optimization</a></li>
|
||
<li><a href="/service-details">Web Development</a></li>
|
||
<li><a href="/service-details">Cyber Security</a></li>
|
||
<li><a href="/service-details">Data Security</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-3">
|
||
<h4 className="mb-20 footer-title">Latest Post</h4>
|
||
<ul className="blog-list">
|
||
{[1, 2].map((num) => (
|
||
<li key={num}>
|
||
<div className="footer-blog-post-box mb-15">
|
||
<figure className="thumb"><img src={`/assets/imgs/blog/blog-s-${num}.jpg`} alt="" /></figure>
|
||
<div className="content">
|
||
<span className="date"><a href="#">05 Dec, 2024</a></span>
|
||
<h6><a href="#">{num === 1 ? "Tacking the Changes of Retail Industry" : "What’s the Holding Back the It Solution"}</a></h6>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-4 pr-30">
|
||
<h4 className="mb-20 footer-title">Newsletter</h4>
|
||
<p>Sign Up For News & Get 30% Off in New User.</p>
|
||
<div className="footer-subscribe">
|
||
<form action="#">
|
||
<input type="email" name="email" placeholder="Your email address" required />
|
||
<button type="submit" className="primary-btn-1 btn-hover">
|
||
SUBSCRIBE NOW
|
||
<span className="btn-hover-span"></span>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="small-container">
|
||
<div className="footer-bottom pt-30 pb-30">
|
||
<div className="left-area">
|
||
<span>© All Copyright 2024 by <a href="#">Metatron</a></span>
|
||
</div>
|
||
<div className="right-area">
|
||
<span><a href="#">Terms & Condition</a></span>
|
||
<span><a href="#">Privacy Policy</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
|
||
// ── Footer 2 (Home Two) ───────────────────────────────────
|
||
export const Footer2 = () => (
|
||
<footer>
|
||
<div className="footer-main bg-color-1 p-relative">
|
||
<div className="footer-shape-1" style={{ backgroundImage: "url(/assets/imgs/footer/shape-f-1.png)" }}></div>
|
||
<div className="footer-shape-2" style={{ backgroundImage: "url(/assets/imgs/footer/shape-f-2.png)" }}></div>
|
||
<div className="footer-top section-space-medium">
|
||
<div className="small-container">
|
||
<div className="row g-4">
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-1">
|
||
<figure className="image">
|
||
<img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="" />
|
||
</figure>
|
||
<p className="mt-40 mb-30">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
|
||
<div className="working-hours">
|
||
<h6 className="text-white mb-20">Working Hours:</h6>
|
||
<ul className="text-white">
|
||
<li>Mon - Sat: <span className="fw-lighter">10.00AM - 4.00PM</span></li>
|
||
<li>Sunday: <span className="fw-lighter">Close</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-2 pl-50">
|
||
<h4 className="mb-30 footer-title">Quick Links</h4>
|
||
<ul className="service-list">
|
||
<li><a href="/about">About Us</a></li>
|
||
<li><a href="/team">Our Team</a></li>
|
||
<li><a href="/services">Our Services</a></li>
|
||
<li><a href="/blog-grid">Latest Blog</a></li>
|
||
<li><a href="/contact">Contact Us</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-2 pl-50">
|
||
<h4 className="mb-30 footer-title">Our Services</h4>
|
||
<ul className="service-list">
|
||
<li><a href="/service-details">IT Management</a></li>
|
||
<li><a href="/service-details">SEO Optimization</a></li>
|
||
<li><a href="/service-details">Web Development</a></li>
|
||
<li><a href="/service-details">Cyber Security</a></li>
|
||
<li><a href="/service-details">Data Security</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-4 pr-30">
|
||
<h4 className="mb-20 footer-title mb-30">Our Gallery</h4>
|
||
<div className="footer-gallery p-relative">
|
||
<a className="popup-image" href="/assets/imgs/footer/footer-1.png"><img src="/assets/imgs/footer/footer-1.png" alt="" /></a>
|
||
<a className="popup-image" href="/assets/imgs/footer/footer-2.png"><img src="/assets/imgs/footer/footer-2.png" alt="" /></a>
|
||
<a className="popup-image" href="/assets/imgs/footer/footer-3.png"><img src="/assets/imgs/footer/footer-3.png" alt="" /></a>
|
||
<a className="popup-image" href="/assets/imgs/footer/footer-4.png"><img src="/assets/imgs/footer/footer-4.png" alt="" /></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="small-container">
|
||
<div className="footer-bottom pt-30 pb-30">
|
||
<div className="left-area p-relative">
|
||
<span>© All Copyright 2024 by <a href="#">Metatron</a></span>
|
||
</div>
|
||
<div className="footer-socials p-relative">
|
||
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-twitter"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-youtube"></i></a></span>
|
||
</div>
|
||
<div className="right-area p-relative">
|
||
<span><a href="#">Terms & Condition</a></span>
|
||
<span><a href="#">Privacy Policy</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
|
||
// ── Footer 3 (Home Three) ───────────────────────────────────
|
||
export const Footer3 = () => (
|
||
<footer>
|
||
<div className="footer-main bg-color-1 p-relative">
|
||
<div className="footer-shape-1" style={{ backgroundImage: "url(/assets/imgs/footer/shape-f-1.png)" }}></div>
|
||
<div className="footer-shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-50.png)" }}></div>
|
||
<div className="footer-top section-space-medium">
|
||
<div className="small-container">
|
||
<div className="row g-4">
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-1">
|
||
<figure className="image">
|
||
<img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="" />
|
||
</figure>
|
||
<p className="mt-40 mb-40 text-white">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
|
||
<div className="footer-socials p-relative">
|
||
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-twitter"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span>
|
||
<span><a href="#"><i className="fab fa-youtube"></i></a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-2 pl-50">
|
||
<h4 className="mb-30 footer-title text-white">Quick Links</h4>
|
||
<ul className="service-list">
|
||
<li><a href="/about">About Us</a></li>
|
||
<li><a href="/team">Our Team</a></li>
|
||
<li><a href="/services">Our Services</a></li>
|
||
<li><a href="/blog-grid">Latest Blog</a></li>
|
||
<li><a href="/contact">Contact Us</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-2">
|
||
<h4 className="mb-30 footer-title text-white">Our Services</h4>
|
||
<ul className="service-list">
|
||
<li><a href="/service-details">IT Management</a></li>
|
||
<li><a href="/service-details">SEO Optimization</a></li>
|
||
<li><a href="/service-details">Web Development</a></li>
|
||
<li><a href="/service-details">Cyber Security</a></li>
|
||
<li><a href="/service-details">Data Security</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||
<div className="footer-widget-4">
|
||
<h4 className="mb-20 footer-title text-white">Contact Info</h4>
|
||
<ul className="footer-contact-info-widget p-relative">
|
||
{[
|
||
{ icon: "location-dot", title: "Location:", text: "4517 Washington. mg Manchester, Kentucky 39495" },
|
||
{ icon: "phone-alt", title: "Phone Call:", text: "208-6666-0112, 308-5555-0113" },
|
||
{ icon: "clock", title: "Opening Hours:", text: "Mon - Sat: 10.00 AM - 4.00 PM" }
|
||
].map((item, i) => (
|
||
<li key={i}>
|
||
<div className="icon">
|
||
<i className={`fa-solid fa-${item.icon}`}></i>
|
||
</div>
|
||
<div className="info-details">
|
||
<h6 className="mb-10 text-white">{item.title} </h6>
|
||
<p className="m-0 text-white">{item.text}</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="small-container">
|
||
<div className="footer-bottom pt-30 pb-30 p-relative">
|
||
<div className="left-area">
|
||
<span className="text-white">© All Copyright 2024 by <a href="#">Metatron</a></span>
|
||
</div>
|
||
<div className="right-area">
|
||
<span className="text-white"><a href="#">Terms & Condition</a></span>
|
||
<span className="text-white"><a href="#">Privacy Policy</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|