fix: moving header and footer section to layout

This commit is contained in:
RizqiSyahrendra 2025-02-02 17:35:02 +07:00
parent e104afb61e
commit d88cff95d6
10 changed files with 1139 additions and 1368 deletions

View File

@ -12,6 +12,10 @@ import "photoswipe/dist/photoswipe.css";
import "tippy.js/dist/tippy.css"; import "tippy.js/dist/tippy.css";
import "@public/assets/css/styles.css"; import "@public/assets/css/styles.css";
import Image from "next/image";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { slickMultipages } from "@/data/menu";
export default function MainLayout({ export default function MainLayout({
children, children,
@ -75,7 +79,27 @@ export default function MainLayout({
rel="stylesheet" rel="stylesheet"
/> />
</head> </head>
<body className="appear-animate body">{children}</body> <body className="appear-animate body">
<div className="theme-slick">
<div className="page" id="top">
<nav className="main-nav transparent stick-fixed wow-menubar wch-unset">
<Header links={slickMultipages} />
</nav>
<main id="main">{children}</main>
<footer className="page-section footer position-relative overflow-hidden pb-30">
<div className="bg-shape-4">
<Image
src="/assets/images/demo-slick/bg-shape-4.svg"
width={1600}
height={268}
alt=""
/>
</div>
<Footer />
</footer>
</div>
</div>
</body>
</html> </html>
); );
} }

View File

@ -1,12 +1,9 @@
import Image from "next/image";
import Header from "@/components/Header";
import Hero from "@/components/Hero"; import Hero from "@/components/Hero";
import Footer from "@/components/Footer";
import Homepage from "@/components/Homepage"; import Homepage from "@/components/Homepage";
import { slickMultipages } from "@/data/menu"; import Image from "next/image";
export const metadata = { export const metadata = {
title: "Cochise Oncology", title: "HomePage - Cochise Oncology",
description: description:
"Resonance &mdash; One & Multi Page React Nextjs Creative Template", "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
}; };
@ -14,39 +11,19 @@ export const metadata = {
export default function Home() { export default function Home() {
return ( return (
<> <>
<div className="theme-slick"> <section className="home-section scrollSpysection" id="home">
<div className="page" id="top"> <div className="bg-shape-2 wow fadeIn">
<nav className="main-nav transparent stick-fixed wow-menubar wch-unset"> <Image
<Header links={slickMultipages} /> src="/assets/images/demo-slick/bg-shape-2.svg"
</nav> width={858}
<main id="main"> height={804}
<section className="home-section scrollSpysection" id="home"> alt=""
<div className="bg-shape-2 wow fadeIn"> />
<Image
src="/assets/images/demo-slick/bg-shape-2.svg"
width={858}
height={804}
alt=""
/>
</div>
<Hero />
</section>
<Homepage />
</main>
<footer className="page-section footer position-relative overflow-hidden pb-30">
<div className="bg-shape-4">
<Image
src="/assets/images/demo-slick/bg-shape-4.svg"
width={1600}
height={268}
alt=""
/>
</div>
<Footer />
</footer>
</div> </div>
</div> <Hero />
</section>
<Homepage />
</> </>
); );
} }

View File

@ -1,10 +1,7 @@
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Facts from "@/components/Facts"; import Facts from "@/components/Facts";
import Testimonials from "@/components/Testimonials"; import Testimonials from "@/components/Testimonials";
import TestimonialsDark from "@/components/TestimonialsDark"; import TestimonialsDark from "@/components/TestimonialsDark";
import { features4 } from "@/data/features"; import { features4 } from "@/data/features";
import { slickMultipagesDark } from "@/data/menu";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
@ -18,242 +15,209 @@ const dark = true;
export default function SlickAboutPageDark() { export default function SlickAboutPageDark() {
return ( return (
<> <>
<div className="theme-slick"> <section
<div className="dark-mode"> className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"
<div className="page bg-dark-1" id="top"> id="home"
<nav className="main-nav dark dark-mode transparent stick-fixed wow-menubar wch-unset"> >
<Header links={slickMultipagesDark} /> {/* <!-- Background Shape --> */}
</nav> <div className="bg-shape-1 opacity-003">
<main id="main"> <Image
<section src="/assets/images/demo-fancy/bg-shape-1.svg"
className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden" width={1443}
id="home" height={844}
> alt=""
{/* <!-- Background Shape --> */} />
<div className="bg-shape-1 opacity-003">
<Image
src="/assets/images/demo-fancy/bg-shape-1.svg"
width={1443}
height={844}
alt=""
/>
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">
About Studio
</h1>
<p
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Crafting immersive digital journeys for brands.
</p>
</div>
</div>
</div>
</section>
<section
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="about"
>
<div className="container position-relative">
<div className="row">
{/* Section Text */}
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
<div className="w-100 wow fadeInUp">
<h2 className="section-caption-slick mb-30 mb-sm-20">
Our Story
</h2>
<h3 className="section-title mb-30">
We believe in creatives with a&nbsp;passion to smart
design.
</h3>
<p className="text-gray mb-40">
Etiam fermentum vehicula faucibus. Praesent
ullamcorper urna id arcu molestie scelerisque. Sed
imperdiet tristique mauris et faucibus. Maecenas
semper augue non fringilla placerat. Curabitur luctus
erat sit amet ultricies aliquam. Donec dictum
convallis mauris et maximus. Nullam massa arcu, porta
quis felis et, eleifend varius quam.
</p>
{/* Features List */}
<div className="row features-list mt-n20 mb-50 mb-sm-30">
{/* Features List Item */}
{features4.map((feature, index) => (
<div
key={index}
className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20"
>
<div className="features-list-icon">
<i className="mi-check" />
</div>
<div className="features-list-text">
{feature.text}
</div>
</div>
))}
{/* End Features List Item */}
</div>
{/* End Features List */}
<div className="local-scroll wch-unset">
<Link
href={`/slick-contact${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Start a project</span>
</Link>
<Link
href={`/slick-about${dark ? "-dark" : ""}`}
className="link-hover-anim ms-2 ms-sm-5 me-2"
data-link-animate="y"
>
<span className="link-strong link-strong-unhovered">
Learn more{" "}
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span>
<span
className="link-strong link-strong-hovered"
aria-hidden="true"
>
Learn more{" "}
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span>
</Link>
</div>
</div>
</div>
{/* End Section Text */}
{/* Image */}
<div className="col-lg-6 d-flex align-items-center">
<div className="w-100 pe-lg-5">
<div className="composition-5">
<div className="composition-5-decoration opacity-065">
<Image
src="/assets/images/demo-slick/decoration-1.svg"
alt=""
width={228}
height={228}
/>
</div>
<div className="composition-5-image-1">
<div className="composition-5-image-1-inner">
<Image
src="/assets/images/demo-slick/hs-image-3.jpg"
alt="Image Description"
width={850}
height={914}
className="wow scaleOutIn"
data-wow-offset={200}
/>
</div>
</div>
<div className="composition-5-image-2">
<div className="composition-5-image-2-inner">
<Image
src="/assets/images/demo-slick/hs-image-4.jpg"
alt="Image Description"
width={400}
height={400}
className="wow scaleOutIn"
data-wow-offset={0}
/>
</div>
</div>
</div>
</div>
</div>
{/* End Images */}
</div>
</div>
</section>
<section
className={`page-section ${
dark
? "bg-dark-1 bg-dark-alpha light-content"
: "bg-light-alpha-90"
} bg-scroll`}
style={{
backgroundImage:
"url(/assets/images/demo-slick/section-bg-1.jpg)",
}}
>
<Facts />
</section>
<section
className={`page-section ${
dark ? "bg-dark-1 light-content" : ""
} `}
>
{dark ? <TestimonialsDark /> : <Testimonials />}
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20">
Like our creative works?
</h2>
<p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus
lorem ipsum posuere eget at ex. Aenean consequat
vitae lorem in vehicula.
</p>
</div>
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
<Link
href={`/slick-portfolio${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
>
<span>View all works</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">
<div className="bg-shape-4 opacity-003">
<Image
src="/assets/images/demo-slick/bg-shape-4.svg"
width={1600}
height={268}
alt=""
/>
</div>
<Footer />
</footer>
</div>{" "}
</div> </div>
</div> {/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">About Studio</h1>
<p
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Crafting immersive digital journeys for brands.
</p>
</div>
</div>
</div>
</section>
<section
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="about"
>
<div className="container position-relative">
<div className="row">
{/* Section Text */}
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
<div className="w-100 wow fadeInUp">
<h2 className="section-caption-slick mb-30 mb-sm-20">
Our Story
</h2>
<h3 className="section-title mb-30">
We believe in creatives with a&nbsp;passion to smart design.
</h3>
<p className="text-gray mb-40">
Etiam fermentum vehicula faucibus. Praesent ullamcorper urna
id arcu molestie scelerisque. Sed imperdiet tristique mauris
et faucibus. Maecenas semper augue non fringilla placerat.
Curabitur luctus erat sit amet ultricies aliquam. Donec dictum
convallis mauris et maximus. Nullam massa arcu, porta quis
felis et, eleifend varius quam.
</p>
{/* Features List */}
<div className="row features-list mt-n20 mb-50 mb-sm-30">
{/* Features List Item */}
{features4.map((feature, index) => (
<div
key={index}
className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20"
>
<div className="features-list-icon">
<i className="mi-check" />
</div>
<div className="features-list-text">{feature.text}</div>
</div>
))}
{/* End Features List Item */}
</div>
{/* End Features List */}
<div className="local-scroll wch-unset">
<Link
href={`/slick-contact${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Start a project</span>
</Link>
<Link
href={`/slick-about${dark ? "-dark" : ""}`}
className="link-hover-anim ms-2 ms-sm-5 me-2"
data-link-animate="y"
>
<span className="link-strong link-strong-unhovered">
Learn more{" "}
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span>
<span
className="link-strong link-strong-hovered"
aria-hidden="true"
>
Learn more{" "}
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span>
</Link>
</div>
</div>
</div>
{/* End Section Text */}
{/* Image */}
<div className="col-lg-6 d-flex align-items-center">
<div className="w-100 pe-lg-5">
<div className="composition-5">
<div className="composition-5-decoration opacity-065">
<Image
src="/assets/images/demo-slick/decoration-1.svg"
alt=""
width={228}
height={228}
/>
</div>
<div className="composition-5-image-1">
<div className="composition-5-image-1-inner">
<Image
src="/assets/images/demo-slick/hs-image-3.jpg"
alt="Image Description"
width={850}
height={914}
className="wow scaleOutIn"
data-wow-offset={200}
/>
</div>
</div>
<div className="composition-5-image-2">
<div className="composition-5-image-2-inner">
<Image
src="/assets/images/demo-slick/hs-image-4.jpg"
alt="Image Description"
width={400}
height={400}
className="wow scaleOutIn"
data-wow-offset={0}
/>
</div>
</div>
</div>
</div>
</div>
{/* End Images */}
</div>
</div>
</section>
<section
className={`page-section ${
dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"
} bg-scroll`}
style={{
backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
}}
>
<Facts />
</section>
<section
className={`page-section ${dark ? "bg-dark-1 light-content" : ""} `}
>
{dark ? <TestimonialsDark /> : <Testimonials />}
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20">
Like our creative works?
</h2>
<p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus lorem
ipsum posuere eget at ex. Aenean consequat vitae lorem in
vehicula.
</p>
</div>
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
<Link
href={`/slick-portfolio${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
>
<span>View all works</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</> </>
); );
} }

View File

@ -1,10 +1,7 @@
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Facts from "@/components/Facts"; import Facts from "@/components/Facts";
import Testimonials from "@/components/Testimonials"; import Testimonials from "@/components/Testimonials";
import TestimonialsDark from "@/components/TestimonialsDark"; import TestimonialsDark from "@/components/TestimonialsDark";
import { features4 } from "@/data/features"; import { features4 } from "@/data/features";
import { slickMultipages } from "@/data/menu";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
@ -19,240 +16,209 @@ const dark = false;
export default function SlickAboutPage() { export default function SlickAboutPage() {
return ( return (
<> <>
<div className="theme-slick"> <section
<div className="page" id="top"> className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
<nav className="main-nav transparent stick-fixed wow-menubar wch-unset"> id="home"
<Header links={slickMultipages} /> >
</nav> {/* <!-- Background Shape --> */}
<main id="main"> <div className="bg-shape-1 wow fadeIn">
<section <Image
className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" src="/assets/images/demo-fancy/bg-shape-1.svg"
id="home" width={1443}
> height={844}
{/* <!-- Background Shape --> */} alt=""
<div className="bg-shape-1 wow fadeIn"> />
<Image </div>
src="/assets/images/demo-fancy/bg-shape-1.svg" {/* <!-- End Background Shape --> */}
width={1443}
height={844}
alt=""
/>
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center"> <div className="container position-relative pt-sm-40 text-center">
<div className="row"> <div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2"> <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp"> <h1 className="hs-title-10 mb-10 wow fadeInUp">About Studio</h1>
About Studio
</h1>
<p <p
className="section-descr mb-0 wow fadeInUp" className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s" data-wow-delay="0.2s"
>
Crafting immersive digital journeys for brands.
</p>
</div>
</div>
</div>
</section>
<section
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="about"
>
<div className="container position-relative">
<div className="row">
{/* Section Text */}
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
<div className="w-100 wow fadeInUp">
<h2 className="section-caption-slick mb-30 mb-sm-20">
Our Story
</h2>
<h3 className="section-title mb-30">
We believe in creatives with a&nbsp;passion to smart design.
</h3>
<p className="text-gray mb-40">
Etiam fermentum vehicula faucibus. Praesent ullamcorper urna
id arcu molestie scelerisque. Sed imperdiet tristique mauris
et faucibus. Maecenas semper augue non fringilla placerat.
Curabitur luctus erat sit amet ultricies aliquam. Donec dictum
convallis mauris et maximus. Nullam massa arcu, porta quis
felis et, eleifend varius quam.
</p>
{/* Features List */}
<div className="row features-list mt-n20 mb-50 mb-sm-30">
{/* Features List Item */}
{features4.map((feature, index) => (
<div
key={index}
className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20"
> >
Crafting immersive digital journeys for brands. <div className="features-list-icon">
<i className="mi-check" />
</div>
<div className="features-list-text">{feature.text}</div>
</div>
))}
{/* End Features List Item */}
</div>
{/* End Features List */}
<div className="local-scroll wch-unset">
<Link
href={`/slick-contact${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Start a project</span>
</Link>
<Link
href={`/slick-about${dark ? "-dark" : ""}`}
className="link-hover-anim ms-2 ms-sm-5 me-2"
data-link-animate="y"
>
<span className="link-strong link-strong-unhovered">
Learn more{" "}
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span>
<span
className="link-strong link-strong-hovered"
aria-hidden="true"
>
Learn more{" "}
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span>
</Link>
</div>
</div>
</div>
{/* End Section Text */}
{/* Image */}
<div className="col-lg-6 d-flex align-items-center">
<div className="w-100 pe-lg-5">
<div className="composition-5">
<div className="composition-5-decoration opacity-065">
<Image
src="/assets/images/demo-slick/decoration-1.svg"
alt=""
width={228}
height={228}
/>
</div>
<div className="composition-5-image-1">
<div className="composition-5-image-1-inner">
<Image
src="/assets/images/demo-slick/hs-image-3.jpg"
alt="Image Description"
width={850}
height={914}
className="wow scaleOutIn"
data-wow-offset={200}
/>
</div>
</div>
<div className="composition-5-image-2">
<div className="composition-5-image-2-inner">
<Image
src="/assets/images/demo-slick/hs-image-4.jpg"
alt="Image Description"
width={400}
height={400}
className="wow scaleOutIn"
data-wow-offset={0}
/>
</div>
</div>
</div>
</div>
</div>
{/* End Images */}
</div>
</div>
</section>
<section
className={`page-section ${
dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"
} bg-scroll`}
style={{
backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
}}
>
<Facts />
</section>
<section
className={`page-section ${dark ? "bg-dark-1 light-content" : ""} `}
>
{dark ? <TestimonialsDark /> : <Testimonials />}
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20">
Like our creative works?
</h2>
<p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus lorem
ipsum posuere eget at ex. Aenean consequat vitae lorem in
vehicula.
</p> </p>
</div> </div>
</div> <div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
</div> <Link
</section> href={`/slick-portfolio${dark ? "-dark" : ""}`}
<section className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
className={`page-section scrollSpysection ${ >
dark ? "bg-dark-1 light-content" : "" <span>View all works</span>
} `} </Link>
id="about"
>
<div className="container position-relative">
<div className="row">
{/* Section Text */}
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
<div className="w-100 wow fadeInUp">
<h2 className="section-caption-slick mb-30 mb-sm-20">
Our Story
</h2>
<h3 className="section-title mb-30">
We believe in creatives with a&nbsp;passion to smart
design.
</h3>
<p className="text-gray mb-40">
Etiam fermentum vehicula faucibus. Praesent ullamcorper
urna id arcu molestie scelerisque. Sed imperdiet
tristique mauris et faucibus. Maecenas semper augue non
fringilla placerat. Curabitur luctus erat sit amet
ultricies aliquam. Donec dictum convallis mauris et
maximus. Nullam massa arcu, porta quis felis et,
eleifend varius quam.
</p>
{/* Features List */}
<div className="row features-list mt-n20 mb-50 mb-sm-30">
{/* Features List Item */}
{features4.map((feature, index) => (
<div
key={index}
className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20"
>
<div className="features-list-icon">
<i className="mi-check" />
</div>
<div className="features-list-text">
{feature.text}
</div>
</div>
))}
{/* End Features List Item */}
</div>
{/* End Features List */}
<div className="local-scroll wch-unset">
<Link
href={`/slick-contact${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Start a project</span>
</Link>
<Link
href={`/slick-about${dark ? "-dark" : ""}`}
className="link-hover-anim ms-2 ms-sm-5 me-2"
data-link-animate="y"
>
<span className="link-strong link-strong-unhovered">
Learn more{" "}
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span>
<span
className="link-strong link-strong-hovered"
aria-hidden="true"
>
Learn more{" "}
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span>
</Link>
</div>
</div>
</div>
{/* End Section Text */}
{/* Image */}
<div className="col-lg-6 d-flex align-items-center">
<div className="w-100 pe-lg-5">
<div className="composition-5">
<div className="composition-5-decoration opacity-065">
<Image
src="/assets/images/demo-slick/decoration-1.svg"
alt=""
width={228}
height={228}
/>
</div>
<div className="composition-5-image-1">
<div className="composition-5-image-1-inner">
<Image
src="/assets/images/demo-slick/hs-image-3.jpg"
alt="Image Description"
width={850}
height={914}
className="wow scaleOutIn"
data-wow-offset={200}
/>
</div>
</div>
<div className="composition-5-image-2">
<div className="composition-5-image-2-inner">
<Image
src="/assets/images/demo-slick/hs-image-4.jpg"
alt="Image Description"
width={400}
height={400}
className="wow scaleOutIn"
data-wow-offset={0}
/>
</div>
</div>
</div>
</div>
</div>
{/* End Images */}
</div>
</div>
</section>
<section
className={`page-section ${
dark
? "bg-dark-1 bg-dark-alpha light-content"
: "bg-light-alpha-90"
} bg-scroll`}
style={{
backgroundImage:
"url(/assets/images/demo-slick/section-bg-1.jpg)",
}}
>
<Facts />
</section>
<section
className={`page-section ${
dark ? "bg-dark-1 light-content" : ""
} `}
>
{dark ? <TestimonialsDark /> : <Testimonials />}
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20">
Like our creative works?
</h2>
<p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus
lorem ipsum posuere eget at ex. Aenean consequat
vitae lorem in vehicula.
</p>
</div>
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
<Link
href={`/slick-portfolio${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
>
<span>View all works</span>
</Link>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</section>
</main>
<footer className="page-section footer position-relative overflow-hidden pb-30">
<div className="bg-shape-4">
<Image
src="/assets/images/demo-slick/bg-shape-4.svg"
width={1600}
height={268}
alt=""
/>
</div> </div>
<Footer /> </div>
</footer>
</div> </div>
</div> </section>
</> </>
); );
} }

View File

@ -1,11 +1,8 @@
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import { slickMultipages } from "@/data/menu";
import Image from "next/image";
import BlogComments from "@/components/BlogComments"; import BlogComments from "@/components/BlogComments";
import CommentForm from "@/components/CommentForm";
import BlogWidget from "@/components/BlogWidget"; import BlogWidget from "@/components/BlogWidget";
import CommentForm from "@/components/CommentForm";
import { allBlogs } from "@/data/blogs"; import { allBlogs } from "@/data/blogs";
import Image from "next/image";
export const metadata = { export const metadata = {
title: title:
"Slick Blogs Single || Resonance &mdash; One & Multi Page React Nextjs Creative Template", "Slick Blogs Single || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
@ -20,212 +17,186 @@ export default async function asyncSlickBlogSinglePage(
const blog = allBlogs.filter((elm) => elm.id == id)[0] || allBlogs[0]; const blog = allBlogs.filter((elm) => elm.id == id)[0] || allBlogs[0];
return ( return (
<> <>
<div className="theme-slick"> <section
<div className="page" id="top"> className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
<nav className="main-nav transparent stick-fixed wow-menubar wch-unset"> id="home"
<Header links={slickMultipages} /> >
</nav> {/* <!-- Background Shape --> */}
<main id="main"> <div className="bg-shape-1 wow fadeIn">
<section <Image
className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" src="/assets/images/demo-fancy/bg-shape-1.svg"
id="home" width={1443}
> height={844}
{/* <!-- Background Shape --> */} alt=""
<div className="bg-shape-1 wow fadeIn"> />
<Image </div>
src="/assets/images/demo-fancy/bg-shape-1.svg" {/* <!-- End Background Shape --> */}
width={1443}
height={844}
alt=""
/>
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center"> <div className="container position-relative pt-sm-40 text-center">
<div className="row"> <div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2"> <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp"> <h1 className="hs-title-10 mb-10 wow fadeInUp">
{/* @ts-ignore */} {/* @ts-ignore */}
{blog?.title || blog?.postTitle} {blog?.title || blog?.postTitle}
</h1> </h1>
{/* Author, Categories, Comments */} {/* Author, Categories, Comments */}
<div <div
className="blog-item-data mb-0 wow fadeIn" className="blog-item-data mb-0 wow fadeIn"
data-wow-delay="0.2s" data-wow-delay="0.2s"
> >
<div className="d-inline-block me-3"> <div className="d-inline-block me-3">
<a href="#"> <a href="#">
<i className="mi-clock size-16" /> <i className="mi-clock size-16" />
<span className="visually-hidden">Date:</span>{" "} <span className="visually-hidden">Date:</span> December 25
December 25 </a>
</a> </div>
</div> <div className="d-inline-block me-3">
<div className="d-inline-block me-3"> <a href="#">
<a href="#"> <i className="mi-user size-16" />
<i className="mi-user size-16" /> <span className="visually-hidden">Author:</span> John Doe
<span className="visually-hidden">Author:</span> John </a>
Doe </div>
</a> <div className="d-inline-block me-3">
</div> <i className="mi-folder size-16" />
<div className="d-inline-block me-3"> <span className="visually-hidden">Categories:</span>
<i className="mi-folder size-16" /> <a href="#">Design</a>, <a href="#">Branding</a>
<span className="visually-hidden">Categories:</span> </div>
<a href="#">Design</a>, <a href="#">Branding</a> <div className="d-inline-block me-3">
</div> <a href="#">
<div className="d-inline-block me-3"> <i className="mi-message size-16" /> 5 Comments
<a href="#"> </a>
<i className="mi-message size-16" /> 5 Comments
</a>
</div>
</div>
{/* End Author, Categories, Comments */}
</div>
</div> </div>
</div> </div>
</section> {/* End Author, Categories, Comments */}
<> </div>
{/* Section */} </div>
<section className="page-section"> </div>
<div className="container relative"> </section>
<div className="row"> <>
{/* Content */} {/* Section */}
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2"> <section className="page-section">
{/* Post */} <div className="container relative">
<div className="blog-item mb-80 mb-xs-40"> <div className="row">
<div className="blog-item-body"> {/* Content */}
<div className="mb-40 mb-xs-30"> <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<Image {/* Post */}
src="/assets/images/demo-fancy/blog/post-prev-3-large.jpg" <div className="blog-item mb-80 mb-xs-40">
alt="Image Description" <div className="blog-item-body">
width={1350} <div className="mb-40 mb-xs-30">
height={759} <Image
className="round" src="/assets/images/demo-fancy/blog/post-prev-3-large.jpg"
/> alt="Image Description"
</div> width={1350}
<p> height={759}
Morbi lacus massa, euismod ut turpis molestie, className="round"
tristique sodales est. Integer sit amet mi id sapien />
tempor molestie in nec massa. Fusce non ante sed
lorem rutrum feugiat. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Mauris non laoreet dui.
Morbi lacus massa, euismod ut turpis molestie,
tristique sodales est. Integer sit amet mi id sapien
tempor molestie in nec massa.
</p>
<p>
Fusce non ante sed lorem rutrum feugiat. Vestibulum
pellentesque, purus ut&nbsp;dignissim consectetur,
nulla erat ultrices purus, ut&nbsp;consequat sem
elit non sem. Morbi lacus massa, euismod ut turpis
molestie, tristique sodales est. Integer sit amet mi
id sapien tempor molestie in nec massa. Fusce non
ante sed lorem rutrum feugiat.
</p>
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Integer posuere erat a&nbsp;ante. Vestibulum
pellentesque, purus ut dignissim consectetur,
nulla erat ultrices purus.
</p>
<footer>
Someone famous in
<cite title="Source Title"> Source Title </cite>
</footer>
</blockquote>
<p>
Praesent ultricies ut ipsum non laoreet. Nunc ac
<a href="#">ultricies</a> leo. Nulla ac ultrices
arcu. Nullam adipiscing lacus in consectetur
posuere. Nunc malesuada tellus turpis, ac pretium
orci molestie vel. Morbi lacus massa, euismod ut
turpis molestie, tristique sodales est. Integer sit
amet mi id sapien tempor molestie in nec massa.
Fusce non ante sed lorem rutrum feugiat.
</p>
<ul>
<li>First item of the list</li>
<li>Second item of the list</li>
<li>Third item of the list</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Mauris non laoreet dui. Morbi lacus massa,
euismod ut turpis molestie, tristique sodales est.
Integer sit amet mi id sapien tempor molestie in nec
massa. Fusce non ante sed lorem rutrum feugiat.
Vestibulum pellentesque, purus ut&nbsp;dignissim
consectetur, nulla erat ultrices purus,
ut&nbsp;consequat sem elit non sem.
</p>
</div>
</div>
{/* End Post */}
{/* Comments */}
<div className="mb-80 mb-xs-40">
<h4 className="blog-page-title">
Comments <small className="number">(3)</small>
</h4>
<ul className="media-list comment-list clearlist">
<BlogComments />
</ul>
</div>
{/* End Comments */}
{/* Add Comment */}
<div className="mb-80 mb-xs-40">
<h4 className="blog-page-title">Leave a comment</h4>
{/* Form */}
<CommentForm />
{/* End Form */}
</div>
{/* End Add Comment */}
{/* Prev/Next Post */}
<div className="clearfix mt-40">
<a href="#" className="blog-item-more circle left">
<i className="mi-chevron-left" />
&nbsp;Prev post
</a>
<a href="#" className="blog-item-more circle right">
Next post&nbsp;
<i className="mi-chevron-right" />
</a>
</div>
{/* End Prev/Next Post */}
</div> </div>
{/* End Content */} <p>
Morbi lacus massa, euismod ut turpis molestie, tristique
sodales est. Integer sit amet mi id sapien tempor molestie
in nec massa. Fusce non ante sed lorem rutrum feugiat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris non laoreet dui. Morbi lacus massa, euismod ut
turpis molestie, tristique sodales est. Integer sit amet
mi id sapien tempor molestie in nec massa.
</p>
<p>
Fusce non ante sed lorem rutrum feugiat. Vestibulum
pellentesque, purus ut&nbsp;dignissim consectetur, nulla
erat ultrices purus, ut&nbsp;consequat sem elit non sem.
Morbi lacus massa, euismod ut turpis molestie, tristique
sodales est. Integer sit amet mi id sapien tempor molestie
in nec massa. Fusce non ante sed lorem rutrum feugiat.
</p>
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer posuere erat a&nbsp;ante. Vestibulum
pellentesque, purus ut dignissim consectetur, nulla erat
ultrices purus.
</p>
<footer>
Someone famous in
<cite title="Source Title"> Source Title </cite>
</footer>
</blockquote>
<p>
Praesent ultricies ut ipsum non laoreet. Nunc ac
<a href="#">ultricies</a> leo. Nulla ac ultrices arcu.
Nullam adipiscing lacus in consectetur posuere. Nunc
malesuada tellus turpis, ac pretium orci molestie vel.
Morbi lacus massa, euismod ut turpis molestie, tristique
sodales est. Integer sit amet mi id sapien tempor molestie
in nec massa. Fusce non ante sed lorem rutrum feugiat.
</p>
<ul>
<li>First item of the list</li>
<li>Second item of the list</li>
<li>Third item of the list</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris non laoreet dui. Morbi lacus massa, euismod ut
turpis molestie, tristique sodales est. Integer sit amet
mi id sapien tempor molestie in nec massa. Fusce non ante
sed lorem rutrum feugiat. Vestibulum pellentesque, purus
ut&nbsp;dignissim consectetur, nulla erat ultrices purus,
ut&nbsp;consequat sem elit non sem.
</p>
</div> </div>
</div> </div>
</section> {/* End Post */}
{/* End Section */} {/* Comments */}
{/* Divider */} <div className="mb-80 mb-xs-40">
<hr className="mt-0 mb-0" /> <h4 className="blog-page-title">
{/* End Divider */} Comments <small className="number">(3)</small>
{/* Section */} </h4>
<section className="page-section"> <ul className="media-list comment-list clearlist">
<div className="container relative"> <BlogComments />
<div className="row mt-n60"> </ul>
<BlogWidget
inputClass="newsletter-field form-control input-md circle mb-10"
btnClass="btn btn-mod btn-color btn-medium btn-circle btn-hover-anim form-control"
/>
</div>
</div> </div>
</section> {/* End Comments */}
</> {/* Add Comment */}
</main> <div className="mb-80 mb-xs-40">
<footer className="page-section footer position-relative overflow-hidden pb-30"> <h4 className="blog-page-title">Leave a comment</h4>
<div className="bg-shape-4"> {/* Form */}
<Image <CommentForm />
src="/assets/images/demo-slick/bg-shape-4.svg" {/* End Form */}
width={1600} </div>
height={268} {/* End Add Comment */}
alt="" {/* Prev/Next Post */}
<div className="clearfix mt-40">
<a href="#" className="blog-item-more circle left">
<i className="mi-chevron-left" />
&nbsp;Prev post
</a>
<a href="#" className="blog-item-more circle right">
Next post&nbsp;
<i className="mi-chevron-right" />
</a>
</div>
{/* End Prev/Next Post */}
</div>
{/* End Content */}
</div>
</div>
</section>
{/* End Section */}
{/* Divider */}
<hr className="mt-0 mb-0" />
{/* End Divider */}
{/* Section */}
<section className="page-section">
<div className="container relative">
<div className="row mt-n60">
<BlogWidget
inputClass="newsletter-field form-control input-md circle mb-10"
btnClass="btn btn-mod btn-color btn-medium btn-circle btn-hover-anim form-control"
/> />
</div> </div>
<Footer /> </div>
</footer> </section>
</div> </>
</div>
</> </>
); );
} }

View File

@ -1,12 +1,9 @@
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Blogs from "@/components/Blogs"; import Blogs from "@/components/Blogs";
import NewsletterForm from "@/components/NewsletterForm";
import { archiveLinks } from "@/data/archieve";
import { categories } from "@/data/categories"; import { categories } from "@/data/categories";
import { tags } from "@/data/tags"; import { tags } from "@/data/tags";
import { archiveLinks } from "@/data/archieve";
import { slickMultipages } from "@/data/menu";
import Image from "next/image"; import Image from "next/image";
import NewsletterForm from "@/components/NewsletterForm";
export const metadata = { export const metadata = {
title: title:
@ -19,137 +16,117 @@ const dark = false;
export default function SlickBlogPage() { export default function SlickBlogPage() {
return ( return (
<> <>
<div className="theme-slick"> <section
<div className="page" id="top"> className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
<nav className="main-nav transparent stick-fixed wow-menubar wch-unset"> id="home"
<Header links={slickMultipages} /> >
</nav> {/* <!-- Background Shape --> */}
<main id="main"> <div className="bg-shape-1 wow fadeIn">
<section <Image
className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" src="/assets/images/demo-fancy/bg-shape-1.svg"
id="home" width={1443}
> height={844}
{/* <!-- Background Shape --> */} alt=""
<div className="bg-shape-1 wow fadeIn"> />
<Image
src="/assets/images/demo-fancy/bg-shape-1.svg"
width={1443}
height={844}
alt=""
/>
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Blog</h1>
<p
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Explore captivating web design solutions.
</p>
</div>
</div>
</div>
</section>
<section className="page-section" id="blog">
<Blogs />
</section>
<>
{/* Divider */}
<hr className="mt-0 mb-0" />
{/* End Divider */}
{/* Section */}
<section className="page-section">
<div className="container relative">
<div className="row mt-n60">
<div className="col-sm-6 col-lg-3 mt-60">
{/* Widget */}
<div className="widget mb-0">
<h3 className="widget-title">Categories</h3>
<div className="widget-body">
<ul className="clearlist widget-menu">
{categories.map((elm, i) => (
<li key={i}>
<a href="#" title="">
{elm.name}
</a>
<small> - {elm.count} </small>
</li>
))}
</ul>
</div>
</div>
{/* End Widget */}
</div>
<div className="col-sm-6 col-lg-3 mt-60">
{/* Widget */}
<div className="widget mb-0">
<h3 className="widget-title">Tags</h3>
<div className="widget-body">
<div className="tags">
{tags.map((elm, i) => (
<a key={i} href="">
{elm.name}
</a>
))}
</div>
</div>
</div>
{/* End Widget */}
</div>
<div className="col-sm-6 col-lg-3 mt-60">
{/* Widget */}
<div className="widget mb-0">
<h3 className="widget-title">Archive</h3>
<div className="widget-body">
<ul className="clearlist widget-menu">
{archiveLinks.map((elm, i) => (
<li key={i}>
<a href="#" title="">
{elm.date}
</a>
</li>
))}
</ul>
</div>
</div>
{/* End Widget */}
</div>
<div className="col-sm-6 col-lg-3 mt-60">
{/* Widget */}
<div className="widget mb-0">
<h3 className="widget-title">Newsletter</h3>
<div className="widget-body">
<div className="widget-text clearfix">
<NewsletterForm />
</div>
</div>
</div>
{/* End Widget */}
</div>
</div>
</div>
</section>
</>
</main>
<footer className="page-section footer position-relative overflow-hidden pb-30">
<div className="bg-shape-4">
<Image
src="/assets/images/demo-slick/bg-shape-4.svg"
width={1600}
height={268}
alt=""
/>
</div>
<Footer />
</footer>
</div> </div>
</div> {/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Blog</h1>
<p
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Explore captivating web design solutions.
</p>
</div>
</div>
</div>
</section>
<section className="page-section" id="blog">
<Blogs />
</section>
<>
{/* Divider */}
<hr className="mt-0 mb-0" />
{/* End Divider */}
{/* Section */}
<section className="page-section">
<div className="container relative">
<div className="row mt-n60">
<div className="col-sm-6 col-lg-3 mt-60">
{/* Widget */}
<div className="widget mb-0">
<h3 className="widget-title">Categories</h3>
<div className="widget-body">
<ul className="clearlist widget-menu">
{categories.map((elm, i) => (
<li key={i}>
<a href="#" title="">
{elm.name}
</a>
<small> - {elm.count} </small>
</li>
))}
</ul>
</div>
</div>
{/* End Widget */}
</div>
<div className="col-sm-6 col-lg-3 mt-60">
{/* Widget */}
<div className="widget mb-0">
<h3 className="widget-title">Tags</h3>
<div className="widget-body">
<div className="tags">
{tags.map((elm, i) => (
<a key={i} href="">
{elm.name}
</a>
))}
</div>
</div>
</div>
{/* End Widget */}
</div>
<div className="col-sm-6 col-lg-3 mt-60">
{/* Widget */}
<div className="widget mb-0">
<h3 className="widget-title">Archive</h3>
<div className="widget-body">
<ul className="clearlist widget-menu">
{archiveLinks.map((elm, i) => (
<li key={i}>
<a href="#" title="">
{elm.date}
</a>
</li>
))}
</ul>
</div>
</div>
{/* End Widget */}
</div>
<div className="col-sm-6 col-lg-3 mt-60">
{/* Widget */}
<div className="widget mb-0">
<h3 className="widget-title">Newsletter</h3>
<div className="widget-body">
<div className="widget-text clearfix">
<NewsletterForm />
</div>
</div>
</div>
{/* End Widget */}
</div>
</div>
</div>
</section>
</>
</> </>
); );
} }

View File

@ -1,9 +1,6 @@
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Contact from "@/components/Contact"; import Contact from "@/components/Contact";
import ContactDark from "@/components/ContactDark"; import ContactDark from "@/components/ContactDark";
import Faq from "@/components/Faq"; import Faq from "@/components/Faq";
import { slickMultipagesDark } from "@/data/menu";
import Image from "next/image"; import Image from "next/image";
export const metadata = { export const metadata = {
@ -17,110 +14,85 @@ const dark = true;
export default function SlickContactPageDark() { export default function SlickContactPageDark() {
return ( return (
<> <>
<div className="theme-slick"> <section
<div className="dark-mode"> className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"
<div className="page bg-dark-1" id="top"> id="home"
<nav className="main-nav dark dark-mode transparent stick-fixed wow-menubar wch-unset"> >
<Header links={slickMultipagesDark} /> {/* <!-- Background Shape --> */}
</nav> <div className="bg-shape-1 opacity-003">
<main id="main"> <Image
<section src="/assets/images/demo-fancy/bg-shape-1.svg"
className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden" width={1443}
id="home" height={844}
> alt=""
{/* <!-- Background Shape --> */} />
<div className="bg-shape-1 opacity-003">
<Image
src="/assets/images/demo-fancy/bg-shape-1.svg"
width={1443}
height={844}
alt=""
/>
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">
Contact Us
</h1>
<p
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Crafting immersive digital journeys for brands.
</p>
</div>
</div>
</div>
</section>
<section
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="contact"
>
{dark ? <ContactDark /> : <Contact />}
</section>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section className="page-section bg-dark-1 light-content z-index-1">
<div className="container position-relative">
{/* Decorative Waves */}
<div className="position-relative">
<div
className="decoration-21 opacity-07 d-none d-lg-block"
data-rellax-y=""
data-rellax-speed="0.7"
data-rellax-percentage="0.35"
>
<Image
src="/assets/images/demo-slick/decoration-4.svg"
alt=""
width={148}
height={148}
/>
</div>
</div>
{/* End Decorative Waves */}
<div className="row position-relative">
<div className="col-md-6 col-lg-5 mb-md-50 mb-sm-30">
<h3 className="section-title mb-30">
Frequently Asked Questions
</h3>
<p className="text-gray mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam pulvinar vitae neque et porttitor. Integer non
dapibus diam, ac eleifend lectus lorem ipsum. In maximus
ligula semper metus pellentesque mattis. Maecenas
volutpat, diam enim sagittis quam.
</p>
</div>
<div className="col-md-6 offset-lg-1 pt-10 pt-sm-0">
{/* Accordion */}
<Faq />
{/* End Accordion */}
</div>
</div>
</div>
</section>
</main>
<footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">
<div className="bg-shape-4 opacity-003">
<Image
src="/assets/images/demo-slick/bg-shape-4.svg"
width={1600}
height={268}
alt=""
/>
</div>
<Footer />
</footer>
</div>{" "}
</div> </div>
</div> {/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Contact Us</h1>
<p
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Crafting immersive digital journeys for brands.
</p>
</div>
</div>
</div>
</section>
<section
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="contact"
>
{dark ? <ContactDark /> : <Contact />}
</section>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section className="page-section bg-dark-1 light-content z-index-1">
<div className="container position-relative">
{/* Decorative Waves */}
<div className="position-relative">
<div
className="decoration-21 opacity-07 d-none d-lg-block"
data-rellax-y=""
data-rellax-speed="0.7"
data-rellax-percentage="0.35"
>
<Image
src="/assets/images/demo-slick/decoration-4.svg"
alt=""
width={148}
height={148}
/>
</div>
</div>
{/* End Decorative Waves */}
<div className="row position-relative">
<div className="col-md-6 col-lg-5 mb-md-50 mb-sm-30">
<h3 className="section-title mb-30">
Frequently Asked Questions
</h3>
<p className="text-gray mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
pulvinar vitae neque et porttitor. Integer non dapibus diam, ac
eleifend lectus lorem ipsum. In maximus ligula semper metus
pellentesque mattis. Maecenas volutpat, diam enim sagittis quam.
</p>
</div>
<div className="col-md-6 offset-lg-1 pt-10 pt-sm-0">
{/* Accordion */}
<Faq />
{/* End Accordion */}
</div>
</div>
</div>
</section>
</> </>
); );
} }

View File

@ -1,10 +1,7 @@
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Contact from "@/components/Contact"; import Contact from "@/components/Contact";
import ContactDark from "@/components/ContactDark"; import ContactDark from "@/components/ContactDark";
import Faq from "@/components/Faq"; import Faq from "@/components/Faq";
import { slickMultipages } from "@/data/menu";
import Image from "next/image"; import Image from "next/image";
export const metadata = { export const metadata = {
@ -13,113 +10,91 @@ export const metadata = {
description: description:
"Resonance &mdash; One & Multi Page React Nextjs Creative Template", "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
}; };
const onePage = false;
const dark = false; const dark = false;
export default function SlickContactPage() { export default function SlickContactPage() {
return ( return (
<> <>
<div className="theme-slick"> <section
<div className="page" id="top"> className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
<nav className="main-nav transparent stick-fixed wow-menubar wch-unset"> id="home"
<Header links={slickMultipages} /> >
</nav> {/* <!-- Background Shape --> */}
<main id="main"> <div className="bg-shape-1 wow fadeIn">
<section <Image
className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" src="/assets/images/demo-fancy/bg-shape-1.svg"
id="home" width={1443}
height={844}
alt=""
/>
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Contact Us</h1>
<p
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Crafting immersive digital journeys for brands.
</p>
</div>
</div>
</div>
</section>
<section
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="contact"
>
{dark ? <ContactDark /> : <Contact />}
</section>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section className="page-section z-index-1">
<div className="container position-relative">
{/* Decorative Waves */}
<div className="position-relative">
<div
className="decoration-21 opacity-07 d-none d-lg-block"
data-rellax-y=""
data-rellax-speed="0.7"
data-rellax-percentage="0.35"
> >
{/* <!-- Background Shape --> */}
<div className="bg-shape-1 wow fadeIn">
<Image
src="/assets/images/demo-fancy/bg-shape-1.svg"
width={1443}
height={844}
alt=""
/>
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">
Contact Us
</h1>
<p
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Crafting immersive digital journeys for brands.
</p>
</div>
</div>
</div>
</section>
<section
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="contact"
>
{dark ? <ContactDark /> : <Contact />}
</section>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section className="page-section z-index-1">
<div className="container position-relative">
{/* Decorative Waves */}
<div className="position-relative">
<div
className="decoration-21 opacity-07 d-none d-lg-block"
data-rellax-y=""
data-rellax-speed="0.7"
data-rellax-percentage="0.35"
>
<Image
src="/assets/images/demo-slick/decoration-4.svg"
alt=""
width={148}
height={148}
/>
</div>
</div>
{/* End Decorative Waves */}
<div className="row position-relative">
<div className="col-md-6 col-lg-5 mb-md-50 mb-sm-30">
<h3 className="section-title mb-30">
Frequently Asked Questions
</h3>
<p className="text-gray mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam pulvinar vitae neque et porttitor. Integer non dapibus
diam, ac eleifend lectus lorem ipsum. In maximus ligula
semper metus pellentesque mattis. Maecenas volutpat, diam
enim sagittis quam.
</p>
</div>
<div className="col-md-6 offset-lg-1 pt-10 pt-sm-0">
{/* Accordion */}
<Faq />
{/* End Accordion */}
</div>
</div>
</div>
</section>
</main>
<footer className="page-section footer position-relative overflow-hidden pb-30">
<div className="bg-shape-4">
<Image <Image
src="/assets/images/demo-slick/bg-shape-4.svg" src="/assets/images/demo-slick/decoration-4.svg"
width={1600}
height={268}
alt="" alt=""
width={148}
height={148}
/> />
</div> </div>
<Footer /> </div>
</footer> {/* End Decorative Waves */}
<div className="row position-relative">
<div className="col-md-6 col-lg-5 mb-md-50 mb-sm-30">
<h3 className="section-title mb-30">
Frequently Asked Questions
</h3>
<p className="text-gray mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
pulvinar vitae neque et porttitor. Integer non dapibus diam, ac
eleifend lectus lorem ipsum. In maximus ligula semper metus
pellentesque mattis. Maecenas volutpat, diam enim sagittis quam.
</p>
</div>
<div className="col-md-6 offset-lg-1 pt-10 pt-sm-0">
{/* Accordion */}
<Faq />
{/* End Accordion */}
</div>
</div>
</div> </div>
</div> </section>
</> </>
); );
} }

View File

@ -1,8 +1,5 @@
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Portfolio from "@/components/Portfolio"; import Portfolio from "@/components/Portfolio";
import { slickMultipages } from "@/data/menu";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
@ -17,107 +14,85 @@ const dark = false;
export default function SlickPortfolioPage() { export default function SlickPortfolioPage() {
return ( return (
<> <>
<div className="theme-slick"> <section
<div className="page" id="top"> className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
<nav className="main-nav transparent stick-fixed wow-menubar wch-unset"> id="home"
<Header links={slickMultipages} /> >
</nav> {/* <!-- Background Shape --> */}
<main id="main"> <div className="bg-shape-1 wow fadeIn">
<section <Image
className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" src="/assets/images/demo-fancy/bg-shape-1.svg"
id="home" width={1443}
> height={844}
{/* <!-- Background Shape --> */} alt=""
<div className="bg-shape-1 wow fadeIn"> />
<Image </div>
src="/assets/images/demo-fancy/bg-shape-1.svg" {/* <!-- End Background Shape --> */}
width={1443}
height={844}
alt=""
/>
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center"> <div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Portfolio</h1>
<p
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Explore captivating web design solutions.
</p>
</div>
</div>
</div>
</section>
<section
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="portfolio"
>
<div className="container position-relative">
<Portfolio />
</div>
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row"> <div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2"> <div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h1 className="hs-title-10 mb-10 wow fadeInUp"> <h2 className="section-title-small mb-20">
Portfolio Like our creative works?
</h1> </h2>
<p className="text-gray mb-0">
<p Quisque posuere mollis ullamcorper. Ut eget metus lorem
className="section-descr mb-0 wow fadeInUp" ipsum posuere eget at ex. Aenean consequat vitae lorem in
data-wow-delay="0.2s" vehicula.
>
Explore captivating web design solutions.
</p> </p>
</div> </div>
</div> <div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
</div> <Link
</section> href={`/slick-portfolio${dark ? "-dark" : ""}`}
<section className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
className={`page-section scrollSpysection ${ >
dark ? "bg-dark-1 light-content" : "" <span>View all works</span>
} `} </Link>
id="portfolio"
>
<div className="container position-relative">
<Portfolio />
</div>
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20">
Like our creative works?
</h2>
<p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus
lorem ipsum posuere eget at ex. Aenean consequat
vitae lorem in vehicula.
</p>
</div>
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
<Link
href={`/slick-portfolio${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
>
<span>View all works</span>
</Link>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</section>
</main>
<footer className="page-section footer position-relative overflow-hidden pb-30">
<div className="bg-shape-4">
<Image
src="/assets/images/demo-slick/bg-shape-4.svg"
width={1600}
height={268}
alt=""
/>
</div> </div>
<Footer /> </div>
</footer>
</div> </div>
</div> </section>
</> </>
); );
} }

View File

@ -1,9 +1,6 @@
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Features from "@/components/Features"; import Features from "@/components/Features";
import Service from "@/components/Service"; import Service from "@/components/Service";
import { slickMultipages } from "@/data/menu";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
@ -18,245 +15,218 @@ const dark = false;
export default function SlickServicesPage() { export default function SlickServicesPage() {
return ( return (
<> <>
<div className="theme-slick"> <section
<div className="page" id="top"> className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
<nav className="main-nav transparent stick-fixed wow-menubar wch-unset"> id="home"
<Header links={slickMultipages} /> >
</nav> {/* <!-- Background Shape --> */}
<main id="main"> <div className="bg-shape-1 wow fadeIn">
<section <Image
className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" src="/assets/images/demo-fancy/bg-shape-1.svg"
id="home" width={1443}
> height={844}
{/* <!-- Background Shape --> */} alt=""
<div className="bg-shape-1 wow fadeIn"> />
<Image </div>
src="/assets/images/demo-fancy/bg-shape-1.svg" {/* <!-- End Background Shape --> */}
width={1443}
height={844} <div className="container position-relative pt-sm-40 text-center">
alt="" <div className="row">
/> <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Our Services</h1>
<p
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Web design that leaves an impression.
</p>
</div>
</div>
</div>
</section>
<section
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="services"
>
<div className="container position-relative">
<div className="row">
{/* Left Column */}
<div className="col-lg-5 mb-md-60 mb-sm-40">
<h2 className="section-caption-slick mb-30 mb-sm-20">
WHAT WE DO
</h2>
<h3 className="section-title mb-30">
We provide the best development solutions.
</h3>
<p className="section-descr mb-50 mb-sm-40">
The power of design help us to solve complex problems and
cultivate business solutions.
</p>
<div className="local-scroll">
<Link
href={`/slick-contact${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Request a quote</span>
</Link>
</div> </div>
{/* <!-- End Background Shape --> */} </div>
{/* End Left Column */}
<div className="container position-relative pt-sm-40 text-center"> {/* Right Column */}
<div className="row"> <Service />
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2"> {/* End Right Column */}
<h1 className="hs-title-10 mb-10 wow fadeInUp"> </div>
Our Services <div className="page-section">
</h1> <hr className="mt-0 mb-0" />
</div>
<p <div className="row mb-50 mb-sm-50">
className="section-descr mb-0 wow fadeInUp" <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
data-wow-delay="0.2s" <h2 className="section-title-small mb-20">
> Why choose Resonance?
Web design that leaves an impression. </h2>
</p> <p className="text-gray mb-0">
</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
{/* Features Grid */}
<Features />
{/* End Features Grid */}
</div>
</section>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section
className={`page-section ${dark ? "bg-dark-1 light-content" : ""}`}
>
<div className="container position-relative">
<div className="row">
{/* Images */}
<div className="col-lg-7 d-flex align-items-start mb-md-60 mb-xs-30">
<div className="call-action-2-images">
<div
className="call-action-2-image-1"
data-rellax-y=""
data-rellax-speed="0.5"
data-rellax-percentage="0.7"
>
<Image
width={386}
height={400}
src="/assets/images/promo-3.jpg"
alt="Image Description"
className="wow scaleOutIn"
data-wow-duration="1.2s"
data-wow-offset={255}
/>
</div>
<div className="call-action-2-image-2">
<Image
width={810}
height={512}
src="/assets/images/promo-4.jpg"
alt="Image Description"
className="wow scaleOutIn"
data-wow-duration="1.2s"
data-wow-offset={134}
/>
</div>
<div
className="call-action-2-image-3"
data-rellax-y=""
data-rellax-speed="-0.5"
data-rellax-percentage="0.5"
>
<Image
width={386}
height={500}
src="/assets/images/promo-5.jpg"
alt="Image Description"
className="wow scaleOutIn"
data-wow-duration="1.2s"
data-wow-offset={0}
/>
</div> </div>
</div> </div>
</section> </div>
<section {/* End Images */}
className={`page-section scrollSpysection ${ {/* Text */}
dark ? "bg-dark-1 light-content" : "" <div className="col-lg-5 d-flex align-items-center">
} `} <div
id="services" className="wow fadeInUp"
> data-wow-duration="1.2s"
<div className="container position-relative"> data-wow-offset="255"
>
<h2 className="section-caption-slick mb-30 mb-sm-20">
How we work?
</h2>
<h2 className="section-title mb-30">
Get the power of the professional services
</h2>
<p className="text-gray">
Pellentesque ultrices purus sit amet velit eleifend, eu
iaculis velit malesuada. Proin id mattis elit. Nullam a nisi
tellus. Mauris rhoncus diam in sem maximus, nec luctus justo
imperdiet. Etiam fermentum vehicula faucibus.
</p>
<p className="text-gray mb-0">
Praesent ullamcorper urna id arcu molestie scelerisque. Sed
imperdiet tristique mauris et faucibus. Maecenas semper augue
non fringilla placerat. Curabitur luctus erat sit amet
ultricies aliquam. Donec dictum convallis mauris et maximus.
Nullam massa arcu, porta quis felis et, eleifend varius quam.
</p>
</div>
</div>
{/* End Text */}
</div>
</div>
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row"> <div className="row">
{/* Left Column */} <div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<div className="col-lg-5 mb-md-60 mb-sm-40">
<h2 className="section-caption-slick mb-30 mb-sm-20">
WHAT WE DO
</h2>
<h3 className="section-title mb-30">
We provide the best development solutions.
</h3>
<p className="section-descr mb-50 mb-sm-40">
The power of design help us to solve complex problems and
cultivate business solutions.
</p>
<div className="local-scroll">
<Link
href={`/slick-contact${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Request a quote</span>
</Link>
</div>
</div>
{/* End Left Column */}
{/* Right Column */}
<Service />
{/* End Right Column */}
</div>
<div className="page-section">
<hr className="mt-0 mb-0" />
</div>
<div className="row mb-50 mb-sm-50">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
<h2 className="section-title-small mb-20"> <h2 className="section-title-small mb-20">
Why choose Resonance? Like our creative works?
</h2> </h2>
<p className="text-gray mb-0"> <p className="text-gray mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, Quisque posuere mollis ullamcorper. Ut eget metus lorem
sed do eiusmod tempor incididunt ut labore et dolore magna ipsum posuere eget at ex. Aenean consequat vitae lorem in
aliqua. vehicula.
</p> </p>
</div> </div>
</div> <div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
{/* Features Grid */} <Link
<Features /> href={`/slick-portfolio${dark ? "-dark" : ""}`}
{/* End Features Grid */} className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
</div>
</section>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section
className={`page-section ${
dark ? "bg-dark-1 light-content" : ""
}`}
>
<div className="container position-relative">
<div className="row">
{/* Images */}
<div className="col-lg-7 d-flex align-items-start mb-md-60 mb-xs-30">
<div className="call-action-2-images">
<div
className="call-action-2-image-1"
data-rellax-y=""
data-rellax-speed="0.5"
data-rellax-percentage="0.7"
>
<Image
width={386}
height={400}
src="/assets/images/promo-3.jpg"
alt="Image Description"
className="wow scaleOutIn"
data-wow-duration="1.2s"
data-wow-offset={255}
/>
</div>
<div className="call-action-2-image-2">
<Image
width={810}
height={512}
src="/assets/images/promo-4.jpg"
alt="Image Description"
className="wow scaleOutIn"
data-wow-duration="1.2s"
data-wow-offset={134}
/>
</div>
<div
className="call-action-2-image-3"
data-rellax-y=""
data-rellax-speed="-0.5"
data-rellax-percentage="0.5"
>
<Image
width={386}
height={500}
src="/assets/images/promo-5.jpg"
alt="Image Description"
className="wow scaleOutIn"
data-wow-duration="1.2s"
data-wow-offset={0}
/>
</div>
</div>
</div>
{/* End Images */}
{/* Text */}
<div className="col-lg-5 d-flex align-items-center">
<div
className="wow fadeInUp"
data-wow-duration="1.2s"
data-wow-offset="255"
> >
<h2 className="section-caption-slick mb-30 mb-sm-20"> <span>View all works</span>
How we work? </Link>
</h2>
<h2 className="section-title mb-30">
Get the power of the professional services
</h2>
<p className="text-gray">
Pellentesque ultrices purus sit amet velit eleifend, eu
iaculis velit malesuada. Proin id mattis elit. Nullam a
nisi tellus. Mauris rhoncus diam in sem maximus, nec
luctus justo imperdiet. Etiam fermentum vehicula
faucibus.
</p>
<p className="text-gray mb-0">
Praesent ullamcorper urna id arcu molestie scelerisque.
Sed imperdiet tristique mauris et faucibus. Maecenas
semper augue non fringilla placerat. Curabitur luctus
erat sit amet ultricies aliquam. Donec dictum convallis
mauris et maximus. Nullam massa arcu, porta quis felis
et, eleifend varius quam.
</p>
</div>
</div>
{/* End Text */}
</div>
</div>
</section>
<section className="page-section pt-0">
<div className="container">
<div
className={`small-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
>
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="row">
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20">
Like our creative works?
</h2>
<p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus
lorem ipsum posuere eget at ex. Aenean consequat
vitae lorem in vehicula.
</p>
</div>
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
<Link
href={`/slick-portfolio${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
>
<span>View all works</span>
</Link>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</section>
</main>
<footer className="page-section footer position-relative overflow-hidden pb-30">
<div className="bg-shape-4">
<Image
src="/assets/images/demo-slick/bg-shape-4.svg"
width={1600}
height={268}
alt=""
/>
</div> </div>
<Footer /> </div>
</footer>
</div> </div>
</div> </section>
</> </>
); );
} }