import Head from "next/head";
import { useEffect, useRef } from "react";
import RootLayout from "@/components/common/layout/RootLayout";
import PortfolioElementV2 from "@/components/portfolio/PortfolioElementV2";
import PortfolioV2CTA from "@/components/cta/PortfolioV2CTA";
import animationCharCome from "@/lib/utils/animationCharCome";

const PortfolioV2 = () => {
  const charAnim = useRef();
  useEffect(() => {
    animationCharCome(charAnim.current);
  }, []);
  return (
    <>
      <Head>
        <title>Portfolio | SyncROI</title>

        <meta name="title" content="Portfolio | SyncROI" />
        <meta name="description" content="Crafting new bright brands, unique visual systems and digital experience focused on a wide range of original collabs." />

        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://syncroi.net/portfolio" />
        <meta property="og:title" content="Portfolio | SyncROI" />
        <meta property="og:description" content="Crafting new bright brands, unique visual systems and digital experience focused on a wide range of original collabs." />
        <meta property="og:image" content="https://syncroi.net/assets/imgs/thumbnail.jpg" />

        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:url" content="https://syncroi.net/portfolio" />
        <meta property="twitter:title" content="Portfolio | SyncROI" />
        <meta property="twitter:description" content="Crafting new bright brands, unique visual systems and digital experience focused on a wide range of original collabs." />
        <meta property="twitter:image" content="https://syncroi.net/assets/imgs/thumbnail.jpg" />

        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <main>
        <RootLayout header="header2" footer="footer5">
          <section className="pt-150 pb-130 portfolio-v2">
            <div className="container">
              <div className="row">
                <div className="col-xxl-8 col-xl-7 col-lg-6 col-md-6">
                  <div className="sec-title-wrapper">
                    <h1
                      className="sec-title-2 animation__char_come"
                      ref={charAnim}
                    >
                      Selected <br /> Projects
                    </h1>
                  </div>
                </div>
                <div className="col-xxl-4 col-xl-5 col-lg-6 col-md-6">
                  <div className="blog__text">
                    <p>
                      Crafting new bright brands, unique visual systems and
                      digital experience focused on a wide range of original
                      collabs.{" "}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <PortfolioElementV2 />
          <PortfolioV2CTA />
        </RootLayout>
      </main>
    </>
  );
};

export default PortfolioV2;
