add video youtube in portofolio and update icon twit to youtube

This commit is contained in:
iqbal024 2025-04-17 13:05:51 +07:00
parent e9aa658fcc
commit ef40a5fc3b
6 changed files with 607 additions and 532 deletions

View File

@ -29,6 +29,17 @@ export default function Services() {
</div>
</div>
</div> */}
<div className="video-container">
<iframe
width="100%"
height="500"
src="https://www.youtube.com/embed/KiJAods46eI?autoplay=1"
title="YouTube video"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</div>
<div className="services-item-wrap">
<div className="row justify-content-center">
<div className="col-xl-7 col-lg-8">

View File

@ -1,49 +1,55 @@
import Link from "next/link";
export default function OffcanvusMenu({ isOffcanvus, handleOffcanvus }) {
return (
<>
<div className={`offCanvas__info ${isOffcanvus ? "active" : ""}`}>
<div className="offCanvas__close-icon menu-close" onClick={handleOffcanvus}>
<button>
<i className="far fa-window-close" />
</button>
</div>
<div className="offCanvas__logo mb-30">
<Link href="/">
<img src="/assets/img/logo/logo.png" alt="Logo" />
</Link>
</div>
<div className="offCanvas__side-info mb-30">
<div className="contact-list mb-30">
<h4>Office Address</h4>
<p>Suite B, 1934 N. Druid Hills Rd, Brookhaven, GA 30319, USA</p>
</div>
<div className="contact-list mb-30">
<h4>Phone Number</h4>
<p>(470) 260-4117</p>
</div>
<div className="contact-list mb-30">
<h4>Email Address</h4>
<p>support@rankrunners.net</p>
</div>
</div>
<div className="offCanvas__social-icon mt-30">
<Link href="https://www.facebook.com/profile.php?id=61561349362241">
<i className="fab fa-facebook-f" />
</Link>
<Link href="https://x.com/Rankrunnersseo">
<i className="fab fa-twitter" />
</Link>
<Link href="https://www.instagram.com/rankrunnersseo/">
<i className="fab fa-instagram" />
</Link>
<Link href="https://www.linkedin.com/company/rankrunnersseo/">
<i className="fab fa-linkedin-in" />
</Link>
</div>
</div>
<div className={`offCanvas__overly ${isOffcanvus ? "active" : ""}`} onClick={handleOffcanvus} />
</>
);
return (
<>
<div className={`offCanvas__info ${isOffcanvus ? "active" : ""}`}>
<div
className="offCanvas__close-icon menu-close"
onClick={handleOffcanvus}
>
<button>
<i className="far fa-window-close" />
</button>
</div>
<div className="offCanvas__logo mb-30">
<Link href="/">
<img src="/assets/img/logo/logo.png" alt="Logo" />
</Link>
</div>
<div className="offCanvas__side-info mb-30">
<div className="contact-list mb-30">
<h4>Office Address</h4>
<p>Suite B, 1934 N. Druid Hills Rd, Brookhaven, GA 30319, USA</p>
</div>
<div className="contact-list mb-30">
<h4>Phone Number</h4>
<p>(470) 260-4117</p>
</div>
<div className="contact-list mb-30">
<h4>Email Address</h4>
<p>support@rankrunners.net</p>
</div>
</div>
<div className="offCanvas__social-icon mt-30">
<Link href="https://www.facebook.com/profile.php?id=61561349362241">
<i className="fab fa-facebook-f" />
</Link>
<Link href="https://www.youtube.com/@RankRunners">
<i className="fab fa-youtube" />
</Link>
<Link href="https://www.instagram.com/rankrunnersseo/">
<i className="fab fa-instagram" />
</Link>
<Link href="https://www.linkedin.com/company/rankrunnersseo/">
<i className="fab fa-linkedin-in" />
</Link>
</div>
</div>
<div
className={`offCanvas__overly ${isOffcanvus ? "active" : ""}`}
onClick={handleOffcanvus}
/>
</>
);
}

View File

