minor changes #18

app/layout.tsx

@@ -21,7 +21,7 @@ const bodyCn = clsx(
   'bg-fixed',
 );
 
-const mainCn = clsx('flex', 'flex-col', 'items-center', 'justify-center', 'p-24');
+const mainCn = clsx('flex', 'flex-col', 'items-center', 'justify-center', 'p-24', 'grow');
 
 /**
  * @param {{children}} props Props.

app/page.tsx

@@ -3,19 +3,17 @@ import Link from 'next/link';
 import AppearInViewport from '@/components/AppearInViewport/AppearInViewport';
 import MainPageVideoPlayer from '@/components/MainPageVideoPlayer/MainPageVideoPlayer';
 
-const containerCn = clsx('relative', 'z-10');
-const titleCn = clsx('font-light', 'text-9xl', 'text-transparent', 'bg-clip-text');
-const subtitleCn = clsx('text-2xl', 'font-light', 'tracking-widest', 'text-center');
-const titleContainerCn = clsx(
-  'font-sans',
-  'select-none',
-  'bg-gradient-to-r',
-  'from-accent3',
-  'to-accent0',
-  'bg-clip-text',
-);
-const exploreCn = clsx('text-center', 'text-2xl');
-const exploreLinkCn = clsx('tracking-widest', 'underline', 'underline-offset-2', 'leading-4');
+const containerCn = clsx('relative', 'z-10', 'flex', 'flex-col', 'items-center', 'grow');
+const titleCn = clsx('font-light', 'text-8xl');
+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},
+};
 
 /**
  * @returns React component.
@@ -33,6 +31,7 @@ export default function Home() {
         <AppearInViewport
           transition={{delay: 1.2}}
           className={exploreCn}
+          variants={exploreLinkVariants}
         >
           <Link
             href="/about"

app/template.tsx

@@ -26,6 +26,7 @@ export default function Template({children}: {children: React.ReactNode}) {
       <SocialIcons />
       <AnimatePresence mode="wait">
         <m.div
+          className="h-full grow flex"
           initial={{x: 300, opacity: 0}}
           animate={{x: 0, opacity: 1}}
           exit={{x: 300, opacity: 0}}

components/AppearInViewport/AppearInViewport.tsx

@@ -6,7 +6,7 @@ import {ReactNode, forwardRef} from 'react';
 // eslint-disable-next-line jsdoc/require-jsdoc
 type SafeHTMLMotionProps = Omit<
   HTMLMotionProps<'div'>,
-  'variants' | 'initial' | 'whileInView' | 'viewport' | 'ref'
+  'initial' | 'whileInView' | 'viewport' | 'ref'
 >;
 
 /**
@@ -16,7 +16,7 @@ type AppearOnScreenProps = {
   children: ReactNode;
 } & SafeHTMLMotionProps;
 
-const variants: Variants = {
+const defaultVariants: Variants = {
   visible: {opacity: 1},
   hidden: {opacity: 0},
 };
@@ -28,7 +28,7 @@ const defaultTransition = {duration: 0.5, delay: 0.3};
  * @returns React component.
  */
 const AppearInViewport = forwardRef<HTMLDivElement, AppearOnScreenProps>(function AppearInViewport(
-  {children, transition, ...rest},
+  {children, variants, transition, ...rest},
   ref,
 ) {
   return (
@@ -37,7 +37,7 @@ const AppearInViewport = forwardRef<HTMLDivElement, AppearOnScreenProps>(functio
       whileInView="visible"
       viewport={{once: true}}
       transition={{...defaultTransition, ...transition}}
-      variants={variants}
+      variants={variants ?? defaultVariants}
       ref={ref}
       {...rest}
     >

components/Loader/Loader.tsx

@@ -25,7 +25,7 @@ type LoaderProps = {
  */
 export default function Loader({size = 'md', grow = false}: LoaderProps) {
   const containerClassName = clsx(
-    'flex justify-content-center align-items-center p-4',
+    'absolute flex justify-content-center align-items-center p-4',
     grow && 'min-h-screen w-full',
   );
 

components/Menu/MenuDynamicBg.tsx

@@ -6,7 +6,7 @@ import useNetworkSpeed from '@/lib/shared/useNetworkSpeed';
 import {MenuContext} from './MenuContext';
 
 // eslint-disable-next-line jsdoc/require-jsdoc
-const dynamicBgCn = clsx('absolute', 'top-0', 'left-0', 'w-full', 'h-full', 'z-20');
+const dynamicBgCn = clsx('absolute', 'top-0', 'left-0', 'w-full', 'h-full', 'z-30');
 
 /**
  * @returns React component.

components/Menu/MenuItem.tsx

@@ -32,7 +32,7 @@ const variants = {
   },
 };
 
-const itemCn = clsx('text-5xl', 'm-4', 'text-center', 'z-30', 'relative');
+const itemCn = clsx('text-5xl', 'm-4', 'text-center', 'z-40', 'relative');
 
 /**
  * @param {MenuItemProps} props Props.

components/Menu/MenuList.tsx

@@ -44,7 +44,7 @@ const navCn = clsx(
   'left-0',
   'w-full',
   'h-full',
-  'z-10',
+  'z-20',
   'bg-gradient-to-bl from-accent0 to-alternate',
   'flex',
   'flex-col',

components/Menu/MenuToggle.tsx

@@ -14,7 +14,7 @@ type MenuToggleProps = {
   className?: string;
 };
 
-const containerCn = clsx('absolute', 'z-30');
+const containerCn = clsx('absolute', 'z-40');
 const btnCn = clsx('rounded-full');
 
 /**

components/ScrollToTop/ScrollToTop.tsx

@@ -4,6 +4,7 @@ import {CSSProperties, useCallback, useState} from 'react';
 import {m} from 'framer-motion';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCircleArrowUp} from '@fortawesome/free-solid-svg-icons';
+import clsx from 'clsx';
 import useScroll, {ScrollHandler} from '@/lib/shared/useScroll';
 import isPrefersReducedMotion from '@/utils/isPrefersReducedMotion';
 
@@ -20,6 +21,8 @@ const variants = {
   hidden: {opacity: 0, y: '2rem'},
 };
 
+const btnCn = clsx('fixed');
+
 /**
  * @param {ScrollToTopButtonProps} props Props.
  * @returns React component.
@@ -38,7 +41,7 @@ export default function ScrollToTopButton({offset = 1000, ...position}: ScrollTo
 
   return (
     <m.button
-      className="fixed"
+      className={btnCn}
       initial="hidden"
       animate={visible ? 'visible' : 'hidden'}
       variants={variants}