GitHub

src/components/Footer.tsx

@@ -3,9 +3,24 @@ import Link from "next/link";
 
 const navigation = {
   legal: [
-    {name: 'Privacy Policy', href: '/privacy-policy'},
-    {name: 'Terms & Conditions', href: '/terms-of-service'},
+    {name: 'Privacy Policy', href: '#'},
+    {name: 'Terms & Conditions', href: '#'},
   ],
+  social: [
+    {
+      name: 'GitHub',
+      href: 'https://github.com/SoraWebui/SoraWebui',
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    }
+  ]
 }
 
 export default function Footer({
@@ -18,15 +33,31 @@ export default function Footer({
       </h2>
       <div className="mx-auto max-w-7xl px-6 py-4">
         <div className="xl:grid xl:grid-cols-3 xl:gap-8">
-          <a href={`/${locale}`}>
-            <Image
-              className="h-10"
-              src="/appicon.svg"
-              width={32}
-              height={32}
-              alt="Sorawebui.com"
-            />
-          </a>
+          <div className="space-y-8">
+            <a href={`/${locale}`}>
+              <Image
+                className="h-10"
+                src="/appicon.svg"
+                width={32}
+                height={32}
+                alt="Sorawebui.com"
+              />
+            </a>
+            <p className="text-sm leading-6 text-gray-300">
+              A browser interface for OpenAI Sora, generate text-to-video simply.
+            </p>
+            <p className="text-sm leading-6 text-gray-300">
+              Copyright © 2024 - All rights reserved.
+            </p>
+            <div className="flex space-x-6">
+              {navigation.social.map((item) => (
+                <a key={item.name} href={item.href} className="text-gray-500 hover:text-gray-400">
+                  <span className="sr-only">{item.name}</span>
+                  <item.icon className="h-6 w-6" aria-hidden="true"/>
+                </a>
+              ))}
+            </div>
+          </div>
           <div className="mt-2 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>
@@ -38,6 +69,7 @@ export default function Footer({
               <div className="mt-10 md:mt-0">
                 <h3 className="text-sm font-semibold leading-6 text-white"></h3>
                 <ul role="list" className="mt-6 space-y-4">
+
                 </ul>
               </div>
             </div>
@@ -48,23 +80,23 @@ export default function Footer({
                 </ul>
               </div>
               <div className="mt-10 md:mt-0">
-                <h3 className="text-sm font-semibold leading-6 text-white"></h3>
+                <h3 className="text-sm font-semibold leading-6 text-white">Legal</h3>
                 <ul role="list" className="mt-6 space-y-4">
-                  {/*{navigation.legal.map((item) => {*/}
-                  {/*    let hrefTo = `/${locale}${item.href}`;*/}
-                  {/*    if (locale == 'en') {*/}
-                  {/*      hrefTo = `${item.href}`;*/}
-                  {/*    }*/}
-                  {/*    return (*/}
-                  {/*      <li key={item.name}>*/}
-                  {/*        <Link href={`${hrefTo}`}*/}
-                  {/*              className="text-sm leading-6 text-gray-300 hover:text-[#2d6ae0]">*/}
-                  {/*          {item.name}*/}
-                  {/*        </Link>*/}
-                  {/*      </li>*/}
-                  {/*    )*/}
-                  {/*  }*/}
-                  {/*)}*/}
+                  {navigation.legal.map((item) => {
+                      let hrefTo = `/${locale}${item.href}`;
+                      if (locale == 'en') {
+                        hrefTo = `${item.href}`;
+                      }
+                      return (
+                        <li key={item.name}>
+                          <Link href={`${hrefTo}`}
+                                className="text-sm leading-6 text-gray-300 hover:text-[#2d6ae0]">
+                            {item.name}
+                          </Link>
+                        </li>
+                      )
+                    }
+                  )}
                 </ul>
               </div>
             </div>