fix mobile issues

storefront/components/animations/fade-in-text.tsx

@@ -0,0 +1,36 @@
+import { motion } from 'framer-motion';
+import { Fragment } from 'react';
+
+interface FadeInTextProps {
+  text: string;
+}
+
+export const FadeInText = ({ text }: FadeInTextProps) => {
+  const characters = text.split('');
+
+  return (
+    <Fragment>
+      {characters.map((character, index) => {
+        if (character === ' ') {
+          return <span key={index} className="inline-block w-4" />;
+        }
+
+        return (
+          <motion.span
+            key={index}
+            className="inline-block"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 0.6,
+              delay: index * 0.08,
+            }}
+          >
+            {character}
+          </motion.span>
+        );
+      })}
+    </Fragment>
+  );
+};

storefront/components/sections/hero.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { motion, Variants } from 'framer-motion';
 import { Container } from '@/components/layout/container';
-import { SlideInCharacters } from '@/components/animations/slide-in-characters';
+import { FadeInText } from '@/components/animations/fade-in-text';
 
 export const Hero = () => {
   return (
@@ -11,7 +11,7 @@ export const Hero = () => {
         <div className="relative h-[85vh] overflow-hidden border border-white  border-opacity-10">
           <div className="absolute inset-0 z-10 flex h-full flex-col items-center justify-center gap-4   border-sky-100 px-4 text-center">
             <h1 className=" bg-opacity-70 py-3 text-5xl uppercase leading-snug tracking-widest lg:text-4xl xl:text-8xl">
-              <SlideInCharacters text="Unleash The Beast!" />
+              <FadeInText text="Unleash The Beast!" />
             </h1>
 
             <Link href="/shop">
@@ -33,7 +33,7 @@ export const Hero = () => {
           <motion.div
             variants={infiniteRotate}
             animate="rotate"
-            className="absolute bottom-5 right-5 rotate-180 text-white lg:bottom-10 lg:right-10"
+            className="absolute bottom-20 right-5 rotate-180 text-white lg:bottom-10 lg:right-10"
           >
             <div className="scale-75 lg:scale-100">
               <svg

storefront/pages/shop/collections/[handle].tsx

@@ -3,7 +3,7 @@ import { InferGetStaticPropsType, GetStaticPropsContext } from 'next';
 import { medusaClient } from '@/lib/medusa-client';
 import { Container } from '@/components/layout/container';
 import { ProductCard, NavBar } from '@/components/collections';
-import { SlideInCharacters } from '@/components/animations/slide-in-characters';
+import { FadeInText } from '@/components/animations/fade-in-text';
 
 type ProductsPageProps = InferGetStaticPropsType<typeof getStaticProps>;
 
@@ -16,7 +16,7 @@ const CollectionPage = ({
       <Container>
         <div className="my-10 flex flex-col gap-10 lg:my-20 lg:gap-20">
           <h1 className="text-4xl xl:text-8xl">
-            <SlideInCharacters text="Unleash The Beast" />
+            <FadeInText text="Unleash The Beast" />
           </h1>
 
           <NavBar collections={collections} />

storefront/pages/shop/index.tsx

@@ -3,7 +3,7 @@ import { InferGetStaticPropsType } from 'next';
 import { medusaClient } from '@/lib/medusa-client';
 import { Container } from '@/components/layout/container';
 import { ProductCard, NavBar } from '@/components/collections';
-import { SlideInCharacters } from '@/components/animations/slide-in-characters';
+import { FadeInText } from '@/components/animations/fade-in-text';
 
 type ProductsPageProps = InferGetStaticPropsType<typeof getStaticProps>;
 
@@ -13,7 +13,7 @@ const ProductsPage = ({ products, collections }: ProductsPageProps) => {
       <Container>
         <div className="my-10 flex flex-col gap-10 lg:my-20 lg:gap-20">
           <h1 className="text-4xl xl:text-8xl">
-            <SlideInCharacters text="Unleash The Beast" />
+            <FadeInText text="Unleash The Beast" />
           </h1>
 
           <NavBar collections={collections} />