feat: adjust mobile viewport margin and update company branding in footer

src/components/FadeIn.tsx

@@ -2,6 +2,7 @@
 
 import { motion, Transition } from 'framer-motion'
 import React from 'react'
+import { useMediaQuery } from '@/hooks/useMediaQuery'
 
 type FadeInProps = {
   children: React.ReactNode
@@ -10,15 +11,18 @@ type FadeInProps = {
 }
 
 export function FadeIn({ children, transition, className }: FadeInProps) {
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
   return (
     <motion.div
       className={className}
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: false, margin: '0px 0px -100px 0px' }}
+      viewport={{ once: false, margin: isMobile ? '0px 0px -50px 0px' : '0px 0px -100px 0px' }}
       transition={transition || { duration: 0.5 }}
     >
       {children}
     </motion.div>
   )
 }
+