@ -4,232 +4,242 @@ import { useState } from "react";
import React from "react";
export default function Footer3() {
const [email, setEmail] = useState("");
const [email, setEmail] = useState("");
const handleChange = (e) => {
setEmail(e.target.value);
};
const handleChange = (e) => {
setEmail(e.target.value);
};
const handleSubmit = async (e) => {
e.preventDefault();
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await fetch("https://cryagent.pythonanywhere.com/submitnewrankrunners", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ email }),
});
if (response.ok) {
const result = await response.json();
} else {
console.error("Error submitting form:", await response.json());
}
} catch (error) {
console.error("Error submitting form:", error);
try {
const response = await fetch(
"https://cryagent.pythonanywhere.com/submitnewrankrunners",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ email }),
}
);
// reset the form
e.target.reset();
setEmail("");
};
if (response.ok) {
const result = await response.json();
} else {
console.error("Error submitting form:", await response.json());
}
} catch (error) {
console.error("Error submitting form:", error);
}
const currentYear = new Date().getFullYear();
// reset the form
e.target.reset();
setEmail("");
};
return (
<>
<footer>
<div className="footer__area-three">
<div className="footer__top-three">
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-8">
<div className="footer-widget">
<div className="footer__newsletter-three">
<h2 className="title">Receive FREE tools &amp; tips!</h2>
<p>Subscribe to our newsletter</p>
<form onSubmit={handleSubmit}>
<input
onChange={handleChange}
required
type="email"
name="email"
value={email}
placeholder="Enter your email address"
/>
<button className="btn" type="submit">
Subscribe
</button>
</form>
</div>
<div className="footer__social-three">
<span className="title">Follow Us on:</span>
<ul className="list-wrap">
<li>
<Link
href="https://www.facebook.com/profile.php?id=61561349362241"
target="_blank"
>
<i className="fab fa-facebook-f" />
</Link>
</li>
<li>
<Link href="https://x.com/Rankrunnersseo" target="_blank">
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link
href="https://www.instagram.com/rankrunnersseo/"
target="_blank"
>
<i className="fab fa-instagram" />
</Link>
</li>
<li>
<Link
href="https://www.linkedin.com/company/rankrunnersseo/"
target="_blank"
>
<i className="fab fa-linkedin-in" />
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div className="footer-widget">
<h4 className="fw-title">RankRunners</h4>
<div className="footer-link-list">
<ul className="list-wrap">
<li>
<Link href="/about">About</Link>
</li>
<li>
<Link href="/blog">Blog</Link>
</li>
<li>
<Link href="/team">Our Team</Link>
</li>
<li>
<Link href="/portfolio">Portfolio</Link>
</li>
<li>
<Link href="/contact">Contact Us</Link>
</li>
<li>
<Link href="/terms-of-use">Terms of Use</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-5 col-sm-6 col-sm-6">
<div className="footer-widget">
<h4 className="fw-title">Explore</h4>
<div className="footer-link-list">
<ul className="list-wrap">
<li>
<Link href="#seocheck">SEO Checker</Link>
</li>
<li>
<Link href="/login">Client Area</Link>
</li>
<li>
<Link href="/services/search-engine-optimization">
Search Engine Optimization
</Link>
</li>
<li>
<Link href="/services/web-development">Web Design Services</Link>
</li>
<li>
<Link href="/services/social-media-management">
Social Media Management
</Link>
</li>
<li>
<Link href="/services/lead-generation">Lead Generation</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-md-6">
<div className="footer-widget">
<h4 className="fw-title">Contact</h4>
<div className="footer-info-list">
<ul className="list-wrap">
<li>
<div className="icon">
<i className="flaticon-phone-call" />
</div>
<div className="content">
<Link href="tel:+14702604117">(470) 260-4117</Link>
</div>
</li>
<li>
<div className="icon">
<i className="flaticon-envelope" />
</div>
<div className="content">
<Link
href="mailto:support@rankrunners.net
"
>
support@rankrunners.net
</Link>
</div>
</li>
<li>
<div className="icon">
<i className="flaticon-pin" />
</div>
<div className="content">
<p>
<Link
href="https://maps.app.goo.gl/3vpv8Y9pSTtpcNGB6"
target="_blank"
>
Suite B, 1934 N. Druid Hills Rd, Brookhaven, GA 30319,
USA
</Link>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
const currentYear = new Date().getFullYear();
return (
<>
<footer>
<div className="footer__area-three">
<div className="footer__top-three">
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-8">
<div className="footer-widget">
<div className="footer__newsletter-three">
<h2 className="title">Receive FREE tools &amp; tips!</h2>
<p>Subscribe to our newsletter</p>
<form onSubmit={handleSubmit}>
<input
onChange={handleChange}
required
type="email"
name="email"
value={email}
placeholder="Enter your email address"
/>
<button className="btn" type="submit">
Subscribe
</button>
</form>
</div>
<div className="footer__bottom-three">
<div className="container">
<div className="row align-items-center">
{/* <div className="col-md-6">
<div className="footer__social-three">
<span className="title">Follow Us on:</span>
<ul className="list-wrap">
<li>
<Link
href="https://www.facebook.com/profile.php?id=61561349362241"
target="_blank"
>
<i className="fab fa-facebook-f" />
</Link>
</li>
<li>
<Link
href="https://www.youtube.com/@RankRunners"
target="_blank"
>
<i className="fab fa-youtube" />
</Link>
</li>
<li>
<Link
href="https://www.instagram.com/rankrunnersseo/"
target="_blank"
>
<i className="fab fa-instagram" />
</Link>
</li>
<li>
<Link
href="https://www.linkedin.com/company/rankrunnersseo/"
target="_blank"
>
<i className="fab fa-linkedin-in" />
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div className="footer-widget">
<h4 className="fw-title">RankRunners</h4>
<div className="footer-link-list">
<ul className="list-wrap">
<li>
<Link href="/about">About</Link>
</li>
<li>
<Link href="/blog">Blog</Link>
</li>
<li>
<Link href="/team">Our Team</Link>
</li>
<li>
<Link href="/portfolio">Portfolio</Link>
</li>
<li>
<Link href="/contact">Contact Us</Link>
</li>
<li>
<Link href="/terms-of-use">Terms of Use</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-5 col-sm-6 col-sm-6">
<div className="footer-widget">
<h4 className="fw-title">Explore</h4>
<div className="footer-link-list">
<ul className="list-wrap">
<li>
<Link href="#seocheck">SEO Checker</Link>
</li>
<li>
<Link href="/login">Client Area</Link>
</li>
<li>
<Link href="/services/search-engine-optimization">
Search Engine Optimization
</Link>
</li>
<li>
<Link href="/services/web-development">
Web Design Services
</Link>
</li>
<li>
<Link href="/services/social-media-management">
Social Media Management
</Link>
</li>
<li>
<Link href="/services/lead-generation">
Lead Generation
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-md-6">
<div className="footer-widget">
<h4 className="fw-title">Contact</h4>
<div className="footer-info-list">
<ul className="list-wrap">
<li>
<div className="icon">
<i className="flaticon-phone-call" />
</div>
<div className="content">
<Link href="tel:+14702604117">(470) 260-4117</Link>
</div>
</li>
<li>
<div className="icon">
<i className="flaticon-envelope" />
</div>
<div className="content">
<Link
href="mailto:support@rankrunners.net
"
>
support@rankrunners.net
</Link>
</div>
</li>
<li>
<div className="icon">
<i className="flaticon-pin" />
</div>
<div className="content">
<p>
<Link
href="https://maps.app.goo.gl/3vpv8Y9pSTtpcNGB6"
target="_blank"
>
Suite B, 1934 N. Druid Hills Rd, Brookhaven, GA
30319, USA
</Link>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="footer__bottom-three">
<div className="container">
<div className="row align-items-center">
{/* <div className="col-md-6">
<div className="fw-logo">
<Link href="/">
<img src="/assets/img/logo/logo.png" alt="" />
</Link>
</div>
</div> */}
<div>
<div className="copyright-text">
<p>
Copyright © {currentYear} <Link href="/">RankRunners</Link> | All Rights
Reserved
</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div className="copyright-text">
<p>
Copyright © {currentYear}{" "}
<Link href="/">RankRunners</Link> | All Rights Reserved
</p>
</div>
</div>
</footer>
</>
);
</div>
</div>
</div>
</div>
</footer>
</>
);
}

