feat(about): add new page about

This commit is contained in:
Val 2025-02-01 07:23:32 +07:00
parent 989e2fb42d
commit 6be0d6306b
35 changed files with 1861 additions and 28 deletions

11
package-lock.json generated
View File

@ -27,6 +27,7 @@
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/bootstrap": "^5.2.10",
"@types/imagesloaded": "^4.1.6",
"@types/isotope-layout": "^3.0.14",
"@types/node": "^20",
@ -584,6 +585,16 @@
"tslib": "^2.8.0"
}
},
"node_modules/@types/bootstrap": {
"version": "5.2.10",
"resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
"integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@popperjs/core": "^2.9.2"
}
},
"node_modules/@types/estree": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",

View File

@ -28,6 +28,7 @@
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/bootstrap": "^5.2.10",
"@types/imagesloaded": "^4.1.6",
"@types/isotope-layout": "^3.0.14",
"@types/node": "^20",

View File

@ -1,8 +0,0 @@
export const slickMultipages = [
{ href: "/slick-multi-page", text: "Home" },
{ href: "/slick-about", text: "About", class: "active" },
{ href: "/slick-services", text: "Services" },
{ href: "/slick-portfolio", text: "Portfolio" },
{ href: "/slick-blog", text: "Blog" },
{ href: "/slick-contact", text: "Contact" },
];

View File

@ -1,9 +1,9 @@
import Image from "next/image";
import Header from "./components/Header";
import Hero from "./components/Hero";
import Footer from "./components/Footer"
import Homepage from "./components/Homepage"
import { slickMultipages } from "./data/menu";
import Header from "../components/Header";
import Hero from "../components/Hero";
import Footer from "../components/Footer"
import Homepage from "../components/Homepage"
import { slickMultipages } from "../data/menu";
export default function Home() {
return (

View File

@ -0,0 +1,259 @@
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Facts from "@/components/Facts";
import Testimonials from "@/components/Testimonials";
import TestimonialsDark from "@/components/TestimonialsDark";
import { features4 } from "@/data/features";
import { slickMultipagesDark } from "@/data/menu";
import Image from "next/image";
import Link from "next/link";
export const metadata = {
title:
"Slick About Dark || Resonance — One & Multi Page React Nextjs Creative Template",
description:
"Resonance — One & Multi Page React Nextjs Creative Template",
};
const dark = true;
export default function SlickAboutPageDark() {
return (
<>
<div className="theme-slick">
<div className="dark-mode">
<div className="page bg-dark-1" id="top">
<nav className="main-nav dark dark-mode transparent stick-fixed wow-menubar wch-unset">
<Header links={slickMultipagesDark} />
</nav>
<main id="main">
<section
className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"
id="home"
>
{/* <!-- 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>
</>
);
}

View File

@ -0,0 +1,258 @@
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Facts from "@/components/Facts";
import Testimonials from "@/components/Testimonials";
import TestimonialsDark from "@/components/TestimonialsDark";
import { features4 } from "@/data/features";
import { slickMultipages } from "@/data/menu";
import Image from "next/image";
import Link from "next/link";
export const metadata = {
title:
"Slick About || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
description:
"Resonance &mdash; One & Multi Page React Nextjs Creative Template",
};
const dark = false;
export default function SlickAboutPage() {
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">
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 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>
</>
);
}

View File

@ -1,4 +1,4 @@
import { blogs9 } from "@/app/data/blogs";
import { blogs9 } from "@/data/blogs";
import React from "react";
import Image from "next/image";
import Link from "next/link";

View File

@ -1,6 +1,6 @@
"use client";
import { brandsDark } from "@/app/data/brands";
import { brandsDark } from "@/data/brands";
import Image from "next/image";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

View File

@ -1,5 +1,5 @@
"use client";
import { contactItems } from "@/app/data/contact";
import { contactItems } from "@/data/contact";
import React from "react";
export default function Contact() {

View File

@ -1,5 +1,5 @@
"use client";
import { contactItems } from "@/app/data/contact";
import { contactItems } from "@/data/contact";
import React from "react";
export default function ContactDark() {

View File

@ -1,4 +1,4 @@
import { numbers } from "@/app/data/facts";
import { numbers } from "@/data/facts";
import React from "react";
export default function Facts() {

View File

@ -1,4 +1,4 @@
import { features5 } from "@/app/data/features";
import { features5 } from "@/data/features";
import React from "react";
export default function Features() {

View File

@ -2,7 +2,7 @@
import React from "react";
import Image from "next/image";
import FooterSocials from "./FooterSocial";
import { footerLinks, navigationLinks } from "@/app/data/footer";
import { footerLinks, navigationLinks } from "@/data/footer";
export default function Footer8() {
const scrollToTop = (event: any) => {

View File

@ -11,7 +11,7 @@ import Contact from "./Contact";
import Link from "next/link";
import TestimonialsDark from "./TestimonialsDark";
import ContactDark from "./ContactDark";
import { features4 } from "@/app/data/features";
import { features4 } from "@/data/features";
import Features from "./Features";
export default function homepage({ onePage = false, dark = false }) {

View File

@ -1,6 +1,6 @@
"use client";
import { portfolios9 } from "@/app/data/portfolio";
import { portfolios9 } from "@/data/portfolio";
import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { Gallery, Item } from "react-photoswipe-gallery";

View File

@ -1,4 +1,4 @@
import { services5 } from "@/app/data/services";
import { services5 } from "@/data/services";
import React from "react";
export default function Service() {

View File

@ -1,7 +1,7 @@
"use client";
import { brands } from "@/app/data/brands";
import { numberItems4 } from "@/app/data/facts";
import { testimonials5 } from "@/app/data/testimonials";
import { brands } from "@/data/brands";
import { numberItems4 } from "@/data/facts";
import { testimonials5 } from "@/data/testimonials";
import { useEffect, useRef } from "react";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

View File

@ -1,7 +1,7 @@
"use client";
import BrandsDark from "./BrandsDark";
import { numberItems4 } from "@/app/data/facts";
import { testimonials5 } from "@/app/data/testimonials";
import { numberItems4 } from "@/data/facts";
import { testimonials5 } from "@/data/testimonials";
import { useEffect, useRef } from "react";
import Image from "next/image";

1312
src/data/menu.ts Normal file

File diff suppressed because it is too large Load Diff