gallery minor changes #10

app/gallery/page.tsx

@@ -1,5 +1,9 @@
 import {Metadata} from 'next';
+import clsx from 'clsx';
 import Gallery from '@/components/pages/Gallery/Gallery';
+import AppearInViewport from '@/components/shared/AppearInViewport/AppearInViewport';
+import SocialIcons from '@/components/shared/SocialIcons/SocialIcons';
+import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
 import './styles.css';
 
 export const metadata: Metadata = {
@@ -10,9 +14,64 @@ export const metadata: Metadata = {
   },
 };
 
+const containerCn = clsx(
+  'grow',
+  'w-full',
+  'h-full',
+  'grid',
+  'grid-rows-auto',
+  'sm: grid-cols-1',
+  'md:grid-cols-2',
+  'lg:grid-cols-3',
+  '2xl:grid-cols-4',
+);
+const galleryTextItem = clsx(
+  'p-8',
+  'flex',
+  'flex-col',
+  'items-center',
+  'justify-center',
+  'gap-8',
+  'text-center',
+);
+const titleCn = clsx('text-4xl');
+const textCn = clsx('text-xl');
+const subTitleCn = clsx('text-2xl');
+
 /**
  * @returns React component.
  */
 export default function GalleryPage() {
-  return <Gallery />;
+  return (
+    <div className={containerCn}>
+      <div className={galleryTextItem}>
+        <AppearInViewport
+          className={titleCn}
+          transition={{delay: 0.5, duration: TransitionDuration.LONG}}
+        >
+          SALSAVIVA GALLERY
+        </AppearInViewport>
+        <AppearInViewport
+          transition={{delay: 1.5, duration: TransitionDuration.LONG}}
+          className={textCn}
+        >
+          Welcome to our vibrant dancing studio image gallery, where the rhythm comes alive through
+          captivating moments frozen in time.
+        </AppearInViewport>
+        <AppearInViewport
+          transition={{delay: 3, duration: TransitionDuration.VERY_LONG}}
+          className={subTitleCn}
+        >
+          Enjoy!
+        </AppearInViewport>
+      </div>
+      <Gallery />
+      <div className={galleryTextItem}>
+        <AppearInViewport className={subTitleCn}>
+          Whant more? Follow us on social media!
+        </AppearInViewport>
+        <SocialIcons iconSize="2x" />
+      </div>
+    </div>
+  );
 }

app/page.tsx

@@ -9,6 +9,7 @@ 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('mt-auto');
+const iconsCn = clsx('fixed', 'left-4', '-translate-y-2/4', 'top-2/4');
 
 /**
  * @returns React component.
@@ -29,7 +30,11 @@ export default function Home() {
           path="/about"
         />
       </div>
-      <SocialIcons />
+      <SocialIcons
+        iconSize="2xl"
+        direction="column"
+        className={iconsCn}
+      />
       <MainPageVideoPlayer />
     </>
   );

app/teachers/page.tsx

@@ -4,6 +4,7 @@ import {default as TeachersComponent} from '@/components/pages/Teachers/Teachers
 import CATLink from '@/components/shared/CATLink/CATLink';
 import AppearInViewport from '@/components/shared/AppearInViewport/AppearInViewport';
 import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
+import getTextSlideIntoViewVarinats from '@/lib/framerMotion/variants/getTextSlideIntoViewVarinats';
 
 const pageDescription = 'Meet your inspirational guides in the world of social dance';
 
@@ -27,16 +28,7 @@ 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');
 
-const titleVariants = {
-  hidden: {
-    opacity: 0,
-    x: -100,
-  },
-  visible: {
-    opacity: 1,
-    x: 0,
-  },
-};
+const titleVariants = getTextSlideIntoViewVarinats('left');
 
 /**
  * @returns React component.

components/pages/Gallery/Gallery.tsx

@@ -1,12 +1,10 @@
 'use client';
 
-import clsx from 'clsx';
 import {Gallery as PSGallery, GalleryProps} from 'react-photoswipe-gallery';
 import 'photoswipe/dist/photoswipe.css';
 import config from './config';
 import GalleryItem from './GalleryItem';
 
-const containerCn = clsx('flex', 'flex-wrap', 'gap-4', 'justify-center');
 const galleryId = 'images';
 const photoSwipeOptions: GalleryProps['options'] = {
   zoom: false,
@@ -23,18 +21,16 @@ const photoSwipeOptions: GalleryProps['options'] = {
  */
 export default function Gallery() {
   return (
-    <div className={containerCn}>
-      <PSGallery
-        options={photoSwipeOptions}
-        id={galleryId}
-      >
-        {config.map(props => (
-          <GalleryItem
-            key={props.src}
-            {...props}
-          />
-        ))}
-      </PSGallery>
-    </div>
+    <PSGallery
+      options={photoSwipeOptions}
+      id={galleryId}
+    >
+      {config.map(props => (
+        <GalleryItem
+          key={props.src}
+          {...props}
+        />
+      ))}
+    </PSGallery>
   );
 }

