184 lines
6.8 KiB
JavaScript
184 lines
6.8 KiB
JavaScript
"use client";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import AnimatedText from "@/components/common/AnimatedText";
|
|
import ModalVideo from "react-modal-video";
|
|
import { useState } from "react";
|
|
export default function About() {
|
|
const [isOpen, setOpen] = useState(false);
|
|
return (
|
|
<>
|
|
<section
|
|
id="about"
|
|
className="about-section fix section-padding scrollSpySection"
|
|
>
|
|
<div className="about-shape-4 float-bob-x">
|
|
<Image
|
|
src="/assets/img/about/about-shape-4.png"
|
|
width={367}
|
|
height={772}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="about-shape-5 float-bob-y">
|
|
<Image
|
|
src="/assets/img/about/about-shape-5.png"
|
|
width={367}
|
|
height={516}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="container">
|
|
<div className="about-wrapper-2">
|
|
<div className="row g-4">
|
|
<div className="col-lg-6">
|
|
<div className="about-image">
|
|
<Image
|
|
src="/assets/img/about/03.jpg"
|
|
alt="img"
|
|
width={337}
|
|
height={378}
|
|
className="wow fadeInLeft"
|
|
data-wow-delay=".3s"
|
|
/>
|
|
<div
|
|
className="about-image-2 wow fadeInUp"
|
|
data-wow-delay=".2s"
|
|
>
|
|
<Image
|
|
src="/assets/img/about/04.jpg"
|
|
width={303}
|
|
height={323}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="video-items wow fadeInUp">
|
|
<a
|
|
onClick={() => setOpen(true)}
|
|
className="video-btn video-popup"
|
|
>
|
|
<i className="fas fa-play" />
|
|
</a>
|
|
<a
|
|
onClick={() => setOpen(true)}
|
|
className="video-text video-popup"
|
|
>
|
|
play now
|
|
</a>
|
|
</div>
|
|
<div className="bar-shape">
|
|
<Image
|
|
src="/assets/img/about/bar.png"
|
|
width={40}
|
|
height={207}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div className="about-content">
|
|
<div className="section-title">
|
|
<h6 className="wow fadeInUp">
|
|
<i className="fa-regular fa-arrow-left-long" />
|
|
About Our Company
|
|
<i className="fa-regular fa-arrow-right-long" />
|
|
</h6>
|
|
<h2 className="splt-txt wow">
|
|
<AnimatedText text="Dedicated To Providing" /> <br />
|
|
<AnimatedText text="Top-Notch Construction" />
|
|
</h2>
|
|
</div>
|
|
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
|
|
It is a long established fact that a reader will be
|
|
distracted the readable content of a page when looking at
|
|
layout the point of using lorem the is Ipsum Xbuild less
|
|
normal distribution best company in world of letters.
|
|
</p>
|
|
<div className="row g-4 mt-3">
|
|
<div className="col-lg-6 wow fadeInUp" data-wow-delay=".2s">
|
|
<div className="icon-items">
|
|
<div className="icon">
|
|
<Image
|
|
src="/assets/img/icon/05.svg"
|
|
width={30}
|
|
height={30}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<h5 className="splt-txt wow">
|
|
<AnimatedText text="Build & Development" />
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6 wow fadeInUp" data-wow-delay=".4s">
|
|
<div className="icon-items">
|
|
<div className="icon">
|
|
<Image
|
|
src="/assets/img/icon/06.svg"
|
|
width={30}
|
|
height={30}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<h5 className="splt-txt wow">
|
|
<AnimatedText text="Full-service offering" />
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul className="list-items wow fadeInUp" data-wow-delay=".2s">
|
|
<li>
|
|
<i className="fa-solid fa-circle-check" />
|
|
Proactively pontificate client-centered relationships
|
|
</li>
|
|
<li>
|
|
<i className="fa-solid fa-circle-check" />
|
|
Is there a waiting list for desired work to be started
|
|
</li>
|
|
<li>
|
|
<i className="fa-solid fa-circle-check" />
|
|
Release of Letraset sheets containing Lorem Ipsum
|
|
</li>
|
|
</ul>
|
|
<div className="about-author">
|
|
<Link
|
|
href={`/about`}
|
|
className="theme-btn wow fadeInUp"
|
|
data-wow-delay=".2s"
|
|
>
|
|
Explore more <i className="fa-regular fa-arrow-right" />
|
|
</Link>
|
|
<div
|
|
className="author-image wow fadeInUp"
|
|
data-wow-delay=".4s"
|
|
>
|
|
<Image
|
|
src="/assets/img/about/author.png"
|
|
width={68}
|
|
height={68}
|
|
alt="author-img"
|
|
/>
|
|
<div className="content">
|
|
<p>Xbuild, CEO</p>
|
|
<h4>Brooklyn Simmons</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<ModalVideo
|
|
channel="youtube"
|
|
youtube={{ mute: 0, autoplay: 0 }}
|
|
isOpen={isOpen}
|
|
videoId="Cn4G2lZ_g2I"
|
|
onClose={() => setOpen(false)}
|
|
/>{" "}
|
|
</>
|
|
);
|
|
}
|