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>
   )
 }
+

src/components/Footer.tsx

@@ -58,7 +58,7 @@ export function Footer() {
           </div>
         </div>
         <div className="flex flex-col items-center border-t border-gray-800 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
-          <form className="flex w-full justify-center md:w-auto">
+          {/* <form className="flex w-full justify-center md:w-auto">
             <TextField
               type="email"
               aria-label="Email address"
@@ -72,9 +72,9 @@ export function Footer() {
               <span className="hidden lg:inline">Join our newsletter</span>
               <span className="lg:hidden">Join newsletter</span>
             </Button>
-          </form>
-          <p className="mt-6 text-sm text-gray-400 md:mt-0">
-            &copy; Copyright ThreeFold {new Date().getFullYear()}. All rights reserved.
+          </form> */}
+          <p className="mt-6 text-sm text-gray-400 md:mt-0 ">
+            &copy; Copyright OurWorld Holdings, {new Date().getFullYear()}. All rights reserved.
           </p>
         </div>
       </Container>

src/components/Header.tsx

@@ -122,7 +122,7 @@ export function Header() {
                             <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
                           </div>
                           <div className="mt-8 flex flex-col gap-4">
-                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white">
+                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
                               Docs
                             </Button>
                             <Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>
@@ -135,7 +135,7 @@ export function Header() {
               )}
             </Popover>
             <div className="flex items-center gap-6 max-lg:hidden">
-              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white">
+              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
                 Docs
               </Button>
               <Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>

src/components/WorldMap.tsx

@@ -92,7 +92,7 @@ export function WorldMap() {
               <CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT>
               <CountUpNumber end={5388956} color="light" className="mt-2 text-3xl font-bold" />
               <CP color="light" className="mt-2 text-sm">
-                Total amount of storage (SSD, HDD, & RAM) on the grid.
+                Total GB amount of storage (SSD, HDD, & RAM) on the grid.
               </CP>
             </motion.div>
 

src/hooks/useMediaQuery.ts

@@ -0,0 +1,21 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false)
+
+  useEffect(() => {
+    const media = window.matchMedia(query)
+    if (media.matches !== matches) {
+      setMatches(media.matches)
+    }
+    const listener = () => {
+      setMatches(media.matches)
+    }
+    media.addEventListener('change', listener)
+    return () => media.removeEventListener('change', listener)
+  }, [matches, query])
+
+  return matches
+}