update mobile form #124

app/contact/page.tsx

@@ -19,7 +19,7 @@ export const metadata: Metadata = {
 const titleVariants = getTextSlideIntoViewVarinats('right');
 const {FORMSPREE_ID} = env;
 const containerCn = clsx('flex', 'flex-col', 'min-h-screen', 'w-full');
-const titleCn = clsx('text-8xl', 'mt-24', 'ml-4', 'text-center');
+const titleCn = clsx('text-6xl', 'md:text-8xl', 'mt-24', 'ml-4', 'text-center');
 
 /**
  * @returns React component.

app/error.tsx

@@ -9,11 +9,11 @@ const errContainerCn = clsx('pt-64', 'flex', 'flex-col', 'gap-8');
  * @param {{error: Error; reset: () => void}} props Props.
  * @returns React component.
  */
-export default function Error({reset}: {error: Error; reset: () => void}) {
+export default function Error({reset}: {_err: Error; reset: () => void}) {
   return (
     <div className={errContainerCn}>
       <h2>Something went wrong!</h2>
-      <Button onClick={() => reset()}>Try again</Button>
+      <Button onClick={() => reset()}>Reload</Button>
     </div>
   );
 }

app/gallery/page.tsx

@@ -4,6 +4,7 @@ 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 getTextSlideIntoViewVarinats from '@/lib/framerMotion/variants/getTextSlideIntoViewVarinats';
 import metadataBase from '../metadata';
 import getSocialicons from '../socialIcons';
 import './styles.css';
@@ -18,56 +19,56 @@ export const metadata: Metadata = {
 };
 
 const containerCn = clsx(
-  'grow',
+  'flex',
+  'flex-col',
+  'items-start',
+  'justify-start',
+  'min-h-screen',
   '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',
+const titleCn = clsx('lg:text-8xl', 'text-6xl', 'mt-24', 'ml-4');
+const bottomText = clsx('text-2xl');
+const bottomTextContainerCn = clsx(
   'flex',
   'flex-col',
+  'mt-16',
   'items-center',
   'justify-center',
-  'gap-8',
+  'w-full',
+  'gap-4',
+  'p-4',
   'text-center',
 );
-const titleCn = clsx('text-4xl');
-const subTitleCn = clsx('text-2xl');
+const subTitleCn = clsx('text-4xl', 'my-12', 'lg:my-4', 'lg:w-2/3', 'ml-4');
+const titleVariants = getTextSlideIntoViewVarinats('left');
 
 /**
  * @returns React component.
  */
 export default function GalleryPage() {
   return (
     <div className={containerCn}>
-      <div className={galleryTextItem}>
-        <AppearInViewport
-          className={titleCn}
-          transition={{delay: 0.5, duration: TransitionDuration.LONG}}
-          as="h1"
-        >
-          SALSAVIVA GALLERY
-        </AppearInViewport>
-        <AppearInViewport
-          transition={{delay: 2, duration: TransitionDuration.VERY_LONG}}
-          className={subTitleCn}
-        >
-          Enjoy!
-        </AppearInViewport>
-      </div>
+      <AppearInViewport
+        as="h1"
+        className={titleCn}
+        variants={titleVariants}
+        transition={{duration: TransitionDuration.VERY_LONG, type: 'spring', bounce: 0.5}}
+      >
+        GALLERY
+      </AppearInViewport>
+      <AppearInViewport
+        className={subTitleCn}
+        transition={{delay: 1, duration: TransitionDuration.LONG}}
+      >
+        Dive into our vibrant world of social dance
+      </AppearInViewport>
       <Gallery />
-      <div className={galleryTextItem}>
+      <div className={bottomTextContainerCn}>
         <AppearInViewport
-          className={subTitleCn}
+          className={bottomText}
           as="h3"
         >
-          Want more? Follow us on social media!
+          Want more? Follow us on social media
         </AppearInViewport>
         <SocialIcons icons={getSocialicons('2x')} />
       </div>

components/pages/Contact/Form/Form.tsx

@@ -2,9 +2,11 @@
 
 import {FormikContext, useFormik} from 'formik';
 import {m} from 'framer-motion';
+import clsx from 'clsx';
 import Button from '@/components/shared/Button/Button';
 import validationSchema, {ContactFormData} from './validationSchema';
 import FormField from './FormField';
+import variants from './formElementChildrenVariants';
 
 /**
  * Props.
@@ -23,8 +25,9 @@ const initialValues = {
  * @returns React element.
  */
 export default function Form({onSubmit}: FormProps) {
+  const formCn = clsx('flex', 'flex-col', 'justify-center');
   const mottoCn = 'text-center text-gray-300 mt-16';
-  const btnCn = 'mt-8';
+  const btnCn = clsx('mt-8', 'lg:mx-0', 'mx-auto', 'w-64', 'lg:w-1/2');
 
   const formikData = useFormik<ContactFormData>({
     initialValues,
@@ -41,20 +44,28 @@ export default function Form({onSubmit}: FormProps) {
         initial="hidden"
         whileInView="visible"
         viewport={{once: true}}
+        className={formCn}
       >
         <FormField name="name" />
         <FormField name="message" />
-        <div className={mottoCn}>Select your preferred method of contact:</div>
+        <m.div
+          className={mottoCn}
+          variants={variants}
+        >
+          Select your preferred method of contact:
+        </m.div>
         <FormField name="email" />
         <FormField name="tel" />
         <FormField name="telegram" />
-        <Button
-          type="submit"
-          disabled={isSubmitting || !isValid || !dirty}
-          className={btnCn}
-        >
-          Submit
-        </Button>
+        <m.div variants={variants}>
+          <Button
+            type="submit"
+            disabled={isSubmitting || !isValid || !dirty}
+            className={btnCn}
+          >
+            Submit
+          </Button>
+        </m.div>
       </m.form>
     </FormikContext.Provider>
   );

components/pages/Contact/Form/FormField.tsx

@@ -5,6 +5,7 @@ import formConfig from './formConfig';
 import type {ContactFormData} from './validationSchema';
 import TextField from '../TextField/TextField';
 import ErrorMessage from './ErrorMessage';
+import variants from './formElementChildrenVariants';
 
 /**
  * Props.
@@ -13,23 +14,6 @@ type FormFieldProps = {
   name: keyof ContactFormData;
 };
 
-const variants = {
-  visible: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      y: {stiffness: 1000, velocity: -100},
-    },
-  },
-  hidden: {
-    y: 50,
-    opacity: 0,
-    transition: {
-      y: {stiffness: 1000},
-    },
-  },
-};
-
 /**
  * @param {FormFieldProps} props Props.
  * @returns React element.
@@ -40,6 +24,8 @@ export default function FormField({name}: FormFieldProps) {
   const hasError = meta.touched && !!meta.error;
   const fieldCn = clsx('relative', 'h-16');
 
+  console.log('error', meta);
+
   return (
     <m.div
       variants={variants}

components/pages/Contact/Form/formElementChildrenVariants.ts

@@ -0,0 +1,21 @@
+/**
+ * Frmaer motion variants for form children elements.
+ */
+const variants = {
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      y: {stiffness: 1000, velocity: -100},
+    },
+  },
+  hidden: {
+    y: 50,
+    opacity: 0,
+    transition: {
+      y: {stiffness: 1000},
+    },
+  },
+};
+
+export default variants;

components/pages/Contact/FormWrapper/FormWrapper.tsx

@@ -52,9 +52,5 @@ export default function FormWrapper({formspreeId}: FormWrapperProps) {
 
   // here animation on swich screen should occur
 
-  return (
-    <DynamicFormBg>
-      <div className={wrapperCn}>{render()}</div>
-    </DynamicFormBg>
-  );
+  return <div className={wrapperCn}>{render()}</div>;
 }

components/pages/Gallery/Gallery.tsx

@@ -2,6 +2,7 @@
 
 import {Gallery as PSGallery, GalleryProps} from 'react-photoswipe-gallery';
 import 'photoswipe/dist/photoswipe.css';
+import clsx from 'clsx';
 import config from './config';
 import GalleryItem from './GalleryItem';
 
@@ -16,21 +17,36 @@ const photoSwipeOptions: GalleryProps['options'] = {
   preload: [1, 4],
 };
 
+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',
+  'select-none',
+);
+
 /**
  * @returns React component.
  */
 export default function Gallery() {
   return (
-    <PSGallery
-      options={photoSwipeOptions}
-      id={galleryId}
-    >
-      {config.map(props => (
-        <GalleryItem
-          key={props.src}
-          {...props}
-        />
-      ))}
-    </PSGallery>
+    <div className={containerCn}>
+      <PSGallery
+        options={photoSwipeOptions}
+        id={galleryId}
+      >
+        {config.map(props => (
+          <GalleryItem
+            key={props.src}
+            {...props}
+          />
+        ))}
+      </PSGallery>
+    </div>
   );
 }

components/pages/Gallery/config.ts

@@ -25,8 +25,7 @@ const config = [
   {fileName: 'gallery.11.jpg', width: 920, height: 600, alt: ''},
   {fileName: 'gallery.12.jpg', width: 920, height: 600, alt: ''},
   {fileName: 'gallery.13.jpg', width: 920, height: 600, alt: ''},
-  {fileName: 'gallery.14.jpg', width: 920, height: 600, alt: ''},
-  {fileName: 'gallery.15.jpg', width: 1280, height: 854, alt: ''},
+  {fileName: 'gallery.14.jpg', width: 1280, height: 854, alt: ''},
 ] as const;
 
 export default config.map(({fileName, ...rest}) => ({

components/shared/Menu/MenuList.tsx

@@ -6,6 +6,7 @@ import {useHotkeys} from 'react-hotkeys-hook';
 import clsx from 'clsx';
 import useWindowDimensions from '@/lib/shared/useWindowDimensions';
 import {useContextSafe} from '@/utils/useContextSafe';
+import {numericMobileMaxScreenSize} from '@/lib/shared/useIsMobile';
 import {MenuContext} from './MenuContext';
 import {MenuPosition} from './MenuPosition';
 import menuButtonSize from './menuButtonSize';
@@ -65,6 +66,7 @@ export default function MenuList({children}: MenuListProps) {
   const {height, width} = useWindowDimensions();
   const bodyHasOverflow = height ? height < document.body.clientHeight : undefined;
   const scrollbarWidth = width ? width - document.body.clientWidth : undefined;
+  const isMobile = width ? numericMobileMaxScreenSize >= width : false;
   useHotkeys('esc', close);
 
   useEffect(() => {
@@ -85,7 +87,7 @@ export default function MenuList({children}: MenuListProps) {
       style={{paddingRight: bodyHasOverflow ? `${scrollbarWidth}px` : '0px'}}
     >
       {children}
-      <MenuDynamicBg />
+      {!isMobile && <MenuDynamicBg />}
     </m.nav>
   );
 }

lib/shared/useIsMobile.ts

@@ -4,7 +4,11 @@ import tailwindConfig from '../../tailwind.config';
 import useWindowDimensions from './useWindowDimensions';
 
 const mobileMaxScreenSize = tailwindConfig.theme.extend.screens.sm;
-const numericMobileMaxScreenSize = parseInt(mobileMaxScreenSize.replace('px', ''));
+
+/**
+ * Numeric mobile max screen size.
+ */
+export const numericMobileMaxScreenSize = parseInt(mobileMaxScreenSize.replace('px', ''));
 
 /**
  * @returns Is mobile.