feat: services & portfolio pages
This commit is contained in:
parent
8bcfac4f14
commit
9dc184fb64
123
src/app/slick-portfolio/page.tsx
Normal file
123
src/app/slick-portfolio/page.tsx
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Portfolio from "@/components/Portfolio";
|
||||||
|
|
||||||
|
import { slickMultipages } from "@/data/menu";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title:
|
||||||
|
"Slick Portfolio || Resonance — One & Multi Page React Nextjs Creative Template",
|
||||||
|
description:
|
||||||
|
"Resonance — One & Multi Page React Nextjs Creative Template",
|
||||||
|
};
|
||||||
|
const onePage = false;
|
||||||
|
const dark = false;
|
||||||
|
export default function SlickPortfolioPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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">
|
||||||
|
<section
|
||||||
|
className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
|
||||||
|
id="home"
|
||||||
|
>
|
||||||
|
{/* <!-- 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">
|
||||||
|
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="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 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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
262
src/app/slick-services/page.tsx
Normal file
262
src/app/slick-services/page.tsx
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Features from "@/components/Features";
|
||||||
|
import Service from "@/components/Service";
|
||||||
|
|
||||||
|
import { slickMultipages } from "@/data/menu";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title:
|
||||||
|
"Slick Services || Resonance — One & Multi Page React Nextjs Creative Template",
|
||||||
|
description:
|
||||||
|
"Resonance — One & Multi Page React Nextjs Creative Template",
|
||||||
|
};
|
||||||
|
const onePage = false;
|
||||||
|
const dark = false;
|
||||||
|
export default function SlickServicesPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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">
|
||||||
|
<section
|
||||||
|
className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
|
||||||
|
id="home"
|
||||||
|
>
|
||||||
|
{/* <!-- 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">
|
||||||
|
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 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">
|
||||||
|
Why choose Resonance?
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray mb-0">
|
||||||
|
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>
|
||||||
|
{/* 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">
|
||||||
|
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="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 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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user