add teachers page #7

app/gallery/page.tsx

@@ -1,5 +1,6 @@
 import {Metadata} from 'next';
 import Gallery from '@/components/Gallery/Gallery';
+import './styles.css';
 
 export const metadata: Metadata = {
   title: 'Gallery',

app/gallery/styles.css

@@ -0,0 +1,8 @@
+.pswp__img {
+  cursor: none !important;
+}
+
+.pswp {
+  z-index: 1000 !important;
+  --pswp-bg: theme("colors.alternate");
+}

app/layout.tsx

@@ -4,7 +4,7 @@ import Footer from '@/components/Footer/Footer';
 import WithGtag from '@/lib/gtag/WithGtag';
 import meta from './metadata';
 import {kumbhSans, robotoMono} from './fonts';
-import './globals.css';
+import './styles.css';
 
 export const metadata = meta;
 
@@ -21,7 +21,7 @@ const bodyCn = clsx(
   'bg-fixed',
 );
 
-const mainCn = clsx('flex', 'flex-col', 'items-center', 'justify-center', 'p-24', 'grow');
+const mainCn = clsx('flex', 'flex-col', 'items-center', 'justify-start', 'grow');
 
 /**
  * @param {{children}} props Props.

app/not-found.tsx

@@ -1,4 +1,4 @@
-import UniservsalLink from '@/components/UniservsalLink/UniservsalLink';
+import UniversalLink from '@/components/UniversalLink/UniversalLink';
 
 /**
  * @returns React component.
@@ -9,7 +9,7 @@ export default function NotFound() {
       <h2>Not Found</h2>
       <p>Could not find requested resource</p>
       <p>
-        View <UniservsalLink href="/blog">all posts</UniservsalLink>
+        View <UniversalLink href="/blog">all posts</UniversalLink>
       </p>
     </div>
   );

app/page.tsx

@@ -1,19 +1,14 @@
 import clsx from 'clsx';
 import AppearInViewport from '@/components/AppearInViewport/AppearInViewport';
 import MainPageVideoPlayer from '@/components/MainPageVideoPlayer/MainPageVideoPlayer';
-import UniservsalLink from '@/components/UniservsalLink/UniservsalLink';
+import CATLink from '@/components/CATLink/CATLink';
+import SocialIcons from '@/components/SocialIcons/SocialIcons';
 
 const containerCn = clsx('relative', 'z-10', 'flex', 'flex-col', 'items-center', 'grow');
-const titleCn = clsx('font-light', 'text-8xl');
+const titleCn = clsx('font-light', 'text-8xl', 'mt-24');
 const subtitleCn = clsx('text-1.5xl', 'font-light', 'tracking-widest', 'text-center');
 const titleContainerCn = clsx('font-sans', 'select-none');
-const exploreCn = clsx('text-center', 'text-2xl', 'mt-auto');
-const exploreLinkCn = clsx('tracking-wider', 'animated-link');
-
-const exploreLinkVariants = {
-  visible: {opacity: 1, y: 0, scale: 1},
-  hidden: {opacity: 0, y: '2rem', scale: 0.9},
-};
+const exploreCn = clsx('mt-auto');
 
 /**
  * @returns React component.
@@ -28,19 +23,13 @@ export default function Home() {
           </h1>
           <h6 className={subtitleCn}>SOCIAL DANCE SCHOOL</h6>
         </AppearInViewport>
-        <AppearInViewport
-          transition={{delay: 1.2}}
+        <CATLink
+          text="EXPLORE"
           className={exploreCn}
-          variants={exploreLinkVariants}
-        >
-          <UniservsalLink
-            href="/about"
-            className={exploreLinkCn}
-          >
-            EXPLORE
-          </UniservsalLink>
-        </AppearInViewport>
+          path="/about"
+        />
       </div>
+      <SocialIcons />
       <MainPageVideoPlayer />
     </>
   );

app/teachers/page.tsx

@@ -1,22 +1,52 @@
 import {Metadata} from 'next';
+import clsx from 'clsx';
+import TextReveal from '@/components/TextReveal/TextReveal';
+import {default as TeachersComponent} from '@/components/Teachers/Teachers';
+import CATLink from '@/components/CATLink/CATLink';
+
+const pageDescription = 'Meet your inspirational guides in the world of social dance';
 
 export const metadata: Metadata = {
   title: 'Teachers',
   openGraph: {
     title: 'Salsaviva - Teachers',
-    description: 'Your inspirational guides in the world of social dance',
+    description: pageDescription,
   },
 };
 
+const containerCn = clsx(
+  'flex',
+  'flex-col',
+  'items-start',
+  'justify-start',
+  'min-h-screen',
+  'w-full',
+);
+const titleCn = clsx('text-8xl', 'mt-24', 'ml-4');
+const subTitleCn = clsx('text-4xl', 'my-4', 'w-2/3', 'ml-4');
+const CATLinkCn = clsx('mt-16');
+
 /**
  * @returns React component.
  */
 export default function Teachers() {
   return (
-    <div className="gap-8 xs:columns-3">
-      <div>dcdcs</div>
-      <div>sdcsdcd</div>
-      <div>sdcsdcsdcsdcsdc</div>
+    <div className={containerCn}>
+      <TextReveal
+        text="Our team"
+        className={titleCn}
+      />
+      <TextReveal
+        text={pageDescription}
+        className={subTitleCn}
+      />
+      <TeachersComponent />
+      <CATLink
+        text="BOOK A LESSON"
+        className={CATLinkCn}
+        path="/contact"
+        customTransition={{delay: 0.5}}
+      />
     </div>
   );
 }

app/template.tsx

@@ -4,7 +4,6 @@ import {LazyMotion} from 'framer-motion';
 import {LocationChangeTracker} from '@/lib/gtag/LocationChangeTracker';
 import useDynamicFavicon from '@/lib/dynamicFavicon/useDynamicFavicon';
 import TopMenu from '@/components/TopMenu/TopMenu';
-import SocialIcons from '@/components/SocialIcons/SocialIcons';
 import {loadFeatures} from '@/lib/framerMotion/loadFeatures';
 import ScrollToTopButton from '@/components/ScrollToTop/ScrollToTop';
 import CustomCursor from '@/lib/customCursor/CustomCursor';
@@ -24,7 +23,6 @@ export default function Template({children}: {children: React.ReactNode}) {
         bottom={50}
         right={50}
       />
-      <SocialIcons />
       {children}
       <CustomCursor />
     </LazyMotion>

components/CATLink/CATLink.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import clsx from 'clsx';
+import {HTMLMotionProps} from 'framer-motion';
+import {twMerge} from 'tailwind-merge';
+import {LinkProps} from 'next/link';
+import AppearInViewport from '../AppearInViewport/AppearInViewport';
+import UniversalLink from '../UniversalLink/UniversalLink';
+
+/**
+ * Props.
+ */
+type CATLinkProps = {
+  text: string;
+  path: LinkProps['href'];
+  className?: string;
+  customVariants?: HTMLMotionProps<'div'>['variants'];
+  customTransition?: HTMLMotionProps<'div'>['transition'];
+};
+
+const defaultTransition = {delay: 1.2};
+const defaultVariants = {
+  visible: {opacity: 1, y: 0, scale: 1},
+  hidden: {opacity: 0, y: '2rem', scale: 0.9},
+};
+
+const containerCn = clsx('text-2xl', 'w-full', 'text-center');
+const linkCn = clsx('tracking-wider', 'animated-link');
+
+/**
+ * Call to action link.
+ * @param {CATLinkProps} props Props.
+ * @returns React component.
+ */
+export default function CATLink({
+  text,
+  className,
+  customVariants,
+  path,
+  customTransition,
+}: CATLinkProps) {
+  return (
+    <AppearInViewport
+      transition={{...defaultTransition, ...customTransition}}
+      className={twMerge(containerCn, className)}
+      variants={{...defaultVariants, ...customVariants}}
+    >
+      <UniversalLink
+        href={path}
+        className={linkCn}
+      >
+        {text}
+      </UniversalLink>
+    </AppearInViewport>
+  );
+}

components/Footer/Footer.tsx

@@ -3,7 +3,7 @@ import Mail from './Mail';
 import Phone from './Phone';
 import Location from './Location';
 
-const footerCn = clsx('container', 'columns-3', 'xs:columns-1', 'mt-auto', 'pb-12');
+const footerCn = clsx('container', 'flex', 'justify-between', 'p-24');
 
 /**
  * @returns React component.

components/Footer/Location.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import {memo} from 'react';
-import UniservsalLink from '../UniservsalLink/UniservsalLink';
+import UniversalLink from '../UniversalLink/UniversalLink';
 
 const {NEXT_PUBLIC_LOCATION_ADDRESS_TEXT, NEXT_PUBLIC_LOCATION_GOOGLE_MAPS_LINK} = process.env;
 
@@ -14,13 +14,13 @@ const linkCn = clsx('animated-link');
 function Location() {
   return (
     <div className={containerCn}>
-      <UniservsalLink
+      <UniversalLink
         href={NEXT_PUBLIC_LOCATION_GOOGLE_MAPS_LINK ?? ''}
         target="_blank"
         className={linkCn}
       >
         <address className={addressCn}>{NEXT_PUBLIC_LOCATION_ADDRESS_TEXT}</address>
-      </UniservsalLink>
+      </UniversalLink>
     </div>
   );
 }

components/Footer/Mail.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import {memo} from 'react';
-import UniservsalLink from '../UniservsalLink/UniservsalLink';
+import UniversalLink from '../UniversalLink/UniversalLink';
 
 const {NEXT_PUBLIC_CONTACT_EMAIL} = process.env;
 
@@ -13,12 +13,12 @@ const anchorCn = clsx('animated-link');
 function Mail() {
   return (
     <div className={containerCn}>
-      <UniservsalLink
+      <UniversalLink
         className={anchorCn}
         href={`mailto:${NEXT_PUBLIC_CONTACT_EMAIL}`}
       >
         {NEXT_PUBLIC_CONTACT_EMAIL}
-      </UniservsalLink>
+      </UniversalLink>
     </div>
   );
 }

components/Gallery/Gallery.tsx

@@ -12,6 +12,10 @@ const photoSwipeOptions: GalleryProps['options'] = {
   zoom: false,
   bgOpacity: 0.9,
   closeOnVerticalDrag: true,
+  showHideAnimationType: 'fade',
+  doubleTapAction: false,
+  preloaderDelay: 1000,
+  preload: [1, 4],
 };
 
 /**

components/Gallery/GalleryImage.tsx

@@ -1,13 +1,12 @@
 import {MouseEvent} from 'react';
 import clsx from 'clsx';
-import Image from 'next/image';
 import {forwardRef} from 'react';
 import {useHotkeys} from 'react-hotkeys-hook';
 import {customCursorClickableClass} from '@/lib/customCursor/customCursorClickableClass';
 import useDisableRightClick from '@/lib/shared/useDisableRightClick';
 import {useAssignRefs} from '@/lib/shared/useAssignRefs';
-import useNetworkSpeed from '@/lib/shared/useNetworkSpeed';
 import AppearInViewport from '../AppearInViewport/AppearInViewport';
+import ImageWrapper from '../ImageWrapper/ImageWrapper';
 
 /**
  * Props.
@@ -54,7 +53,6 @@ const GalleryImage = forwardRef<HTMLImageElement, GalleryItemProps>(function Gal
   });
   const disableRef = useDisableRightClick();
   const finalRef = useAssignRefs(hotkeysRef, disableRef);
-  const [, isFast] = useNetworkSpeed();
 
   return (
     <AppearInViewport>
@@ -67,15 +65,11 @@ const GalleryImage = forwardRef<HTMLImageElement, GalleryItemProps>(function Gal
         role="link"
         ref={finalRef}
       >
-        <Image
+        <ImageWrapper
           className={imgCn}
           ref={ref}
           src={src}
-          placeholder="blur"
           blurDataURL={blurDataURL}
-          quality={isFast ? 75 : 25}
-          alt=""
-          fill
         />
       </div>
     </AppearInViewport>

components/Gallery/config.ts

@@ -2,7 +2,7 @@
  * Gallery images configuration.
  */
 const config = [
-  {fileName: 'gallery.0.jpg', dimensions: {width: 920, height: 600}},
+  {fileName: 'gallery.0.jpg', dimensions: {width: 920, height: 1200}},
   {fileName: 'gallery.1.jpg', dimensions: {width: 920, height: 600}},
   {fileName: 'gallery.2.jpg', dimensions: {width: 920, height: 600}},
   {fileName: 'gallery.3.jpg', dimensions: {width: 920, height: 600}},

components/ImageWrapper/ImageWrapper.tsx

@@ -0,0 +1,37 @@
+import Image, {ImageProps} from 'next/image';
+import {forwardRef} from 'react';
+import useNetworkSpeed from '@/lib/shared/useNetworkSpeed';
+
+/**
+ * Props.
+ */
+type ImageWrapperProps = Omit<ImageProps, 'alt'> & {
+  alt?: string;
+};
+
+/**
+ * Image wrapper, that uses next/image.
+ * Takes care of network speed and quality. Fills all avialiable space by default.
+ * @param props Props.
+ * @returns React component.
+ */
+const ImageWrapper = forwardRef<HTMLImageElement, ImageWrapperProps>(function ImageWrapper(
+  {alt = '', quality, fill = true, placeholder = 'blur', ...props},
+  ref,
+) {
+  const [, isFast] = useNetworkSpeed();
+  const computedQuality = quality ?? (isFast ? 75 : 25);
+
+  return (
+    <Image
+      ref={ref}
+      placeholder={placeholder}
+      fill={fill}
+      quality={computedQuality}
+      alt={alt}
+      {...props}
+    />
+  );
+});
+
+export default ImageWrapper;