View File

@ -200,11 +200,11 @@ export default function Header4({
</li>
<li>
<Link
href="https://x.com/Rankrunnersseo"
href="https://www.youtube.com/@RankRunners"
target="_blank"
onClick={handleMobileMenu}
>
<i className="fab fa-twitter" />
<i className="fab fa-youtube" />
</Link>
</li>
<li>

View File

@ -5,79 +5,86 @@ import OffcanvusMenu from "../OffcanvusMenu";
import SearchPopup from "../SearchPopup";
export default function Header4({
isMobileMenu,
handleMobileMenu,
transparent = true,
isSearch,
isOffcanvus,
handleOffcanvus,
handleSearch,
isMobileMenu,
handleMobileMenu,
transparent = true,
isSearch,
isOffcanvus,
handleOffcanvus,
handleSearch,
}) {
return (
<>
<header className={`tg-header__style-four ${transparent ? "transparent-header" : ""}`}>
<div className="tg-header__top tg-header__top-three">
<div className="container">
<div className="row">
<div className="col-lg-6">
<ul className="tg-header__top-info tg-header__top-info-three list-wrap">
<li>
<i className="flaticon-phone-call" />
<Link href="tel:+14702604117">(470) 260-4117</Link>
</li>
<li>
<i className="flaticon-pin" />
<Link href="https://maps.app.goo.gl/3vpv8Y9pSTtpcNGB6" target="_blank">
Suite B, 1934 N. Druid Hills Rd, Brookhaven, GA 30319, USA
</Link>
</li>
</ul>
</div>
<div className="col-lg-6">
<ul className="tg-header__top-right tg-header__top-right-three list-wrap">
<li>
<i className="flaticon-envelope" />
<Link
href="mailto:support@rankrunners.net
return (
<>
<header
className={`tg-header__style-four ${
transparent ? "transparent-header" : ""
}`}
>
<div className="tg-header__top tg-header__top-three">
<div className="container">
<div className="row">
<div className="col-lg-6">
<ul className="tg-header__top-info tg-header__top-info-three list-wrap">
<li>
<i className="flaticon-phone-call" />
<Link href="tel:+14702604117">(470) 260-4117</Link>
</li>
<li>
<i className="flaticon-pin" />
<Link
href="https://maps.app.goo.gl/3vpv8Y9pSTtpcNGB6"
target="_blank"
>
Suite B, 1934 N. Druid Hills Rd, Brookhaven, GA 30319, USA
</Link>
</li>
</ul>
</div>
<div className="col-lg-6">
<ul className="tg-header__top-right tg-header__top-right-three list-wrap">
<li>
<i className="flaticon-envelope" />
<Link
href="mailto:support@rankrunners.net
"
>
support@rankrunners.net
</Link>
</li>
<li>
<i className="flaticon-time" />
Mon-Fri: 08:00am - 06:00pm
</li>
</ul>
</div>
</div>
>
support@rankrunners.net
</Link>
</li>
<li>
<i className="flaticon-time" />
Mon-Fri: 08:00am - 06:00pm
</li>
</ul>
</div>
</div>
</div>
</div>
<div
id="sticky-header"
className={`tg-header__area tg-header__area-four`}
>
<div className="container">
<div className="row">
<div className="col-12">
<div className="tgmenu__wrap">
<nav className="tgmenu__nav">
<div className="logo">
<Link href="/">
<img src="/assets/img/logo/logo.png" alt="Logo" />
</Link>
</div>
</div>
<div
id="sticky-header"
className={`tg-header__area tg-header__area-four`}
>
<div className="container">
<div className="row">
<div className="col-12">
<div className="tgmenu__wrap">
<nav className="tgmenu__nav">
<div className="logo">
<Link href="/">
<img src="/assets/img/logo/logo.png" alt="Logo" />
</Link>
</div>
<div className="tgmenu__navbar-wrap tgmenu__main-menu d-none d-lg-flex">
<Menu />
</div>
<div className="tgmenu__action tgmenu__action-four d-none d-md-block">
<ul className="list-wrap">
<li className="header-btn">
<Link href="/schedule" className="btn">
book a discovery call
</Link>
</li>
{/* <li className="offCanvas-menu" onClick={handleOffcanvus}>
<div className="tgmenu__navbar-wrap tgmenu__main-menu d-none d-lg-flex">
<Menu />
</div>
<div className="tgmenu__action tgmenu__action-four d-none d-md-block">
<ul className="list-wrap">
<li className="header-btn">
<Link href="/schedule" className="btn">
book a discovery call
</Link>
</li>
{/* <li className="offCanvas-menu" onClick={handleOffcanvus}>
<a className="menu-tigger">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -123,142 +130,155 @@ export default function Header4({
</svg>
</a>
</li> */}
</ul>
</div>
<div
className="mobile-nav-toggler mobile-nav-toggler-two"
onClick={handleMobileMenu}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none">
<path
d="M0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2Z"
fill="currentcolor"
/>
<path
d="M0 9C0 7.89543 0.895431 7 2 7C3.10457 7 4 7.89543 4 9C4 10.1046 3.10457 11 2 11C0.895431 11 0 10.1046 0 9Z"
fill="currentcolor"
/>
<path
d="M0 16C0 14.8954 0.895431 14 2 14C3.10457 14 4 14.8954 4 16C4 17.1046 3.10457 18 2 18C0.895431 18 0 17.1046 0 16Z"
fill="currentcolor"
/>
<path
d="M7 2C7 0.895431 7.89543 0 9 0C10.1046 0 11 0.895431 11 2C11 3.10457 10.1046 4 9 4C7.89543 4 7 3.10457 7 2Z"
fill="currentcolor"
/>
<path
d="M7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9Z"
fill="currentcolor"
/>
<path
d="M7 16C7 14.8954 7.89543 14 9 14C10.1046 14 11 14.8954 11 16C11 17.1046 10.1046 18 9 18C7.89543 18 7 17.1046 7 16Z"
fill="currentcolor"
/>
<path
d="M14 2C14 0.895431 14.8954 0 16 0C17.1046 0 18 0.895431 18 2C18 3.10457 17.1046 4 16 4C14.8954 4 14 3.10457 14 2Z"
fill="currentcolor"
/>
<path
d="M14 9C14 7.89543 14.8954 7 16 7C17.1046 7 18 7.89543 18 9C18 10.1046 17.1046 11 16 11C14.8954 11 14 10.1046 14 9Z"
fill="currentcolor"
/>
<path
d="M14 16C14 14.8954 14.8954 14 16 14C17.1046 14 18 14.8954 18 16C18 17.1046 17.1046 18 16 18C14.8954 18 14 17.1046 14 16Z"
fill="currentcolor"
/>
</svg>
</div>
</nav>
</div>
{/* Mobile Menu */}
<div className="tgmobile__menu">
<nav className="tgmobile__menu-box">
<div className="close-btn" onClick={handleMobileMenu}>
<i className="fas fa-times" />
</div>
<div className="nav-logo" onClick={handleMobileMenu}>
<Link href="/">
<img src="/assets/img/logo/logo.png" alt="Logo" />
</Link>
</div>
<div className="tgmobile__menu-outer">
<MobileMenu handleMobileMenu={handleMobileMenu} />
</div>
<div className="tgmobile__menu-bottom">
<div className="contact-info">
<ul className="list-wrap">
<li>
<Link
href="mailto:support@rankrunners.net"
target="_blank"
onClick={handleMobileMenu}
>
support@rankrunners.net
</Link>
</li>
<li>
<Link href="tel:+14702604117" onClick={handleMobileMenu}>
(470) 260-4117
</Link>
</li>
</ul>
</div>
<div className="social-links">
<ul className="list-wrap">
<li>
<Link
href="https://www.facebook.com/profile.php?id=61561349362241"
target="_blank"
onClick={handleMobileMenu}
>
<i className="fab fa-facebook-f" />
</Link>
</li>
<li>
<Link
href="https://x.com/Rankrunnersseo"
target="_blank"
onClick={handleMobileMenu}
>
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link
href="https://www.instagram.com/rankrunnersseo/"
target="_blank"
onClick={handleMobileMenu}
>
<i className="fab fa-instagram" />
</Link>
</li>
<li>
<Link
href="https://www.linkedin.com/company/rankrunnersseo/"
target="_blank"
onClick={handleMobileMenu}
>
<i className="fab fa-linkedin-in" />
</Link>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div className="tgmobile__menu-backdrop" onClick={handleMobileMenu} />
{/* End Mobile Menu */}
</div>
</div>
</ul>
</div>
<div
className="mobile-nav-toggler mobile-nav-toggler-two"
onClick={handleMobileMenu}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 18 18"
fill="none"
>
<path
d="M0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2Z"
fill="currentcolor"
/>
<path
d="M0 9C0 7.89543 0.895431 7 2 7C3.10457 7 4 7.89543 4 9C4 10.1046 3.10457 11 2 11C0.895431 11 0 10.1046 0 9Z"
fill="currentcolor"
/>
<path
d="M0 16C0 14.8954 0.895431 14 2 14C3.10457 14 4 14.8954 4 16C4 17.1046 3.10457 18 2 18C0.895431 18 0 17.1046 0 16Z"
fill="currentcolor"
/>
<path
d="M7 2C7 0.895431 7.89543 0 9 0C10.1046 0 11 0.895431 11 2C11 3.10457 10.1046 4 9 4C7.89543 4 7 3.10457 7 2Z"
fill="currentcolor"
/>
<path
d="M7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9Z"
fill="currentcolor"
/>
<path
d="M7 16C7 14.8954 7.89543 14 9 14C10.1046 14 11 14.8954 11 16C11 17.1046 10.1046 18 9 18C7.89543 18 7 17.1046 7 16Z"
fill="currentcolor"
/>
<path
d="M14 2C14 0.895431 14.8954 0 16 0C17.1046 0 18 0.895431 18 2C18 3.10457 17.1046 4 16 4C14.8954 4 14 3.10457 14 2Z"
fill="currentcolor"
/>
<path
d="M14 9C14 7.89543 14.8954 7 16 7C17.1046 7 18 7.89543 18 9C18 10.1046 17.1046 11 16 11C14.8954 11 14 10.1046 14 9Z"
fill="currentcolor"
/>
<path
d="M14 16C14 14.8954 14.8954 14 16 14C17.1046 14 18 14.8954 18 16C18 17.1046 17.1046 18 16 18C14.8954 18 14 17.1046 14 16Z"
fill="currentcolor"
/>
</svg>
</div>
</nav>
</div>
{/* header-search */}
<SearchPopup isSearch={isSearch} handleSearch={handleSearch} />
{/* header-search-end */}
{/* offCanvas-menu */}
<OffcanvusMenu isOffcanvus={isOffcanvus} handleOffcanvus={handleOffcanvus} />
{/* offCanvas-menu-end */}
</header>
</>
);
{/* Mobile Menu */}
<div className="tgmobile__menu">
<nav className="tgmobile__menu-box">
<div className="close-btn" onClick={handleMobileMenu}>
<i className="fas fa-times" />
</div>
<div className="nav-logo" onClick={handleMobileMenu}>
<Link href="/">
<img src="/assets/img/logo/logo.png" alt="Logo" />
</Link>
</div>
<div className="tgmobile__menu-outer">
<MobileMenu handleMobileMenu={handleMobileMenu} />
</div>
<div className="tgmobile__menu-bottom">
<div className="contact-info">
<ul className="list-wrap">
<li>
<Link
href="mailto:support@rankrunners.net"
target="_blank"
onClick={handleMobileMenu}
>
support@rankrunners.net
</Link>
</li>
<li>
<Link
href="tel:+14702604117"
onClick={handleMobileMenu}
>
(470) 260-4117
</Link>
</li>
</ul>
</div>
<div className="social-links">
<ul className="list-wrap">
<li>
<Link
href="https://www.facebook.com/profile.php?id=61561349362241"
target="_blank"
onClick={handleMobileMenu}
>
<i className="fab fa-facebook-f" />
</Link>
</li>
<li>
<Link
href="https://www.youtube.com/@RankRunners"
target="_blank"
onClick={handleMobileMenu}
>
<i className="fab fa-youtube" />
</Link>
</li>
<li>
<Link
href="https://www.instagram.com/rankrunnersseo/"
target="_blank"
onClick={handleMobileMenu}
>
<i className="fab fa-instagram" />
</Link>
</li>
<li>
<Link
href="https://www.linkedin.com/company/rankrunnersseo/"
target="_blank"
onClick={handleMobileMenu}
>
<i className="fab fa-linkedin-in" />
</Link>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div
className="tgmobile__menu-backdrop"
onClick={handleMobileMenu}
/>
{/* End Mobile Menu */}
</div>
</div>
</div>
</div>
{/* header-search */}
<SearchPopup isSearch={isSearch} handleSearch={handleSearch} />
{/* header-search-end */}
{/* offCanvas-menu */}
<OffcanvusMenu
isOffcanvus={isOffcanvus}
handleOffcanvus={handleOffcanvus}
/>
{/* offCanvas-menu-end */}
</header>
</>
);
}

View File

@ -1,70 +1,98 @@
import Link from "next/link";
export default function Banner1() {
return (
<>
<section className="banner-area banner-bg banner-choice">
<div className="container">
<div className="row">
<div className="col-lg-6">
<div className="banner-content">
<span className="sub-title" data-aos="fade-up" data-aos-delay={0}>
Welcome to <span className="title-color">RankRunners!</span>
</span>
<h2 className="title" data-aos="fade-up" data-aos-delay={200}>
Generate more revenue from your online assets
</h2>
<p data-aos="fade-up" data-aos-delay={400}>
RankRunners is your one-stop shop for Enterprise level IT solutions, including SEO,
Web/Mobile App Development, Cloud computing, Cybersecurity, and Digital Marketing -
all designed to increase your brand's organic search visibility and help you attract
new customers.
</p>
<Link href="/schedule" className="btn" /* data-aos="fade-up" data-aos-delay={600} */>
book a discovery call
</Link>
</div>
<div className="banner-shape">
<img src="/assets/img/banner/banner_shape01.png" alt="" className="rightToLeft" />
<img src="/assets/img/banner/banner_shape02.png" alt="" className="ribbonRotate" />
</div>
</div>
</div>
<div className="banner-social">
<h5 className="title">Follow us</h5>
<ul className="list-wrap">
<li>
<Link href="https://www.facebook.com/profile.php?id=61561349362241" target="_blank">
<i className="fab fa-facebook-f" />
</Link>
</li>
<li>
<Link href="https://x.com/Rankrunnersseo" target="_blank">
<i className="fab fa-twitter" />
</Link>
</li>
<li>
<Link href="https://www.instagram.com/rankrunnersseo/" target="_blank">
<i className="fab fa-instagram" />
</Link>
</li>
<li>
<Link href="https://www.linkedin.com/company/rankrunnersseo/" target="_blank">
<i className="fab fa-linkedin-in" />
</Link>
</li>
</ul>
</div>
<div className="banner-scroll">
<Link href="#about">
Scroll Down{" "}
<span>
<i className="fas fa-arrow-right" />
</span>
</Link>
</div>
</div>
</section>
</>
);
return (
<>
<section className="banner-area banner-bg banner-choice">
<div className="container">
<div className="row">
<div className="col-lg-6">
<div className="banner-content">
<span
className="sub-title"
data-aos="fade-up"
data-aos-delay={0}
>
Welcome to <span className="title-color">RankRunners!</span>
</span>
<h2 className="title" data-aos="fade-up" data-aos-delay={200}>
Generate more revenue from your online assets
</h2>
<p data-aos="fade-up" data-aos-delay={400}>
RankRunners is your one-stop shop for Enterprise level IT
solutions, including SEO, Web/Mobile App Development, Cloud
computing, Cybersecurity, and Digital Marketing - all designed
to increase your brand's organic search visibility and help
you attract new customers.
</p>
<Link
href="/schedule"
className="btn" /* data-aos="fade-up" data-aos-delay={600} */
>
book a discovery call
</Link>
</div>
<div className="banner-shape">
<img
src="/assets/img/banner/banner_shape01.png"
alt=""
className="rightToLeft"
/>
<img
src="/assets/img/banner/banner_shape02.png"
alt=""
className="ribbonRotate"
/>
</div>
</div>
</div>
<div className="banner-social">
<h5 className="title">Follow us</h5>
<ul className="list-wrap">
<li>
<Link
href="https://www.facebook.com/profile.php?id=61561349362241"
target="_blank"
>
<i className="fab fa-facebook-f" />
</Link>
</li>
<li>
<Link
href="https://www.youtube.com/@RankRunners"
target="_blank"
>
<i className="fab fa-youtube" />
</Link>
</li>
<li>
<Link
href="https://www.instagram.com/rankrunnersseo/"
target="_blank"
>
<i className="fab fa-instagram" />
</Link>
</li>
<li>
<Link
href="https://www.linkedin.com/company/rankrunnersseo/"
target="_blank"
>
<i className="fab fa-linkedin-in" />
</Link>
</li>
</ul>
</div>
<div className="banner-scroll">
<Link href="#about">
Scroll Down{" "}
<span>
<i className="fas fa-arrow-right" />
</span>
</Link>
</div>
</div>
</section>
</>
);
}