Home structure updated
This commit is contained in:
parent
2902ff8bab
commit
7ec433e176
43
app/(homes)/home-1 copy/page.jsx
Normal file
43
app/(homes)/home-1 copy/page.jsx
Normal file
@ -0,0 +1,43 @@
|
||||
import Brands from "@/components/common/Brands";
|
||||
import Footer1 from "@/components/footers/Footer1";
|
||||
import Header1 from "@/components/headers/Header1";
|
||||
import HeaderTop1 from "@/components/headers/HeaderTop1";
|
||||
import About from "@/components/homes/home-1/About";
|
||||
import Blogs from "@/components/homes/home-1/Blogs";
|
||||
|
||||
import Contact from "@/components/homes/home-1/Contact";
|
||||
import Cta from "@/components/homes/home-1/Cta";
|
||||
import Faq from "@/components/homes/home-1/Faq";
|
||||
import Hero from "@/components/homes/home-1/Hero";
|
||||
import Projects from "@/components/homes/home-1/Projects";
|
||||
import Services from "@/components/homes/home-1/Services";
|
||||
import Skills from "@/components/homes/home-1/Skills";
|
||||
import Team from "@/components/homes/home-1/Team";
|
||||
import Testimonials from "@/components/homes/home-1/Testimonials";
|
||||
export const metadata = {
|
||||
title: "Home 1 || Xbuild - Constriction nextjs Template",
|
||||
description: "Xbuild - Constriction nextjs Template",
|
||||
};
|
||||
export default function Home1() {
|
||||
return (
|
||||
<>
|
||||
<HeaderTop1 />
|
||||
<Header1 />
|
||||
<Hero />
|
||||
<About />
|
||||
<Services />
|
||||
<Cta />
|
||||
<Skills />
|
||||
<Testimonials />
|
||||
<Projects />
|
||||
<Faq />
|
||||
<Team />
|
||||
<Contact />
|
||||
<Blogs />
|
||||
<div className="brand-section fix section-padding">
|
||||
<Brands />
|
||||
</div>
|
||||
<Footer1 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -9,7 +9,7 @@ import Contact from "@/components/homes/home-1/Contact";
|
||||
import Cta from "@/components/homes/home-1/Cta";
|
||||
import Faq from "@/components/homes/home-1/Faq";
|
||||
import Hero from "@/components/homes/home-1/Hero";
|
||||
import Projects from "@/components/homes/home-1/Projects";
|
||||
import Projects from "@/components/project/Projects";
|
||||
import Services from "@/components/homes/home-1/Services";
|
||||
import Skills from "@/components/homes/home-1/Skills";
|
||||
import Team from "@/components/homes/home-1/Team";
|
||||
@ -26,17 +26,18 @@ export default function Home1() {
|
||||
<Hero />
|
||||
<About />
|
||||
<Services />
|
||||
<Cta />
|
||||
<Skills />
|
||||
<Cta />
|
||||
<Testimonials />
|
||||
<Projects />
|
||||
<Faq />
|
||||
<Team />
|
||||
<Contact />
|
||||
<Blogs />
|
||||
<div className="brand-section fix section-padding">
|
||||
<Brands />
|
||||
</div>
|
||||
{/* <Team /> */}
|
||||
{/* <Contact /> */}
|
||||
<Blogs />
|
||||
|
||||
<Footer1 />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -50,14 +50,6 @@ export default function About() {
|
||||
height={270}
|
||||
alt="img"
|
||||
/>
|
||||
<div className="video-box">
|
||||
<a
|
||||
onClick={() => setOpen(true)}
|
||||
className="video-btn video-popup"
|
||||
>
|
||||
<i className="fas fa-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="about-line-shape">
|
||||
<Image
|
||||
@ -101,7 +93,7 @@ export default function About() {
|
||||
Release of Letraset sheets containing Lorem Ipsum
|
||||
</li>
|
||||
</ul>
|
||||
<div className="about-author">
|
||||
{/* <div className="about-author">
|
||||
<div
|
||||
className="author-image wow fadeInUp"
|
||||
data-wow-delay=".2s"
|
||||
@ -125,7 +117,7 @@ export default function About() {
|
||||
className="wow fadeInUp"
|
||||
data-wow-delay=".4s"
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
144
components/homes/home-1/About2.jsx
Normal file
144
components/homes/home-1/About2.jsx
Normal file
@ -0,0 +1,144 @@
|
||||
"use client";
|
||||
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-1 float-bob-x">
|
||||
<Image
|
||||
src="/assets/img/about/about-shape-1.png"
|
||||
width={114}
|
||||
height={419}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
<div className="about-shape-2 float-bob-x">
|
||||
<Image
|
||||
src="/assets/img/about/about-shape-2.png"
|
||||
width={318}
|
||||
height={408}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="about-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-6">
|
||||
<div className="about-image">
|
||||
<Image
|
||||
src="/assets/img/about/01.jpg"
|
||||
alt="img"
|
||||
width={485}
|
||||
height={592}
|
||||
className="wow fadeInLeft"
|
||||
data-wow-delay=".2s"
|
||||
/>
|
||||
<div
|
||||
className="about-image-2 wow fadeInUp"
|
||||
data-wow-delay=".4s"
|
||||
>
|
||||
<Image
|
||||
src="/assets/img/about/02.jpg"
|
||||
width={260}
|
||||
height={270}
|
||||
alt="img"
|
||||
/>
|
||||
<div className="video-box">
|
||||
<a
|
||||
onClick={() => setOpen(true)}
|
||||
className="video-btn video-popup"
|
||||
>
|
||||
<i className="fas fa-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="about-line-shape">
|
||||
<Image
|
||||
src="/assets/img/about/about-shape-3.png"
|
||||
width={30}
|
||||
height={545}
|
||||
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"></i>1976
|
||||
Building conpany
|
||||
<i className="fa-regular fa-arrow-right-long"></i>
|
||||
</h6>
|
||||
<h2 className="splt-txt wow">
|
||||
<AnimatedText text="Create The Building You Want Here" />
|
||||
</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 less normal
|
||||
distribution of letters.
|
||||
</p>
|
||||
<ul className="list-items wow fadeInUp" data-wow-delay=".2s">
|
||||
<li>
|
||||
<i className="fa-solid fa-circle-check"></i>
|
||||
Proactively pontificate client-centered relationships
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-circle-check"></i>
|
||||
Is there a waiting list for desired work to be started
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-circle-check"></i>
|
||||
Release of Letraset sheets containing Lorem Ipsum
|
||||
</li>
|
||||
</ul>
|
||||
<div className="about-author">
|
||||
<div
|
||||
className="author-image wow fadeInUp"
|
||||
data-wow-delay=".2s"
|
||||
>
|
||||
<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>
|
||||
<Image
|
||||
src="/assets/img/about/signature.png"
|
||||
alt="img"
|
||||
width={85}
|
||||
height={51}
|
||||
className="wow fadeInUp"
|
||||
data-wow-delay=".4s"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>{" "}
|
||||
<ModalVideo
|
||||
channel="youtube"
|
||||
youtube={{ mute: 0, autoplay: 0 }}
|
||||
isOpen={isOpen}
|
||||
videoId="Cn4G2lZ_g2I"
|
||||
onClose={() => setOpen(false)}
|
||||
/>{" "}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -4,7 +4,7 @@ import Image from "next/image";
|
||||
import AnimatedText from "@/components/common/AnimatedText";
|
||||
export default function Cta() {
|
||||
return (
|
||||
<section className="cta-banner-section section-padding">
|
||||
<section className="cta-banner-section section-padding pt-0">
|
||||
<div className="container">
|
||||
<div
|
||||
className="cta-banner-wrapper fix bg-cover"
|
||||
|
||||
@ -1,164 +1,82 @@
|
||||
"use client";
|
||||
import AnimatedText from "@/components/common/AnimatedText";
|
||||
import { Autoplay, Navigation } from "swiper/modules";
|
||||
import { Autoplay, Pagination } from "swiper/modules";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import ModalVideo from "react-modal-video";
|
||||
import { useState } from "react";
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
|
||||
export default function Hero() {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const swiperOptions = {
|
||||
spaceBetween: 30,
|
||||
speed: 2000,
|
||||
slidesPerView: 1,
|
||||
loop: true,
|
||||
speed: 4000,
|
||||
freeMode: true,
|
||||
autoplay: {
|
||||
delay: 2000,
|
||||
delay: 0,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
prevEl: ".array-prevs",
|
||||
nextEl: ".array-nexts",
|
||||
},
|
||||
modules: [Autoplay, Navigation],
|
||||
breakpoints: {
|
||||
1199: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
991: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
767: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
575: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
modules: [Autoplay, Pagination],
|
||||
};
|
||||
const images = [
|
||||
"/assets/img/hero/01.jpg",
|
||||
"/assets/img/hero/02.jpg",
|
||||
"/assets/img/hero/01.jpg",
|
||||
"/assets/img/hero/02.jpg",
|
||||
// Add more image paths as needed
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<section className="hero-section hero-1 fix section-padding">
|
||||
<div className="line-shape">
|
||||
<Image
|
||||
src="/assets/img/hero/line-shape.png"
|
||||
width={365}
|
||||
height={603}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-7">
|
||||
<div className="hero-content">
|
||||
<div className="vector-shape">
|
||||
<Image
|
||||
src="/assets/img/hero/vector.png"
|
||||
width={254}
|
||||
height={296}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
<div className="vector-shape-2">
|
||||
<Image
|
||||
src="/assets/img/hero/vector-2.png"
|
||||
width={254}
|
||||
height={296}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
<h1 className="splt-txt wow">
|
||||
<AnimatedText text="Create the" />
|
||||
<br /> <AnimatedText text="building you" />
|
||||
<br /> <AnimatedText text="want here" />
|
||||
</h1>
|
||||
<p className="wow fadeInUp" data-wow-delay=".5s">
|
||||
Proactively pontificate client-centered relationships visavis
|
||||
process centric leadership skills. Credibly.
|
||||
</p>
|
||||
<div className="hero-button">
|
||||
<Link
|
||||
href={`/about`}
|
||||
className="theme-btn bg-white wow fadeInUp"
|
||||
data-wow-delay=".3s"
|
||||
>
|
||||
Explore More
|
||||
<i className="fa-regular fa-arrow-right"></i>
|
||||
</Link>
|
||||
<span
|
||||
className="button-text wow fadeInUp"
|
||||
data-wow-delay=".5s"
|
||||
>
|
||||
<a
|
||||
onClick={() => setOpen(true)}
|
||||
className="video-btn video-popup"
|
||||
>
|
||||
<i className="fa-solid fa-play"></i>
|
||||
</a>
|
||||
<span className="ms-3 d-line">play reel</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="hero-image-items">
|
||||
<Swiper {...swiperOptions} className="swiper hero-slider">
|
||||
{images.map((src, index) => (
|
||||
<SwiperSlide className="swiper-slide" key={index}>
|
||||
<div className="hero-image">
|
||||
<Image
|
||||
width={475}
|
||||
height={635}
|
||||
src={src}
|
||||
alt={`Hero ${index + 1}`}
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
|
||||
<div className="array-button">
|
||||
<button className="array-prevs">
|
||||
<Image
|
||||
src="/assets/img/hero/prev.png"
|
||||
width={15}
|
||||
height={11}
|
||||
alt="img"
|
||||
/>
|
||||
Previews
|
||||
</button>
|
||||
<button className="array-nexts">
|
||||
Next{" "}
|
||||
<Image
|
||||
src="/assets/img/hero/next.png"
|
||||
width={15}
|
||||
height={11}
|
||||
alt="img"
|
||||
/>
|
||||
</button>
|
||||
const slides = [
|
||||
{
|
||||
id: 1,
|
||||
image: "/assets/img/cta-bg.jpg",
|
||||
title: "Create the building",
|
||||
subtitle: "you want here",
|
||||
text: "Proactively pontificate client-centered relationships visavis process centric leadership skills. Credibly.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/assets/img/cta-bg.jpg",
|
||||
title: "Design your dream",
|
||||
subtitle: "with us today",
|
||||
text: "Empower your projects with innovative solutions and expert guidance from start to finish.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/assets/img/cta-bg.jpg",
|
||||
title: "Build your future",
|
||||
subtitle: "with confidence",
|
||||
text: "Delivering excellence through teamwork, integrity, and cutting-edge technology. Credibly",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Swiper {...swiperOptions} className="hero-swiper">
|
||||
{slides.map((slide) => (
|
||||
<SwiperSlide key={slide.id}>
|
||||
<section
|
||||
className="hero-section hero-1"
|
||||
style={{ backgroundImage: `url(${slide.image})` }}
|
||||
>
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="hero-content">
|
||||
<h1 className="splt-txt">
|
||||
<span className="break-line">{slide.title}</span>
|
||||
<span className="break-line">{slide.subtitle}</span>
|
||||
</h1>
|
||||
<p>{slide.text}</p>
|
||||
<div className="hero-button">
|
||||
<Link href="/about" className="theme-btn bg-white">
|
||||
Explore More
|
||||
<i className="fa-regular fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<ModalVideo
|
||||
channel="youtube"
|
||||
youtube={{ mute: 0, autoplay: 0 }}
|
||||
isOpen={isOpen}
|
||||
videoId="Cn4G2lZ_g2I"
|
||||
onClose={() => setOpen(false)}
|
||||
/>{" "}
|
||||
</>
|
||||
</section>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
<div className="swiper-pagination"></div>
|
||||
</Swiper>
|
||||
);
|
||||
}
|
||||
|
||||
164
components/homes/home-1/Hero2.jsx
Normal file
164
components/homes/home-1/Hero2.jsx
Normal file
@ -0,0 +1,164 @@
|
||||
"use client";
|
||||
import AnimatedText from "@/components/common/AnimatedText";
|
||||
import { Autoplay, Navigation } from "swiper/modules";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import ModalVideo from "react-modal-video";
|
||||
import { useState } from "react";
|
||||
export default function Hero() {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const swiperOptions = {
|
||||
spaceBetween: 30,
|
||||
speed: 2000,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
prevEl: ".array-prevs",
|
||||
nextEl: ".array-nexts",
|
||||
},
|
||||
modules: [Autoplay, Navigation],
|
||||
breakpoints: {
|
||||
1199: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
991: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
767: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
575: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
const images = [
|
||||
"/assets/img/hero/01.jpg",
|
||||
"/assets/img/hero/02.jpg",
|
||||
"/assets/img/hero/01.jpg",
|
||||
"/assets/img/hero/02.jpg",
|
||||
// Add more image paths as needed
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<section className="hero-section hero-1 fix section-padding">
|
||||
<div className="line-shape">
|
||||
<Image
|
||||
src="/assets/img/hero/line-shape.png"
|
||||
width={365}
|
||||
height={603}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-7">
|
||||
<div className="hero-content">
|
||||
<div className="vector-shape">
|
||||
<Image
|
||||
src="/assets/img/hero/vector.png"
|
||||
width={254}
|
||||
height={296}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
<div className="vector-shape-2">
|
||||
<Image
|
||||
src="/assets/img/hero/vector-2.png"
|
||||
width={254}
|
||||
height={296}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
<h1 className="splt-txt wow">
|
||||
<AnimatedText text="Create the" />
|
||||
<br /> <AnimatedText text="building you" />
|
||||
<br /> <AnimatedText text="want here" />
|
||||
</h1>
|
||||
<p className="wow fadeInUp" data-wow-delay=".5s">
|
||||
Proactively pontificate client-centered relationships visavis
|
||||
process centric leadership skills. Credibly.
|
||||
</p>
|
||||
<div className="hero-button">
|
||||
<Link
|
||||
href={`/about`}
|
||||
className="theme-btn bg-white wow fadeInUp"
|
||||
data-wow-delay=".3s"
|
||||
>
|
||||
Explore More
|
||||
<i className="fa-regular fa-arrow-right"></i>
|
||||
</Link>
|
||||
<span
|
||||
className="button-text wow fadeInUp"
|
||||
data-wow-delay=".5s"
|
||||
>
|
||||
<a
|
||||
onClick={() => setOpen(true)}
|
||||
className="video-btn video-popup"
|
||||
>
|
||||
<i className="fa-solid fa-play"></i>
|
||||
</a>
|
||||
<span className="ms-3 d-line">play reel</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="hero-image-items">
|
||||
<Swiper {...swiperOptions} className="swiper hero-slider">
|
||||
{images.map((src, index) => (
|
||||
<SwiperSlide className="swiper-slide" key={index}>
|
||||
<div className="hero-image">
|
||||
<Image
|
||||
width={475}
|
||||
height={635}
|
||||
src={src}
|
||||
alt={`Hero ${index + 1}`}
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
|
||||
<div className="array-button">
|
||||
<button className="array-prevs">
|
||||
<Image
|
||||
src="/assets/img/hero/prev.png"
|
||||
width={15}
|
||||
height={11}
|
||||
alt="img"
|
||||
/>
|
||||
Previews
|
||||
</button>
|
||||
<button className="array-nexts">
|
||||
Next{" "}
|
||||
<Image
|
||||
src="/assets/img/hero/next.png"
|
||||
width={15}
|
||||
height={11}
|
||||
alt="img"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<ModalVideo
|
||||
channel="youtube"
|
||||
youtube={{ mute: 0, autoplay: 0 }}
|
||||
isOpen={isOpen}
|
||||
videoId="Cn4G2lZ_g2I"
|
||||
onClose={() => setOpen(false)}
|
||||
/>{" "}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -4,7 +4,7 @@ import AnimatedText from "@/components/common/AnimatedText";
|
||||
import { skills } from "@/data/skills";
|
||||
export default function Skills() {
|
||||
return (
|
||||
<section className="skills-section fix section-padding pt-0">
|
||||
<section className="skills-section fix section-padding">
|
||||
<div className="shape-1 float-bob-x">
|
||||
<Image
|
||||
src="/assets/img/skills/shape-1.png"
|
||||
@ -61,7 +61,7 @@ export default function Skills() {
|
||||
<div className="section-title">
|
||||
<h6 className="wow fadeInUp">
|
||||
<i className="fa-regular fa-arrow-left-long" />
|
||||
our skills
|
||||
Why Choose Us
|
||||
<i className="fa-regular fa-arrow-right-long" />
|
||||
</h6>
|
||||
<h2 className="splt-txt wow">
|
||||
|
||||
@ -1,11 +1,22 @@
|
||||
import { projects } from "@/data/projects";
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import AnimatedText from "@/components/common/AnimatedText";
|
||||
import Link from "next/link";
|
||||
export default function Projects() {
|
||||
return (
|
||||
<section className="project-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<h6 className="wow fadeInUp">
|
||||
<i className="fa-regular fa-arrow-left-long" />
|
||||
Who we are
|
||||
<i className="fa-regular fa-arrow-right-long" />
|
||||
</h6>
|
||||
<h2 className="splt-txt wow">
|
||||
<AnimatedText text="Delivers Custom Food" />
|
||||
</h2>
|
||||
</div>
|
||||
<div className="row g-4">
|
||||
{projects.map((project) => (
|
||||
<div
|
||||
@ -30,6 +41,12 @@ export default function Projects() {
|
||||
<Link href={`/project-details/${project.id}`}>
|
||||
{project.title}
|
||||
</Link>
|
||||
<Link
|
||||
href={`/service-details/${project.id}`}
|
||||
className="link-btn"
|
||||
>
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</h3>
|
||||
<p>{project.description}</p>
|
||||
</div>
|
||||
|
||||
51
components/project/Projects2.jsx
Normal file
51
components/project/Projects2.jsx
Normal file
@ -0,0 +1,51 @@
|
||||
import { projects } from "@/data/projects";
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
export default function Projects() {
|
||||
return (
|
||||
<section className="project-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="row g-4">
|
||||
{projects.map((project) => (
|
||||
<div
|
||||
key={project.id}
|
||||
className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
|
||||
data-wow-delay={project.delay}
|
||||
>
|
||||
<div className="project-card-items">
|
||||
<div className="project-image">
|
||||
{project.images.map((image, index) => (
|
||||
<Image
|
||||
key={index}
|
||||
width={370}
|
||||
height={331}
|
||||
src={image}
|
||||
alt="img"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="project-content">
|
||||
<h3>
|
||||
<Link href={`/project-details/${project.id}`}>
|
||||
{project.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<p>{project.description}</p>
|
||||
</div>
|
||||
<div className="shape-img">
|
||||
<Image
|
||||
src="/assets/img/project/shape.png"
|
||||
width={57}
|
||||
height={54}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
108
data/projects.js
108
data/projects.js
@ -47,75 +47,69 @@ export const projects = [
|
||||
{
|
||||
id: 7,
|
||||
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
||||
title: "General Construction",
|
||||
description:
|
||||
"There are many variations of a passages of Lorem Ipsum available.",
|
||||
title: "Mission",
|
||||
delay: ".2s",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
||||
title: "Architecture & Building",
|
||||
description:
|
||||
"There are many variations of a passages of Lorem Ipsum available.",
|
||||
title: "Vission",
|
||||
delay: ".4s",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
||||
title: "Interior Design",
|
||||
description:
|
||||
"There are many variations of a passages of Lorem Ipsum available.",
|
||||
delay: ".6s",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
images: ["/assets/img/project/12.jpg", "/assets/img/project/12.jpg"],
|
||||
title: "Combine Electricity",
|
||||
description:
|
||||
"There are many variations of a passages of Lorem Ipsum available.",
|
||||
delay: ".2s",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
images: ["/assets/img/project/13.jpg", "/assets/img/project/13.jpg"],
|
||||
title: "Bridge Trangle Core",
|
||||
description:
|
||||
"There are many variations of a passages of Lorem Ipsum available.",
|
||||
delay: ".4s",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
images: ["/assets/img/project/14.jpg", "/assets/img/project/14.jpg"],
|
||||
title: "General Construction",
|
||||
description:
|
||||
"There are many variations of a passages of Lorem Ipsum available.",
|
||||
delay: ".6s",
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
images: ["/assets/img/project/15.jpg", "/assets/img/project/15.jpg"],
|
||||
title: "Contemporary Villa",
|
||||
description:
|
||||
"There are many variations of a passages of Lorem Ipsum available.",
|
||||
delay: ".2s",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
images: ["/assets/img/project/16.jpg", "/assets/img/project/16.jpg"],
|
||||
title: "Rubix Carabil Tower",
|
||||
description:
|
||||
"There are many variations of a passages of Lorem Ipsum available.",
|
||||
delay: ".4s",
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
images: ["/assets/img/project/17.jpg", "/assets/img/project/17.jpg"],
|
||||
title: "Combine Electricity",
|
||||
description:
|
||||
"There are many variations of a passages of Lorem Ipsum available.",
|
||||
title: "Core Values",
|
||||
delay: ".6s",
|
||||
},
|
||||
// {
|
||||
// id: 10,
|
||||
// images: ["/assets/img/project/12.jpg", "/assets/img/project/12.jpg"],
|
||||
// title: "Combine Electricity",
|
||||
// description:
|
||||
// "There are many variations of a passages of Lorem Ipsum available.",
|
||||
// delay: ".2s",
|
||||
// },
|
||||
// {
|
||||
// id: 11,
|
||||
// images: ["/assets/img/project/13.jpg", "/assets/img/project/13.jpg"],
|
||||
// title: "Bridge Trangle Core",
|
||||
// description:
|
||||
// "There are many variations of a passages of Lorem Ipsum available.",
|
||||
// delay: ".4s",
|
||||
// },
|
||||
// {
|
||||
// id: 12,
|
||||
// images: ["/assets/img/project/14.jpg", "/assets/img/project/14.jpg"],
|
||||
// title: "General Construction",
|
||||
// description:
|
||||
// "There are many variations of a passages of Lorem Ipsum available.",
|
||||
// delay: ".6s",
|
||||
// },
|
||||
// {
|
||||
// id: 13,
|
||||
// images: ["/assets/img/project/15.jpg", "/assets/img/project/15.jpg"],
|
||||
// title: "Contemporary Villa",
|
||||
// description:
|
||||
// "There are many variations of a passages of Lorem Ipsum available.",
|
||||
// delay: ".2s",
|
||||
// },
|
||||
// {
|
||||
// id: 14,
|
||||
// images: ["/assets/img/project/16.jpg", "/assets/img/project/16.jpg"],
|
||||
// title: "Rubix Carabil Tower",
|
||||
// description:
|
||||
// "There are many variations of a passages of Lorem Ipsum available.",
|
||||
// delay: ".4s",
|
||||
// },
|
||||
// {
|
||||
// id: 15,
|
||||
// images: ["/assets/img/project/17.jpg", "/assets/img/project/17.jpg"],
|
||||
// title: "Combine Electricity",
|
||||
// description:
|
||||
// "There are many variations of a passages of Lorem Ipsum available.",
|
||||
// delay: ".6s",
|
||||
// },
|
||||
];
|
||||
|
||||
export const projects2 = [
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
|
||||
.list-items {
|
||||
margin-top: 30px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
// border-bottom: 1px solid $border-color;
|
||||
padding-bottom: 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
|
||||
@ -1,15 +1,29 @@
|
||||
.hero-1 {
|
||||
background-color: $bg-color;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 190px 0;
|
||||
|
||||
@include breakpoint(max-xxl) {
|
||||
padding: 140px 0;
|
||||
}
|
||||
|
||||
@include breakpoint(max-md) {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
@include breakpoint(max-sm) {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding: 0 150px;
|
||||
|
||||
@include breakpoint (max-xl4){
|
||||
@include breakpoint (max-xl4) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-xxl){
|
||||
@include breakpoint (max-xxl) {
|
||||
padding: 0 25px;
|
||||
}
|
||||
}
|
||||
@ -21,25 +35,25 @@
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
background-color: $theme-color;
|
||||
// background-color: $theme-color;
|
||||
padding: 105px 70px;
|
||||
clip-path: polygon(0% 15%, 0 11%, 11% 0, 85% 0%, 100% 0, 100% 15%, 100% 88%, 91% 100%, 94% 100%, 15% 100%, 0 100%, 0% 85%);
|
||||
max-width: 870px;
|
||||
// clip-path: polygon(0% 15%, 0 11%, 11% 0, 85% 0%, 100% 0, 100% 15%, 100% 88%, 91% 100%, 94% 100%, 15% 100%, 0 100%, 0% 85%);
|
||||
// max-width: 870px;
|
||||
position: relative;
|
||||
|
||||
@include breakpoint (max-xxl){
|
||||
padding: 70px 40px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-lg){
|
||||
padding: 70px 50px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-md){
|
||||
@include breakpoint (max-xxl) {
|
||||
padding: 70px 40px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-sm){
|
||||
@include breakpoint (max-lg) {
|
||||
padding: 70px 50px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-md) {
|
||||
padding: 70px 40px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-sm) {
|
||||
padding: 60px 30px;
|
||||
}
|
||||
|
||||
@ -61,30 +75,34 @@
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
|
||||
.break-line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
br {
|
||||
@include breakpoint (max-xl){
|
||||
@include breakpoint (max-xl) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint (max-xxl){
|
||||
font-size: 74px;
|
||||
@include breakpoint (max-xxl) {
|
||||
font-size: 74px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-xl){
|
||||
@include breakpoint (max-xl) {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-lg){
|
||||
@include breakpoint (max-lg) {
|
||||
font-size: 54px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-md){
|
||||
@include breakpoint (max-md) {
|
||||
font-size: 46px;
|
||||
line-height: 126%;
|
||||
}
|
||||
|
||||
@include breakpoint (max-sm){
|
||||
@include breakpoint (max-sm) {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
@ -95,15 +113,15 @@
|
||||
color: $white;
|
||||
margin-top: 20px;
|
||||
|
||||
@include breakpoint (max-lg){
|
||||
@include breakpoint (max-lg) {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-md){
|
||||
@include breakpoint (max-md) {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-sm){
|
||||
@include breakpoint (max-sm) {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
@ -113,14 +131,14 @@
|
||||
@include flex;
|
||||
gap: 24px;
|
||||
|
||||
@include breakpoint (max-sm){
|
||||
@include breakpoint (max-sm) {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
.video-btn {
|
||||
width:55px;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
display: inline-block;
|
||||
@ -141,23 +159,23 @@
|
||||
margin-right: -48%;
|
||||
position: relative;
|
||||
|
||||
@include breakpoint (max-lg){
|
||||
@include breakpoint (max-lg) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
@include breakpoint (max-lg){
|
||||
@include breakpoint (max-lg) {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-md){
|
||||
@include breakpoint (max-md) {
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-sm){
|
||||
@include breakpoint (max-sm) {
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
@include imgw;
|
||||
object-fit: cover
|
||||
@ -170,12 +188,12 @@
|
||||
margin-top: 40px;
|
||||
position: relative;
|
||||
|
||||
@include breakpoint (max-xl4){
|
||||
@include breakpoint (max-xl4) {
|
||||
gap: 50px;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
@include breakpoint (max-lg){
|
||||
@include breakpoint (max-lg) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@ -189,12 +207,13 @@
|
||||
opacity: 0.5;
|
||||
background: $white;
|
||||
|
||||
@include breakpoint (max-xl4){
|
||||
display: none;
|
||||
@include breakpoint (max-xl4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.array-prevs,.array-nexts {
|
||||
.array-prevs,
|
||||
.array-nexts {
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
@ -215,15 +234,15 @@
|
||||
padding: 230px 0 400px;
|
||||
position: relative;
|
||||
|
||||
@include breakpoint (max-xxl){
|
||||
@include breakpoint (max-xxl) {
|
||||
padding: 235px 0 150px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-md){
|
||||
@include breakpoint (max-md) {
|
||||
padding: 195px 0 120px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-sm){
|
||||
@include breakpoint (max-sm) {
|
||||
padding: 175px 0 100px;
|
||||
}
|
||||
|
||||
@ -238,7 +257,7 @@
|
||||
top: 220px;
|
||||
left: 89px;
|
||||
|
||||
@include breakpoint (max-xl4){
|
||||
@include breakpoint (max-xl4) {
|
||||
left: 0;
|
||||
|
||||
img {
|
||||
@ -246,7 +265,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint (max-xxxl){
|
||||
@include breakpoint (max-xxxl) {
|
||||
max-width: 500px;
|
||||
left: 0;
|
||||
|
||||
@ -255,7 +274,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint (max-xxl){
|
||||
@include breakpoint (max-xxl) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -265,7 +284,7 @@
|
||||
top: 220px;
|
||||
right: 89px;
|
||||
|
||||
@include breakpoint (max-xxxl){
|
||||
@include breakpoint (max-xxxl) {
|
||||
max-width: 500px;
|
||||
right: 0;
|
||||
|
||||
@ -274,7 +293,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint (max-xxl){
|
||||
@include breakpoint (max-xxl) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -304,7 +323,7 @@
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid $white;
|
||||
content: "";
|
||||
}
|
||||
@ -322,7 +341,7 @@
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -333,10 +352,10 @@
|
||||
margin-left: 30px;
|
||||
margin-top: -35px;
|
||||
|
||||
@include breakpoint (max-xxl){
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
@include breakpoint (max-xxl) {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -346,19 +365,19 @@
|
||||
text-transform: uppercase;
|
||||
line-height: 118%;
|
||||
|
||||
@include breakpoint (max-xxl){
|
||||
@include breakpoint (max-xxl) {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-lg){
|
||||
@include breakpoint (max-lg) {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-md){
|
||||
@include breakpoint (max-md) {
|
||||
font-size: 55px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-sm){
|
||||
@include breakpoint (max-sm) {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
@ -375,7 +394,7 @@
|
||||
bottom: 85px;
|
||||
right: 28%;
|
||||
|
||||
@include breakpoint (max-xxl){
|
||||
@include breakpoint (max-xxl) {
|
||||
position: static;
|
||||
text-align: center;
|
||||
margin: 30px auto 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user