feat(about): add new page about

package-lock.json

@@ -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",

package.json

@@ -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",

src/app/data/menu.ts

@@ -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" },
-];

src/app/page.tsx

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

src/app/slick-about-dark/page.tsx

@@ -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>
+    </>
+  );
+}

src/app/slick-about/page.tsx

@@ -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 — One & Multi Page React Nextjs Creative Template",
+  description:
+    "Resonance — 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>
+    </>
+  );
+}

src/components/Blog.tsx

@@ -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";

src/components/BrandsDark.tsx

@@ -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";

src/components/Contact.tsx

@@ -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() {

src/components/ContactDark.tsx

@@ -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() {

src/components/Facts.tsx

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

src/components/Features.tsx

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

src/components/Footer.tsx

@@ -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) => {

src/components/Homepage.tsx

@@ -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 }) {

src/components/Portfolio.tsx

@@ -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";

src/components/Service.tsx

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

src/components/Testimonials.tsx

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

src/components/TestimonialsDark.tsx

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