next-cochise/src/app/(main)/slick-about/page.tsx

import Facts from "@/components/Facts";
import Testimonials from "@/components/Testimonials";
import TestimonialsDark from "@/components/TestimonialsDark";
import { features4 } from "@/data/features";
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 (
    <>
      <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>
    </>
  );
}