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 Cta from "@/components/homes/home-1/Cta";
|
||||||
import Faq from "@/components/homes/home-1/Faq";
|
import Faq from "@/components/homes/home-1/Faq";
|
||||||
import Hero from "@/components/homes/home-1/Hero";
|
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 Services from "@/components/homes/home-1/Services";
|
||||||
import Skills from "@/components/homes/home-1/Skills";
|
import Skills from "@/components/homes/home-1/Skills";
|
||||||
import Team from "@/components/homes/home-1/Team";
|
import Team from "@/components/homes/home-1/Team";
|
||||||
@ -26,17 +26,18 @@ export default function Home1() {
|
|||||||
<Hero />
|
<Hero />
|
||||||
<About />
|
<About />
|
||||||
<Services />
|
<Services />
|
||||||
<Cta />
|
|
||||||
<Skills />
|
<Skills />
|
||||||
|
<Cta />
|
||||||
<Testimonials />
|
<Testimonials />
|
||||||
<Projects />
|
<Projects />
|
||||||
<Faq />
|
<Faq />
|
||||||
<Team />
|
|
||||||
<Contact />
|
|
||||||
<Blogs />
|
|
||||||
<div className="brand-section fix section-padding">
|
<div className="brand-section fix section-padding">
|
||||||
<Brands />
|
<Brands />
|
||||||
</div>
|
</div>
|
||||||
|
{/* <Team /> */}
|
||||||
|
{/* <Contact /> */}
|
||||||
|
<Blogs />
|
||||||
|
|
||||||
<Footer1 />
|
<Footer1 />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -50,14 +50,6 @@ export default function About() {
|
|||||||
height={270}
|
height={270}
|
||||||
alt="img"
|
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>
|
||||||
<div className="about-line-shape">
|
<div className="about-line-shape">
|
||||||
<Image
|
<Image
|
||||||
@ -101,7 +93,7 @@ export default function About() {
|
|||||||
Release of Letraset sheets containing Lorem Ipsum
|
Release of Letraset sheets containing Lorem Ipsum
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div className="about-author">
|
{/* <div className="about-author">
|
||||||
<div
|
<div
|
||||||
className="author-image wow fadeInUp"
|
className="author-image wow fadeInUp"
|
||||||
data-wow-delay=".2s"
|
data-wow-delay=".2s"
|
||||||
@ -125,7 +117,7 @@ export default function About() {
|
|||||||
className="wow fadeInUp"
|
className="wow fadeInUp"
|
||||||
data-wow-delay=".4s"
|
data-wow-delay=".4s"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</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";
|
import AnimatedText from "@/components/common/AnimatedText";
|
||||||
export default function Cta() {
|
export default function Cta() {
|
||||||
return (
|
return (
|
||||||
<section className="cta-banner-section section-padding">
|
<section className="cta-banner-section section-padding pt-0">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div
|
<div
|
||||||
className="cta-banner-wrapper fix bg-cover"
|
className="cta-banner-wrapper fix bg-cover"
|
||||||
|
|||||||
@ -1,164 +1,82 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import AnimatedText from "@/components/common/AnimatedText";
|
import { Autoplay, Pagination } from "swiper/modules";
|
||||||
import { Autoplay, Navigation } from "swiper/modules";
|
|
||||||
import { Swiper, SwiperSlide } from "swiper/react";
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Image from "next/image";
|
import "swiper/css";
|
||||||
import ModalVideo from "react-modal-video";
|
import "swiper/css/pagination";
|
||||||
import { useState } from "react";
|
|
||||||
export default function Hero() {
|
export default function Hero() {
|
||||||
const [isOpen, setOpen] = useState(false);
|
|
||||||
const swiperOptions = {
|
const swiperOptions = {
|
||||||
spaceBetween: 30,
|
slidesPerView: 1,
|
||||||
speed: 2000,
|
|
||||||
loop: true,
|
loop: true,
|
||||||
|
speed: 4000,
|
||||||
|
freeMode: true,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 2000,
|
delay: 0,
|
||||||
disableOnInteraction: false,
|
disableOnInteraction: false,
|
||||||
},
|
},
|
||||||
navigation: {
|
pagination: {
|
||||||
prevEl: ".array-prevs",
|
el: ".swiper-pagination",
|
||||||
nextEl: ".array-nexts",
|
clickable: true,
|
||||||
},
|
|
||||||
modules: [Autoplay, Navigation],
|
|
||||||
breakpoints: {
|
|
||||||
1199: {
|
|
||||||
slidesPerView: 2,
|
|
||||||
},
|
|
||||||
991: {
|
|
||||||
slidesPerView: 2,
|
|
||||||
},
|
|
||||||
767: {
|
|
||||||
slidesPerView: 2,
|
|
||||||
},
|
|
||||||
575: {
|
|
||||||
slidesPerView: 1,
|
|
||||||
},
|
|
||||||
0: {
|
|
||||||
slidesPerView: 1,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
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">
|
const slides = [
|
||||||
<button className="array-prevs">
|
{
|
||||||
<Image
|
id: 1,
|
||||||
src="/assets/img/hero/prev.png"
|
image: "/assets/img/cta-bg.jpg",
|
||||||
width={15}
|
title: "Create the building",
|
||||||
height={11}
|
subtitle: "you want here",
|
||||||
alt="img"
|
text: "Proactively pontificate client-centered relationships visavis process centric leadership skills. Credibly.",
|
||||||
/>
|
},
|
||||||
Previews
|
{
|
||||||
</button>
|
id: 2,
|
||||||
<button className="array-nexts">
|
image: "/assets/img/cta-bg.jpg",
|
||||||
Next{" "}
|
title: "Design your dream",
|
||||||
<Image
|
subtitle: "with us today",
|
||||||
src="/assets/img/hero/next.png"
|
text: "Empower your projects with innovative solutions and expert guidance from start to finish.",
|
||||||
width={15}
|
},
|
||||||
height={11}
|
{
|
||||||
alt="img"
|
id: 3,
|
||||||
/>
|
image: "/assets/img/cta-bg.jpg",
|
||||||
</button>
|
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>
|
</div>
|
||||||
</Swiper>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</SwiperSlide>
|
||||||
</section>
|
))}
|
||||||
<ModalVideo
|
<div className="swiper-pagination"></div>
|
||||||
channel="youtube"
|
</Swiper>
|
||||||
youtube={{ mute: 0, autoplay: 0 }}
|
|
||||||
isOpen={isOpen}
|
|
||||||
videoId="Cn4G2lZ_g2I"
|
|
||||||
onClose={() => setOpen(false)}
|
|
||||||
/>{" "}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
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";
|
import { skills } from "@/data/skills";
|
||||||
export default function Skills() {
|
export default function Skills() {
|
||||||
return (
|
return (
|
||||||
<section className="skills-section fix section-padding pt-0">
|
<section className="skills-section fix section-padding">
|
||||||
<div className="shape-1 float-bob-x">
|
<div className="shape-1 float-bob-x">
|
||||||
<Image
|
<Image
|
||||||
src="/assets/img/skills/shape-1.png"
|
src="/assets/img/skills/shape-1.png"
|
||||||
@ -61,7 +61,7 @@ export default function Skills() {
|
|||||||
<div className="section-title">
|
<div className="section-title">
|
||||||
<h6 className="wow fadeInUp">
|
<h6 className="wow fadeInUp">
|
||||||
<i className="fa-regular fa-arrow-left-long" />
|
<i className="fa-regular fa-arrow-left-long" />
|
||||||
our skills
|
Why Choose Us
|
||||||
<i className="fa-regular fa-arrow-right-long" />
|
<i className="fa-regular fa-arrow-right-long" />
|
||||||
</h6>
|
</h6>
|
||||||
<h2 className="splt-txt wow">
|
<h2 className="splt-txt wow">
|
||||||
|
|||||||
@ -1,11 +1,22 @@
|
|||||||
import { projects } from "@/data/projects";
|
import { projects } from "@/data/projects";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import AnimatedText from "@/components/common/AnimatedText";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
export default function Projects() {
|
export default function Projects() {
|
||||||
return (
|
return (
|
||||||
<section className="project-section section-padding fix">
|
<section className="project-section section-padding fix">
|
||||||
<div className="container">
|
<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">
|
<div className="row g-4">
|
||||||
{projects.map((project) => (
|
{projects.map((project) => (
|
||||||
<div
|
<div
|
||||||
@ -30,6 +41,12 @@ export default function Projects() {
|
|||||||
<Link href={`/project-details/${project.id}`}>
|
<Link href={`/project-details/${project.id}`}>
|
||||||
{project.title}
|
{project.title}
|
||||||
</Link>
|
</Link>
|
||||||
|
<Link
|
||||||
|
href={`/service-details/${project.id}`}
|
||||||
|
className="link-btn"
|
||||||
|
>
|
||||||
|
<i className="fa-solid fa-arrow-right"></i>
|
||||||
|
</Link>
|
||||||
</h3>
|
</h3>
|
||||||
<p>{project.description}</p>
|
<p>{project.description}</p>
|
||||||
</div>
|
</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,
|
id: 7,
|
||||||
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
||||||
title: "General Construction",
|
title: "Mission",
|
||||||
description:
|
|
||||||
"There are many variations of a passages of Lorem Ipsum available.",
|
|
||||||
delay: ".2s",
|
delay: ".2s",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 8,
|
id: 8,
|
||||||
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
||||||
title: "Architecture & Building",
|
title: "Vission",
|
||||||
description:
|
|
||||||
"There are many variations of a passages of Lorem Ipsum available.",
|
|
||||||
delay: ".4s",
|
delay: ".4s",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 9,
|
id: 9,
|
||||||
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
||||||
title: "Interior Design",
|
title: "Core Values",
|
||||||
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.",
|
|
||||||
delay: ".6s",
|
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 = [
|
export const projects2 = [
|
||||||
|
|||||||
@ -119,7 +119,7 @@
|
|||||||
|
|
||||||
.list-items {
|
.list-items {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
border-bottom: 1px solid $border-color;
|
// border-bottom: 1px solid $border-color;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
|||||||
@ -1,15 +1,29 @@
|
|||||||
.hero-1 {
|
.hero-1 {
|
||||||
background-color: $bg-color;
|
background-size: cover;
|
||||||
position: relative;
|
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 {
|
.container-fluid {
|
||||||
padding: 0 150px;
|
padding: 0 150px;
|
||||||
|
|
||||||
@include breakpoint (max-xl4){
|
@include breakpoint (max-xl4) {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-xxl){
|
@include breakpoint (max-xxl) {
|
||||||
padding: 0 25px;
|
padding: 0 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -21,25 +35,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-content {
|
.hero-content {
|
||||||
background-color: $theme-color;
|
// background-color: $theme-color;
|
||||||
padding: 105px 70px;
|
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%);
|
// 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;
|
// max-width: 870px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@include breakpoint (max-xxl){
|
@include breakpoint (max-xxl) {
|
||||||
padding: 70px 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint (max-lg){
|
|
||||||
padding: 70px 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint (max-md){
|
|
||||||
padding: 70px 40px;
|
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;
|
padding: 60px 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -61,30 +75,34 @@
|
|||||||
color: $white;
|
color: $white;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
.break-line {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
br {
|
br {
|
||||||
@include breakpoint (max-xl){
|
@include breakpoint (max-xl) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-xxl){
|
@include breakpoint (max-xxl) {
|
||||||
font-size: 74px;
|
font-size: 74px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-xl){
|
@include breakpoint (max-xl) {
|
||||||
font-size: 64px;
|
font-size: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-lg){
|
@include breakpoint (max-lg) {
|
||||||
font-size: 54px;
|
font-size: 54px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-md){
|
@include breakpoint (max-md) {
|
||||||
font-size: 46px;
|
font-size: 46px;
|
||||||
line-height: 126%;
|
line-height: 126%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-sm){
|
@include breakpoint (max-sm) {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -95,15 +113,15 @@
|
|||||||
color: $white;
|
color: $white;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
|
||||||
@include breakpoint (max-lg){
|
@include breakpoint (max-lg) {
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-md){
|
@include breakpoint (max-md) {
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-sm){
|
@include breakpoint (max-sm) {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -113,14 +131,14 @@
|
|||||||
@include flex;
|
@include flex;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
|
|
||||||
@include breakpoint (max-sm){
|
@include breakpoint (max-sm) {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-text {
|
.button-text {
|
||||||
.video-btn {
|
.video-btn {
|
||||||
width:55px;
|
width: 55px;
|
||||||
height: 55px;
|
height: 55px;
|
||||||
line-height: 55px;
|
line-height: 55px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -141,23 +159,23 @@
|
|||||||
margin-right: -48%;
|
margin-right: -48%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@include breakpoint (max-lg){
|
@include breakpoint (max-lg) {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-image {
|
.hero-image {
|
||||||
@include breakpoint (max-lg){
|
@include breakpoint (max-lg) {
|
||||||
height: 600px;
|
height: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-md){
|
@include breakpoint (max-md) {
|
||||||
height: 520px;
|
height: 520px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-sm){
|
@include breakpoint (max-sm) {
|
||||||
height: 420px;
|
height: 420px;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@include imgw;
|
@include imgw;
|
||||||
object-fit: cover
|
object-fit: cover
|
||||||
@ -170,12 +188,12 @@
|
|||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@include breakpoint (max-xl4){
|
@include breakpoint (max-xl4) {
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-lg){
|
@include breakpoint (max-lg) {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -189,12 +207,13 @@
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
background: $white;
|
background: $white;
|
||||||
|
|
||||||
@include breakpoint (max-xl4){
|
@include breakpoint (max-xl4) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.array-prevs,.array-nexts {
|
.array-prevs,
|
||||||
|
.array-nexts {
|
||||||
color: $white;
|
color: $white;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -215,15 +234,15 @@
|
|||||||
padding: 230px 0 400px;
|
padding: 230px 0 400px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@include breakpoint (max-xxl){
|
@include breakpoint (max-xxl) {
|
||||||
padding: 235px 0 150px;
|
padding: 235px 0 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-md){
|
@include breakpoint (max-md) {
|
||||||
padding: 195px 0 120px;
|
padding: 195px 0 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-sm){
|
@include breakpoint (max-sm) {
|
||||||
padding: 175px 0 100px;
|
padding: 175px 0 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -238,7 +257,7 @@
|
|||||||
top: 220px;
|
top: 220px;
|
||||||
left: 89px;
|
left: 89px;
|
||||||
|
|
||||||
@include breakpoint (max-xl4){
|
@include breakpoint (max-xl4) {
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@ -246,7 +265,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-xxxl){
|
@include breakpoint (max-xxxl) {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
@ -255,7 +274,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-xxl){
|
@include breakpoint (max-xxl) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -265,7 +284,7 @@
|
|||||||
top: 220px;
|
top: 220px;
|
||||||
right: 89px;
|
right: 89px;
|
||||||
|
|
||||||
@include breakpoint (max-xxxl){
|
@include breakpoint (max-xxxl) {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
@ -274,7 +293,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-xxl){
|
@include breakpoint (max-xxl) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -304,7 +323,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%, -50%);
|
||||||
border: 1px solid $white;
|
border: 1px solid $white;
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
@ -322,7 +341,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -333,10 +352,10 @@
|
|||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
margin-top: -35px;
|
margin-top: -35px;
|
||||||
|
|
||||||
@include breakpoint (max-xxl){
|
@include breakpoint (max-xxl) {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@ -346,19 +365,19 @@
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
line-height: 118%;
|
line-height: 118%;
|
||||||
|
|
||||||
@include breakpoint (max-xxl){
|
@include breakpoint (max-xxl) {
|
||||||
font-size: 80px;
|
font-size: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-lg){
|
@include breakpoint (max-lg) {
|
||||||
font-size: 70px;
|
font-size: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-md){
|
@include breakpoint (max-md) {
|
||||||
font-size: 55px;
|
font-size: 55px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint (max-sm){
|
@include breakpoint (max-sm) {
|
||||||
font-size: 42px;
|
font-size: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -375,7 +394,7 @@
|
|||||||
bottom: 85px;
|
bottom: 85px;
|
||||||
right: 28%;
|
right: 28%;
|
||||||
|
|
||||||
@include breakpoint (max-xxl){
|
@include breakpoint (max-xxl) {
|
||||||
position: static;
|
position: static;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 30px auto 0;
|
margin: 30px auto 0;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user