From 1047c996c27b453497c052e35bf363c19c3c7c20 Mon Sep 17 00:00:00 2001
From: akash-dyte <153725458+akash-dyte@users.noreply.github.com>
Date: Wed, 3 Jul 2024 11:36:25 +0530
Subject: [PATCH] Update HomeFooter.jsx

---
 src/components/homepage/HomeFooter.jsx | 228 ++++++++++++-------------
 1 file changed, 111 insertions(+), 117 deletions(-)

diff --git a/src/components/homepage/HomeFooter.jsx b/src/components/homepage/HomeFooter.jsx
index 40ee0088ed..2660c01a8d 100644
--- a/src/components/homepage/HomeFooter.jsx
+++ b/src/components/homepage/HomeFooter.jsx
@@ -6,16 +6,6 @@ import { XIcon } from '@site/src/icons';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import ThemedImage from '@theme/ThemedImage';
 
-
-
-function MyButton(){
-  return (
-    <button>
-      Some text here
-    </button>
-  );
-}
-
 const products = [
   {
     name: 'Live Video',
@@ -41,48 +31,48 @@ const products = [
     name: 'Features',
     isAccordion: true,
     content: [
-    {
-      name: "Plugins",
-      href: 'https://dyte.io/features/plugin'
-    },
-    {
-      name: 'Breakout Rooms',
-      href: 'https://dyte.io/features/breakout-rooms'
-    },
-    {
-      name: 'Recording',
-      href: 'https://dyte.io/features/recording'
-    },
-    {
-      name: 'UI Kit',
-      href: 'https://dyte.io/features/ui-kit'
-    },
-    {
-      name: 'DevEx',
-      href: 'https://dyte.io/features/devex'
-    },
-    {
-      name: 'Security',
-      href: 'https://dyte.io/features/security'
-    },
-    {
-      name: 'AI',
-      href: 'https://dyte.io/features/dyte-ai'
-    },
-    {
-      name: 'Streaming',
-      href: 'https://dyte.io/features/streaming'
-    },
-    {
-      name: 'UX',
-      href: 'https://dyte.io/features/ux'
-    },
-    {
-      name: 'Interatcive',
-      href: 'https://dyte.io/features/interactive'
-    }
-    ]
-  }
+      {
+        name: 'Plugins',
+        href: 'https://dyte.io/features/plugin',
+      },
+      {
+        name: 'Breakout Rooms',
+        href: 'https://dyte.io/features/breakout-rooms',
+      },
+      {
+        name: 'Recording',
+        href: 'https://dyte.io/features/recording',
+      },
+      {
+        name: 'UI Kit',
+        href: 'https://dyte.io/features/ui-kit',
+      },
+      {
+        name: 'DevEx',
+        href: 'https://dyte.io/features/devex',
+      },
+      {
+        name: 'Security',
+        href: 'https://dyte.io/features/security',
+      },
+      {
+        name: 'AI',
+        href: 'https://dyte.io/features/dyte-ai',
+      },
+      {
+        name: 'Streaming',
+        href: 'https://dyte.io/features/streaming',
+      },
+      {
+        name: 'UX',
+        href: 'https://dyte.io/features/ux',
+      },
+      {
+        name: 'Interatcive',
+        href: 'https://dyte.io/features/interactive',
+      },
+    ],
+  },
 ];
 
 const developers = [
@@ -110,33 +100,32 @@ const developers = [
     name: 'Platform',
     isAccordion: true,
     content: [
-      
       {
         name: 'Flutter',
-        href: 'https://dyte.io/flutter-video-sdk'
+        href: 'https://dyte.io/flutter-video-sdk',
       },
       {
         name: 'Android',
-        href: 'https://dyte.io/android-video-sdk'
+        href: 'https://dyte.io/android-video-sdk',
       },
       {
         name: 'iOS',
-        href: 'https://dyte.io/ios-video-sdk'
+        href: 'https://dyte.io/ios-video-sdk',
       },
       {
         name: 'React',
-        href: 'https://dyte.io/react-video-sdk'
+        href: 'https://dyte.io/react-video-sdk',
       },
       {
         name: 'React Native',
-        href: 'https://dyte.io/react-native-video-sdk'
-      }
-      ]
+        href: 'https://dyte.io/react-native-video-sdk',
+      },
+    ],
   },
   {
     name: 'Migrate from Twilio',
-    href: 'https://dyte.io/blog/migrate-twilio-video-dyte-shim/'
-  }
+    href: 'https://dyte.io/blog/migrate-twilio-video-dyte-shim/',
+  },
 ];
 
 const usecases = [
@@ -147,23 +136,23 @@ const usecases = [
   { name: 'Social', href: 'https://dyte.io/use-cases/social' },
   { name: 'Gaming', href: 'https://dyte.io/use-cases/gaming' },
   { name: 'Events', href: 'https://dyte.io/use-cases/events' },
-  {name: 'Dating', href: "https://dyte.io/use-cases/dating"}
+  { name: 'Dating', href: 'https://dyte.io/use-cases/dating' },
 ];
 
 const company = [
   { name: 'About Us', href: 'https://dyte.io/about' },
-  {name: 'Customers', href: 'https://dyte.io/customers'},
+  { name: 'Customers', href: 'https://dyte.io/customers' },
   { name: 'Blog', href: 'https://dyte.io/blog' },
   { name: 'Careers', href: 'https://jobs.lever.co/dyte-io' },
   { name: 'Community', href: 'https://dyte.io/community' },
   { name: 'Startup Program', href: 'https://dyte.io/startups' },
   { name: 'Contact Us', href: 'https://dyte.io/contact' },
   { name: 'FAQ', href: '/faq' },
-  {name: 'Guide on Video SDK', href: 'https://dyte.io/blog/video-sdk/'}
+  { name: 'Guide on Video SDK', href: 'https://dyte.io/blog/video-sdk/' },
 ];
 
 const comparisons = [
-  {name: 'Dyte vs Raw WebRTC', href: 'https://dyte.io/webrtc-alternative'},
+  { name: 'Dyte vs Raw WebRTC', href: 'https://dyte.io/webrtc-alternative' },
   { name: 'Dyte vs Agora', href: 'https://dyte.io/agora-competitor' },
   { name: 'Dyte vs Zoom', href: 'https://dyte.io/zoom-sdk-competitor' },
   { name: 'Dyte vs Twilio', href: 'https://dyte.io/twilio-video-competitor' },
@@ -174,73 +163,73 @@ const comparisons = [
     content: [
       {
         name: 'Zoom vs Agora',
-        href: 'https://dyte.io/zoom-vs-agora'
+        href: 'https://dyte.io/zoom-vs-agora',
       },
       {
         name: 'Agora vs Twilio',
-        href: 'https://dyte.io/agora-vs-twilio'
+        href: 'https://dyte.io/agora-vs-twilio',
       },
       {
         name: 'Zoom vs Twilio',
-        href: 'https://dyte.io/zoom-vs-twilio'
+        href: 'https://dyte.io/zoom-vs-twilio',
       },
       {
         name: 'Agora vs Mux',
-        href: 'https://dyte.io/agora-vs-mux'
+        href: 'https://dyte.io/agora-vs-mux',
       },
       {
         name: 'Zoom vs Whereby',
-        href: 'https://dyte.io/zoom-vs-whereby'
+        href: 'https://dyte.io/zoom-vs-whereby',
       },
       {
         name: 'Tokbox vs Twilio',
-        href: 'https://dyte.io/tokbox-vs-twilio'
+        href: 'https://dyte.io/tokbox-vs-twilio',
       },
       {
         name: 'Tokbox vs Agora',
-        href: 'https://dyte.io/tokbox-vs-agora'
+        href: 'https://dyte.io/tokbox-vs-agora',
       },
       {
         name: 'AWS Chime vs Twilio',
-        href: 'https://dyte.io/aws-chime-vs-twilio'
+        href: 'https://dyte.io/aws-chime-vs-twilio',
       },
       {
         name: 'Tokbox vs Jitsi',
-        href: 'https://dyte.io/tokbox-vs-jitsi'
+        href: 'https://dyte.io/tokbox-vs-jitsi',
       },
       {
         name: 'Zoom vs Jitsi',
-        href: 'https://dyte.io/zoom-vs-jitsi'
+        href: 'https://dyte.io/zoom-vs-jitsi',
       },
       {
         name: 'Agora vs Jitsi',
-        href: 'https://dyte.io/agora-vs-jitsi'
+        href: 'https://dyte.io/agora-vs-jitsi',
       },
       {
         name: 'Whereby vs Jitsi',
-        href: 'https://dyte.io/whereby-vs-jitsi'
+        href: 'https://dyte.io/whereby-vs-jitsi',
       },
       {
         name: 'Livekit vs Jitsi',
-        href: 'https://dyte.io/livekit-vs-jitsi'
+        href: 'https://dyte.io/livekit-vs-jitsi',
       },
       {
         name: '100ms vs Agora',
-        href: 'https://dyte.io/100ms-vs-agora'
+        href: 'https://dyte.io/100ms-vs-agora',
       },
       {
         name: 'Twilio Video Alternatives',
-        href: 'https://dyte.io/blog/twilio-video-alternatives/'
-      }
-    ]
-  }
+        href: 'https://dyte.io/blog/twilio-video-alternatives/',
+      },
+    ],
+  },
 ];
 
 function Safety({ className }) {
   return (
-    <div 
+    <div
       className={clsx(
-        'flex h-24 pr-4 max-w-[418px] overflow-clip rounded-2xl bg-white dark:bg-[#474747]', 
+        'flex max-w-[418px] flex-row overflow-clip rounded-2xl bg-white dark:bg-[#474747] sm:flex-col sm:pr-0 sm:pb-8 lg:flex-row lg:pr-16 lg:pb-0',
         className
       )}
     >
@@ -252,8 +241,11 @@ function Safety({ className }) {
       <div className="flex flex-1 items-center justify-around px-6">
         <img src="/img/soc-compliant-1.png" alt="SOC Compliant" />
         <img src="/img/vector.png" alt="HIPAA Compliant" />
-        <img style={{width: '62px'}} src="/img/gdpr_docs.png" alt="GDPR compliant" />
-       
+        <img
+          style={{ width: '62px' }}
+          src="/img/gdpr_docs.png"
+          alt="GDPR compliant"
+        />
       </div>
     </div>
   );
@@ -300,16 +292,14 @@ function Status({ className }) {
   );
 }
 
-
-
-
 function Links({ name, links, isAccordion }) {
-
   //To control accordion in footer
   const [activeAccordion, setActiveAccordion] = useState(null);
 
   const toggleAccordion = (href) => {
-    setActiveAccordion(prevAccordion => prevAccordion === href ? null : href);
+    setActiveAccordion((prevAccordion) =>
+      prevAccordion === href ? null : href
+    );
   };
 
   return (
@@ -322,38 +312,43 @@ function Links({ name, links, isAccordion }) {
           <Link
             href={href}
             className="text-base text-gray-700 hover:text-primary hover:no-underline dark:text-[#f9f9f9]"
-            onClick={() => isAccordion ? toggleAccordion(href) : null}
+            onClick={() => (isAccordion ? toggleAccordion(href) : null)}
           >
             {name}
             {isAccordion && activeAccordion === href && (
-            <ul style={{paddingLeft: '1rem', listStyle: 'unset'}}>
-              
-              {content.map((item, index) => (
-                <li key={index}>
-                  <Link href={item.href} className="text-base text-gray-700 hover:text-primary hover:no-underline dark:text-[#f9f9f9]">
-                    {item.name}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          )}
-          </Link> 
+              <ul style={{ paddingLeft: '1rem', listStyle: 'unset' }}>
+                {content.map((item, index) => (
+                  <li key={index}>
+                    <Link
+                      href={item.href}
+                      className="text-base text-gray-700 hover:text-primary hover:no-underline dark:text-[#f9f9f9]"
+                    >
+                      {item.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </Link>
         ))}
       </div>
-      
     </div>
   );
 }
 
 export default function Footer() {
   return (
-    <footer className="bg-[#F4F7FF] dark:bg-[#191919]"> 
+    <footer className="bg-[#F4F7FF] dark:bg-[#191919]">
       <div className="mx-auto flex w-full max-w-[1080px] flex-col px-6 py-12">
         <div className="mb-12 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-          <ThemedImage  alt="Dyte" className="h-9 w-fit lg:h-12" sources={{
-    light: '/logo/dyte.svg',
-    dark: '/logo/dyte_dark_logo.svg',
-  }} />
+          <ThemedImage
+            alt="Dyte"
+            className="h-9 w-fit lg:h-12"
+            sources={{
+              light: '/logo/dyte.svg',
+              dark: '/logo/dyte_dark_logo.svg',
+            }}
+          />
 
           <Safety className="hidden lg:flex" />
           <BrowserOnly>
@@ -364,12 +359,11 @@ export default function Footer() {
         </div>
 
         <div className="grid grid-cols-2 gap-6 gap-y-12 md:justify-between lg:flex lg:flex-wrap">
-          <Links name="Product" links={products} />          
+          <Links name="Product" links={products} />
           <Links name="Developers" links={developers} />
           <Links name="Usecases" links={usecases} />
           <Links name="Company" links={company} />
           <Links name="Compare" links={comparisons} />
-          
         </div>
 
         <hr className="my-12 !bg-gray-300 dark:!bg-[#999]" />
@@ -385,21 +379,21 @@ export default function Footer() {
           <div className="flex flex-wrap gap-2 text-sm text-gray-500">
             <Link
               href="https://dyte.io/privacy-policy"
-              className="text-inherit hover:text-black hover:underline dark:hover:text-[#2160fd] dark:text-[#999]"
+              className="text-inherit hover:text-black hover:underline dark:text-[#999] dark:hover:text-[#2160fd]"
             >
               Privacy Policy
             </Link>
             &bull;
             <Link
               href="https://dyte.io/terms-of-service"
-              className="text-inherit hover:text-black hover:underline dark:hover:text-[#2160fd] dark:text-[#999]"
+              className="text-inherit hover:text-black hover:underline dark:text-[#999] dark:hover:text-[#2160fd]"
             >
               Terms of Service
             </Link>
             &bull;
             <Link
               href="https://dyte.io/website-terms-of-use"
-              className="text-inherit hover:text-black hover:underline dark:hover:text-[#2160fd] dark:text-[#999]"
+              className="text-inherit hover:text-black hover:underline dark:text-[#999] dark:hover:text-[#2160fd]"
             >
               Website Terms of Use
             </Link>