components/pages/Gallery/GalleryImage.tsx

@@ -17,28 +17,12 @@ type GalleryItemProps = {
   open: (e: MouseEvent) => void;
 };
 
-const imgCn = clsx('rounded-md', 'overflow-hidden');
+const imgCn = clsx('object-cover');
 const overflowCn = clsx(
   customCursorClickableClass,
   'relative',
-  'after:absolute',
-  'after:content-[""]',
-  'after:w-full',
-  'after:h-full',
-  'after:top-0',
-  'after:left-0',
-  'after:bg-[radial-gradient(circle,_var(--tw-gradient-stops))] from-white to-transparent',
-  'after:transition-opacity',
-  'after:duration-300',
-  'after:ease-out',
-  'after:opacity-0',
-  'hover:after:opacity-20',
-  'transition-transform',
-  'duration-500',
-  'ease-out',
-  'hover:translate-y-1',
-  'rounded-md',
-  'focus-ring',
+  'aspect-square',
+  'focus:outline-none',
 );
 
 /**
@@ -59,7 +43,6 @@ const GalleryImage = forwardRef<HTMLImageElement, GalleryItemProps>(function Gal
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
       <div
         className={overflowCn}
-        style={{height: 300, width: 400}}
         onClick={open}
         tabIndex={0}
         role="link"
@@ -70,6 +53,7 @@ const GalleryImage = forwardRef<HTMLImageElement, GalleryItemProps>(function Gal
           ref={ref}
           src={src}
           blurDataURL={blurDataURL}
+          fill
         />
       </div>
     </AppearInViewport>

components/pages/MainPageVideoPlayer/MainPageVideoPlayer.tsx

@@ -5,6 +5,7 @@ import {AnimatePresence} from 'framer-motion';
 import {useState} from 'react';
 import bgVideoConfig from './bgVideosConfig';
 import VideoBackground from './VideoBackground';
+import usePreloadVideo from './usePreloadVideo';
 
 const containerCn = clsx('fixed', 'top-0', 'left-0', 'w-full', 'h-full');
 
@@ -13,10 +14,12 @@ const containerCn = clsx('fixed', 'top-0', 'left-0', 'w-full', 'h-full');
  */
 export default function MainPageVideoPlayer() {
   const [vidIndex, setVidIndex] = useState(0);
+  const videosListLength = bgVideoConfig.length;
+  const nextVidIndex = vidIndex < videosListLength - 1 ? vidIndex + 1 : 0;
   // eslint-disable-next-line jsdoc/require-jsdoc
-  const incrementVidIndex = () =>
-    vidIndex < bgVideoConfig.length - 1 ? setVidIndex(vidIndex + 1) : setVidIndex(0);
+  const incrementVidIndex = () => setVidIndex(nextVidIndex);
   const {src, type} = bgVideoConfig[vidIndex];
+  usePreloadVideo(bgVideoConfig[nextVidIndex].src);
 
   return (
     <div className={containerCn}>

components/pages/MainPageVideoPlayer/usePreloadVideo.ts

@@ -0,0 +1,23 @@
+import {useEffect} from 'react';
+
+const preloadedVideosCache = new Map<string, boolean>();
+
+/**
+ * Hook for preloading video.
+ * @param urlToPreload Url.
+ */
+export default function usePreloadVideo(urlToPreload: string) {
+  useEffect(() => {
+    if (!preloadedVideosCache.has(urlToPreload)) {
+      const video = document.createElement('video');
+      video.src = urlToPreload;
+      video.preload = 'auto';
+      video.load();
+      preloadedVideosCache.set(urlToPreload, true);
+
+      return () => {
+        video.remove();
+      };
+    }
+  }, [urlToPreload]);
+}

components/pages/Teachers/Teacher.tsx

@@ -28,7 +28,7 @@ const variants = {
   },
 };
 
-const cardCn = clsx('aspect-square', 'relative', 'overflow-hidden', 'relative');
+const cardCn = clsx('aspect-square', 'overflow-hidden', 'relative');
 const imgCn = clsx('object-cover', 'w-full', 'h-full');
 
 /**

components/shared/Footer/Footer.tsx

@@ -3,7 +3,7 @@ import Mail from './Mail';
 import Phone from './Phone';
 import Location from './Location';
 
-const footerCn = clsx('container', 'flex', 'justify-between', 'p-24');
+const footerCn = clsx('grid', 'sm:grid-cols-1', 'lg:grid-cols-3', 'p-24');
 
 /**
  * @returns React component.

components/shared/SocialIcons/SocialIcons.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {FontAwesomeIcon, FontAwesomeIconProps} from '@fortawesome/react-fontawesome';
 import clsx from 'clsx';
 import {twMerge} from 'tailwind-merge';
 import {memo} from 'react';
@@ -9,57 +9,75 @@ import iconsConfig from './iconsConfig';
 import AppearInViewport from '../AppearInViewport/AppearInViewport';
 import UniversalLink from '../UniversalLink/UniversalLink';
 
-const iconsCn = clsx(
-  'flex',
-  'flex-col',
-  'justify-center',
-  'gap-4',
-  'select-none',
-  'fixed',
-  'left-4',
-  '-translate-y-2/4',
-  'top-2/4',
-  'z-10',
-);
+/**
+ * Direction.
+ */
+type Direction = 'row' | 'column';
+
+/**
+ * Props.
+ */
+type SocialIconsProps = {
+  iconSize: FontAwesomeIconProps['size'];
+  /** @default row */
+  direction?: Direction;
+  className?: string;
+};
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+const iconsCn = (direction: SocialIconsProps['direction']) =>
+  clsx(
+    'flex',
+    direction === 'column' && 'flex-col',
+    'justify-center',
+    'gap-4',
+    'select-none',
+    'z-10',
+  );
 const iconCn = clsx('hover:scale-105 hover:-translate-y-0.5 transition-transform');
 
 const variants = {
-  visible: {
-    y: 0,
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  visible: (direction: Direction) => ({
+    [direction === 'row' ? 'x' : 'y']: 0,
     opacity: 1,
     transition: {
       y: {stiffness: 1000, velocity: -100},
     },
-  },
-  hidden: {
-    y: 50,
+  }),
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  hidden: (direction: Direction) => ({
+    [direction === 'row' ? 'x' : 'y']: direction === 'row' ? -50 : 50,
     opacity: 0,
     transition: {
       y: {stiffness: 1000},
     },
-  },
+  }),
 };
 
 /**
+ * @param {SocialIconsProps} props Props.
  * @returns React component.
  */
-function SocialIcons() {
+function SocialIcons({iconSize, direction = 'row', className}: SocialIconsProps) {
   return (
     <AppearInViewport
-      className={iconsCn}
+      className={twMerge(iconsCn(direction), className)}
       transition={{delay: 0.6, staggerChildren: 0.2, delayChildren: 0.5}}
     >
       {iconsConfig.map(({href, target, className, ...rest}) => (
         <m.div
           key={href}
           variants={variants}
+          custom={direction}
         >
           <UniversalLink
             href={href}
             target={target}
           >
             <FontAwesomeIcon
               className={twMerge(iconCn, className)}
+              size={iconSize}
               {...rest}
             />
           </UniversalLink>