add about page template #9

ukorvl · Jan 20, 2024 · 6525de8 · 6525de8
1 parent 5305cfc
commit 6525de8
Show file tree

Hide file tree

Showing 24 changed files with 1,708 additions and 521 deletions.
diff --git a/.env.sample b/.env.sample
@@ -1,6 +1,6 @@
 # Create .env.local file in the root of the project
 # Copy contents of this file to .env.local
-# and set variables there in order not to expose them to public repository
+# Replace values with your own
 
 NEXT_PUBLIC_GA_TRACKING_ID=""
 NEXT_PUBLIC_HOTJAR_ID=""

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
diff --git a/.gitignore b/.gitignore
@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# IDE
+/.idea
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -18,6 +18,6 @@
   "editor.formatOnSave": true,
   "editor.formatOnType": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -6,6 +6,7 @@ import getTextSlideIntoViewVarinats from '@/lib/framerMotion/variants/getTextSli
 import Philosophy from '@/components/pages/About/Philosophy';
 import CATLink from '@/components/shared/CATLink/CATLink';
 import BlockWithImage from '@/components/pages/About/BlockWithImage';
+import WhyJoinBlock from '@/components/pages/About/WhyJoinBlock/WhyJoinBlock';
 
 export const metadata: Metadata = {
   title: 'About',
@@ -24,6 +25,7 @@ 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');
+const danceTitleCn = clsx('text-accent3', 'font-bolder');
 
 /**
  * @returns React component.
@@ -60,6 +62,22 @@ export default function About() {
           imageFilename="about.1.jpg"
           imageAlt=""
         />
+        <WhyJoinBlock />
+        <BlockWithImage
+          text={
+            <div>
+              At SalsaViva we specialize in <span className="text-accent1">Social Dancing</span>{' '}
+              with styles such as: <span className={danceTitleCn}>SALSA/MAMBO</span>,{' '}
+              <span className={danceTitleCn}>BACHATA</span>,{' '}
+              <span className={danceTitleCn}>KIZOMBA</span> and{' '}
+              <span className={danceTitleCn}>ZOUK</span>, In addition to this, we also offer MIXED
+              LATIN CLASSES like Lady Style.
+            </div>
+          }
+          imageFilename="about.1.jpg"
+          imageAlt=""
+          reverse
+        />
       </div>
       <CATLink
         text="WANT TO JOIN?"

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,8 @@ import clsx from 'clsx';
 import '@/lib/fontawesome/configure';
 import Footer from '@/components/shared/Footer/Footer';
 import WithGtag from '@/lib/gtag/WithGtag';
+import CustomCursor from '@/lib/customCursor/CustomCursor';
+import WebVitals from '@/components/shared/WebVitals/WebVitals';
 import meta from './metadata';
 import viewportData from './viewport';
 import {kumbhSans, robotoMono} from './fonts';
@@ -34,6 +36,8 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
     <html lang="en">
       <body className={bodyCn}>
         <WithGtag />
+        <CustomCursor />
+        <WebVitals />
         <main className={mainCn}>{children}</main>
         <Footer />
       </body>

diff --git a/app/styles.css b/app/styles.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  font-size: clamp(1rem, 2vw + 0.75rem, 1.5rem);
+}
+
 @layer utilities {
   .animated-link {
     position: relative;
@@ -16,8 +20,8 @@
     width: 0;
     left: 0;
     position: absolute;
-    -webkit-transition: width 0.3s ease-in;
-    transition: width 0.3s ease-in;
+    transition: width 0.4s;
+    transition-timing-function: cubic-bezier(0.91, 0.43, 0.84, 0.89);
   }
 
   .animated-link:hover:after {

diff --git a/app/template.tsx b/app/template.tsx
@@ -6,7 +6,6 @@ import useDynamicFavicon from '@/lib/dynamicFavicon/useDynamicFavicon';
 import TopMenu from '@/components/shared/TopMenu/TopMenu';
 import {loadFeatures} from '@/lib/framerMotion/loadFeatures';
 import ScrollToTopButton from '@/components/shared/ScrollToTop/ScrollToTop';
-import CustomCursor from '@/lib/customCursor/CustomCursor';
 
 /**
  * @param {{children}} props Props.
@@ -24,7 +23,6 @@ export default function Template({children}: {children: React.ReactNode}) {
         right={50}
       />
       {children}
-      <CustomCursor />
     </LazyMotion>
   );
 }
diff --git a/components/pages/About/WhyJoinBlock/WhyJoinBlock.tsx b/components/pages/About/WhyJoinBlock/WhyJoinBlock.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import {Variants, m} from 'framer-motion';
+import AppearInViewport from '@/components/shared/AppearInViewport/AppearInViewport';
+import config from './config';
+
+const variants: Variants = {
+  visible: {
+    x: 0,
+    opacity: 1,
+    transition: {
+      y: {stiffness: 1000, velocity: -100},
+    },
+  },
+  hidden: {
+    x: 50,
+    opacity: 0,
+    transition: {
+      y: {stiffness: 1000},
+    },
+  },
+};
+
+/**
+ * @returns React component.
+ */
+export default function WhyJoinBlock() {
+  const containerCn =
+    'w-full flex flex-col items-center justify-center border-t-8 border-white border-dashed';
+  const titleCn = 'w-full text-8xl mt-24 text-accent2 text-right justify-end mr-32 mb-32';
+  const gridCn = 'grid grid-cols-3 w-full gap-4';
+
+  return (
+    <AppearInViewport
+      className={containerCn}
+      transition={{staggerChildren: 0.2, delayChildren: 0.75, delay: 0.5}}
+    >
+      <h2 className={titleCn}>Why join Salsaviva?</h2>
+      <div className={gridCn}>
+        {config.map((Item, index) => (
+          <m.div
+            key={index}
+            variants={variants}
+          >
+            <Item />
+          </m.div>
+        ))}
+      </div>
+    </AppearInViewport>
+  );
+}
diff --git a/components/pages/About/WhyJoinBlock/config.tsx b/components/pages/About/WhyJoinBlock/config.tsx
@@ -0,0 +1,41 @@
+const higlightedCn = 'text-accent3 font-bold';
+
+const config = [
+  () => (
+    <div>
+      <span className={higlightedCn}>Friendly </span>atmosphere
+    </div>
+  ),
+  () => (
+    <div>
+      <span className={higlightedCn}>International </span>level teaching
+    </div>
+  ),
+  () => (
+    <div>
+      <span className={higlightedCn}>Structured </span>and fun group lessons
+    </div>
+  ),
+  () => (
+    <div>
+      <span className={higlightedCn}>Detailed </span>and personalized private lessons
+    </div>
+  ),
+  () => (
+    <div>
+      <span className={higlightedCn}>Quality </span>Practice nights
+    </div>
+  ),
+  () => (
+    <div>
+      Community <span className={higlightedCn}>Parties & Events</span>
+    </div>
+  ),
+  () => (
+    <div>
+      Well <span className={higlightedCn}>established </span>school since 2016
+    </div>
+  ),
+] as const;
+
+export default config;
diff --git a/components/pages/MainPageVideoPlayer/MainPageVideoPlayer.tsx b/components/pages/MainPageVideoPlayer/MainPageVideoPlayer.tsx
@@ -3,6 +3,7 @@
 import clsx from 'clsx';
 import {AnimatePresence} from 'framer-motion';
 import {useState} from 'react';
+import useDisableRightClick from '@/lib/shared/useDisableRightClick';
 import bgVideoConfig from './bgVideosConfig';
 import VideoBackground from './VideoBackground';
 import usePreloadVideo from './usePreloadVideo';
@@ -20,9 +21,13 @@ export default function MainPageVideoPlayer() {
   const incrementVidIndex = () => setVidIndex(nextVidIndex);
   const {src, type} = bgVideoConfig[vidIndex];
   usePreloadVideo(bgVideoConfig[nextVidIndex].src);
+  const ref = useDisableRightClick<HTMLDivElement>();
 
   return (
-    <div className={containerCn}>
+    <div
+      className={containerCn}
+      ref={ref}
+    >
       <AnimatePresence mode="wait">
         {
           <VideoBackground

diff --git a/components/shared/Menu/Menu.tsx b/components/shared/Menu/Menu.tsx
@@ -1,10 +1,12 @@
 import {ReactNode, useState} from 'react';
+import FocusTrap from 'focus-trap-react';
 import useDisableBodyScroll from '@/lib/shared/useDisableBodyScroll';
 import MenuItem from './MenuItem';
 import MenuToggle from './MenuToggle';
 import MenuList from './MenuList';
 import {MenuContext} from './MenuContext';
 import {MenuPosition} from './MenuPosition';
+import {usePreserveActiveElement} from './usePreserveActiveElement';
 
 /**
  * Props.
@@ -23,10 +25,19 @@ export default function Menu({initialOpen = false, children, ...position}: MenuP
   const [isOpen, setIsOpen] = useState(initialOpen);
   const [menuBg, setMenuBg] = useState<string | null>(null);
   useDisableBodyScroll(isOpen);
+  usePreserveActiveElement(isOpen);
 
   return (
     <MenuContext.Provider value={{isOpen, setIsOpen, position, menuBg, setMenuBg}}>
-      {children}
+      <FocusTrap
+        active={isOpen}
+        paused={!isOpen}
+        focusTrapOptions={{
+          fallbackFocus: 'nav',
+        }}
+      >
+        <div>{children}</div>
+      </FocusTrap>
     </MenuContext.Provider>
   );
 }

diff --git a/components/shared/Menu/MenuItem.tsx b/components/shared/Menu/MenuItem.tsx
@@ -55,7 +55,6 @@ const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(function MenuItem(
   return (
     <m.li
       variants={variants}
-      whileTap={{scale: 0.9}}
       ref={ref}
       onClick={() => setIsOpen(false)}
       className={twMerge(itemCn, className)}

diff --git a/components/shared/Menu/MenuList.tsx b/components/shared/Menu/MenuList.tsx
@@ -1,4 +1,6 @@
-import {FocusEvent, ReactNode, useCallback, useContext, useEffect} from 'react';
+'use client';
+
+import {ReactNode, useCallback, useContext, useEffect} from 'react';
 import {m} from 'framer-motion';
 import {useHotkeys} from 'react-hotkeys-hook';
 import clsx from 'clsx';
@@ -37,6 +39,7 @@ const navVariants = {
   }),
 };
 
+// eslint-disable-next-line jsdoc/require-jsdoc
 const navCn = clsx(
   'fixed',
   'top-0',
@@ -58,6 +61,9 @@ const navCn = clsx(
 export default function MenuList({children}: MenuListProps) {
   const {isOpen, setIsOpen, position} = useContext(MenuContext);
   const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const {height, width} = useWindowDimensions();
+  const bodyHasOverflow = height ? height < document.body.clientHeight : undefined;
+  const scrollbarWidth = width ? width - document.body.clientWidth : undefined;
   useHotkeys('esc', close);
 
   useEffect(() => {
@@ -68,23 +74,14 @@ export default function MenuList({children}: MenuListProps) {
     };
   }, [close]);
 
-  const {height} = useWindowDimensions();
-
-  // eslint-disable-next-line jsdoc/require-jsdoc
-  const onBlur = (e: FocusEvent<HTMLUListElement, Element>) => {
-    if (!e.currentTarget.contains(e.relatedTarget)) {
-      close();
-    }
-  };
-
   return (
     <m.nav
       initial={false}
       animate={isOpen ? 'open' : 'closed'}
       custom={{height, position}}
       className={navCn}
       variants={navVariants}
-      onBlur={onBlur}
+      style={{paddingRight: bodyHasOverflow ? `${scrollbarWidth}px` : 0}}
     >
       {children}
       <MenuDynamicBg />

diff --git a/components/shared/Menu/MenuToggleSvgContent.tsx b/components/shared/Menu/MenuToggleSvgContent.tsx
@@ -1,5 +1,6 @@
 import {SVGMotionProps, m} from 'framer-motion';
 import clsx from 'clsx';
+import {useId} from 'react';
 import menuButtonSize from './menuButtonSize';
 
 const pathCn = clsx('fill-white', 'stroke-white');
@@ -21,13 +22,17 @@ export default function MenuToggleSvgContent() {
   const svgViewBoxSize = menuButtonSize / 2;
   const svgElSize = svgViewBoxSize / 1.5;
   const svgElOffset = (svgViewBoxSize - svgElSize) / 2;
+  const titleId = useId();
 
   return (
     <svg
       width={svgViewBoxSize}
       height={svgViewBoxSize}
       viewBox={`0 0 ${svgViewBoxSize} ${svgViewBoxSize}`}
+      role="img"
+      aria-label={titleId}
     >
+      <title id={titleId}>Toggle menu with site navigation</title>
       <Path
         variants={{
           closed: {

diff --git a/components/shared/Menu/usePreserveActiveElement.ts b/components/shared/Menu/usePreserveActiveElement.ts
@@ -0,0 +1,22 @@
+import {useEffect, useRef} from 'react';
+
+/**
+ * This hook is used to preserve the active element when the menu is opened.
+ * @param isOpen - Whether the menu is open or not.
+ */
+export const usePreserveActiveElement = (isOpen: boolean) => {
+  const activeElementRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      const activeElement = document.activeElement;
+
+      if (activeElement instanceof HTMLElement) {
+        activeElementRef.current = activeElement;
+      }
+    } else if (activeElementRef.current) {
+      activeElementRef.current.focus();
+      activeElementRef.current = null;
+    }
+  }, [isOpen]);
+};