add about page content #9

app/about/page.tsx

@@ -1,4 +1,11 @@
 import {Metadata} from 'next';
+import clsx from 'clsx';
+import AppearInViewport from '@/components/shared/AppearInViewport/AppearInViewport';
+import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
+import getTextSlideIntoViewVarinats from '@/lib/framerMotion/variants/getTextSlideIntoViewVarinats';
+import Philosophy from '@/components/pages/About/Philosophy';
+import CATLink from '@/components/shared/CATLink/CATLink';
+import BlockWithImage from '@/components/pages/About/BlockWithImage';
 
 export const metadata: Metadata = {
   title: 'About',
@@ -9,9 +16,57 @@ export const metadata: Metadata = {
   },
 };
 
+const titleVariants = getTextSlideIntoViewVarinats('left');
+
+const containerCn = clsx('flex', 'flex-col', 'min-h-screen', 'w-full');
+const titleCn = clsx('text-8xl', 'mt-24', 'text-center', 'text-accent2');
+const aboutCn = clsx('text-8xl', 'text-center', 'pl-48', 'text-accent2');
+const minorTextCn = clsx('text-6xl', 'text-white');
+const contentCn = clsx('flex', 'flex-col', 'items-center', 'justify-center', 'w-full');
+const CATLinkCn = clsx('mt-16');
+
 /**
  * @returns React component.
  */
 export default function About() {
-  return <div>About</div>;
+  return (
+    <div className={containerCn}>
+      <AppearInViewport
+        className={titleCn}
+        variants={titleVariants}
+        transition={{duration: TransitionDuration.VERY_LONG, type: 'spring'}}
+        as="h1"
+      >
+        SALSAVIVA
+      </AppearInViewport>
+      <AppearInViewport
+        className={aboutCn}
+        variants={titleVariants}
+        transition={{duration: TransitionDuration.VERY_LONG, type: 'spring', delay: 1}}
+        as="h3"
+      >
+        <span className={minorTextCn}>is about</span>YOU!
+      </AppearInViewport>
+      <div className={contentCn}>
+        <Philosophy />
+        <BlockWithImage
+          text={
+            <div>
+              We are here to share with you our <span className="text-accent1">passion</span> and{' '}
+              <span className="text-accent1">knowledge</span> in social dances. And inspire you to
+              become a better, more confident and happy person - inside and outside the dancefloor.
+            </div>
+          }
+          imageFilename="about.1.jpg"
+          imageAlt=""
+        />
+      </div>
+      <CATLink
+        text="WANT TO JOIN?"
+        className={CATLinkCn}
+        path="/contact"
+        customTransition={{delay: 0.5}}
+      />
+    </div>
+  );
 }

components/pages/About/BlockWithImage.tsx

@@ -0,0 +1,56 @@
+import clsx from 'clsx';
+import {ReactNode} from 'react';
+import AppearInViewport from '@/components/shared/AppearInViewport/AppearInViewport';
+import ImageWrapper from '@/components/shared/ImageWrapper/ImageWrapper';
+
+/**
+ * BlockWithImage props.
+ */
+type BlockWithImageProps = {
+  text: ReactNode;
+  imageFilename: string;
+  imageAlt?: string;
+  reverse?: boolean;
+};
+
+const containerCn = clsx(
+  'flex',
+  'items-center',
+  'justify-center',
+  'w-full',
+  'p-32',
+  'text-center',
+  'text-4xl',
+  'leading-normal',
+);
+// eslint-disable-next-line jsdoc/require-jsdoc
+const imgContainerCn = (reversed?: boolean) =>
+  clsx('relative', 'h-72', 'w-72', 'basis-1/2', reversed && 'order-last');
+// eslint-disable-next-line jsdoc/require-jsdoc
+const imgCn = clsx('object-cover');
+
+/**
+ * @param {BlockWithImageProps} props Props.
+ * @returns React component.
+ */
+export default function BlockWithImage({
+  imageFilename,
+  imageAlt = '',
+  reverse,
+  text,
+}: BlockWithImageProps) {
+  return (
+    <AppearInViewport className={containerCn}>
+      <div className={imgContainerCn(reverse)}>
+        <ImageWrapper
+          className={imgCn}
+          src={`/images/${imageFilename}`}
+          blurDataURL={`images/blured/${imageFilename}`}
+          alt={imageAlt}
+          fill
+        />
+      </div>
+      <div>{text}</div>
+    </AppearInViewport>
+  );
+}

components/pages/About/Philosophy.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import AppearInViewport from '@/components/shared/AppearInViewport/AppearInViewport';
+import ImageWrapper from '@/components/shared/ImageWrapper/ImageWrapper';
+
+const textCn = clsx('text-5xl', 'z-10', 'leading-normal');
+const containerCn = clsx(
+  'px-32',
+  'py-48',
+  'text-center',
+  'relative',
+  'w-full',
+  'flex',
+  'items-center',
+  'mt-24',
+);
+const imgCn = clsx('object-cover', 'z-0');
+
+/**
+ * @returns React component.
+ */
+export default function Philosophy() {
+  return (
+    <AppearInViewport
+      className={containerCn}
+      transition={{delay: 2}}
+    >
+      <ImageWrapper
+        className={imgCn}
+        src="/images/about.0.jpg"
+        blurDataURL="images/blured/about.0.jpg"
+        fill
+      />
+      <div className={textCn}>
+        Our philosophy is to create a POSITIVE COMMUNITY where you develop joy, self-expression,
+        personal growth, friendships and dance skills.
+      </div>
+    </AppearInViewport>
+  );
+}

components/shared/ImageWrapper/ImageWrapper.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Image, {ImageProps} from 'next/image';
 import {forwardRef} from 'react';
 import useNetworkSpeed from '@/lib/shared/useNetworkSpeed';