some clean

Signed-off-by: TuvalSimha <tuval.simha@gmail.com>

Author: TuvalSimha

src/components/Conf/Button/index.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+
+interface Props {
+  text: React.ReactNode
+  className?: string
+  href?: string
+}
+
+const ButtonConf = ({ text, href, className }: Props) => {
+  return (
+    <button
+      className={
+        className ??
+        "no-underline inline-flex text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-600 rounded text-lg "
+      }
+    >
+      <a className="cursor-pointer no-underline hover:no-underline" href={href}>
+        {text}
+      </a>
+    </button>
+  )
+}
+
+export default ButtonConf

src/components/Conf/Footer/index.tsx

@@ -1,37 +1,26 @@
 import React from "react"
-import Link from "../../Link"
+import SocialIcons from "../SocialIcons"
 
-interface LinkItem {
-  text: string
-  href: string
-  icon?: string
-}
-
-interface FooterLinks {
-  text?: string
-  href?: string
-  subsections: LinkItem[]
-}
-
-const getLinks = (): FooterLinks[] => [
+const links = [
   {
-    subsections: [
+    category: "GraphQLConf",
+    links: [
       { text: "GraphQLConf", href: "/" },
       { text: "Speakers", href: "/#speakers" },
       { text: "Venue", href: "/#venue" },
     ],
   },
   {
-    subsections: [
-      // TODO: Edit the href link to the correct page
+    category: "Register",
+    links: [
       { text: "Register", href: "/#register" },
       { text: "Speak", href: "/cfp" },
       { text: "Sponsor", href: "/PDF" },
     ],
   },
   {
-    subsections: [
-      // TODO: Edit the href link to the correct page
+    category: "FAQ",
+    links: [
       { text: "FAQ", href: "/faq" },
       { text: "Code of Conduct", href: "/faq#codeofconduct" },
       { text: "Contact Us", href: "/faq#contact" },
@@ -41,42 +30,50 @@ const getLinks = (): FooterLinks[] => [
 
 const FooterConf = () => {
   return (
-    <div>
-      <footer>
-        <section className="sitemap">
-          {getLinks().map((section, i) => (
-            <div key={i}>
-              <h5>
-                {section.href ? (
-                  <Link href={section.href}>{section.text}</Link>
-                ) : (
-                  <span>{section.text}</span>
-                )}
-              </h5>
-              {section.subsections.map((subsection: any, i) => (
-                <Link key={i} href={subsection.href}>
-                  {subsection.icon && <img src={subsection.icon} />}
-                  {subsection.text}
-                </Link>
-              ))}
+    <footer className="text-gray-600 body-font">
+      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
+        <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
+          <a className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
+            <img src="/img/graphql-conf-logo.svg" className="w-[200px]" />
+          </a>
+        </div>
+        <div className="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
+          {links.map((link, i) => (
+            <div key={i} className="lg:w-1/4 md:w-1/2 w-full px-4">
+              <nav className="list-none mb-20 ">
+                {link.links.map((link, i) => (
+                  <li key={i}>
+                    <a className="text-white font-semibold text-base hover:text-white hover:font-semibold cursor-pointer">
+                      {link.text}
+                    </a>
+                  </li>
+                ))}
+              </nav>
             </div>
           ))}
-
-          <img src="/img/conf/footer.png" height={150} />
-        </section>
-        <section className="copyright">
-          Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation.
-          All rights reserved.
-          <br />
-          For web site terms of use, trademark policy and general project
-          policies please see&nbsp;
-          <a href="https://lfprojects.org" target="_blank">
-            https://lfprojects.org
-          </a>
-          .
-        </section>
-      </footer>
-    </div>
+        </div>
+      </div>
+      <div className="bg-[#862e69]">
+        <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
+          <p className="text-white text-sm text-center sm:text-left">
+            <section>
+              Copyright © {`${new Date().getFullYear()}`} The GraphQL
+              Foundation. All rights reserved.
+              <br />
+              For web site terms of use, trademark policy and general project
+              policies please see&nbsp;
+              <a href="https://lfprojects.org" target="_blank">
+                https://lfprojects.org
+              </a>
+              .
+            </section>
+          </p>
+          <span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start ">
+            <SocialIcons />
+          </span>
+        </div>
+      </div>
+    </footer>
   )
 }
 

src/components/Conf/Header/index.tsx

@@ -1,7 +1,5 @@
 import React from "react"
-import Logo from "../../Logo"
-import Search from "../../Search"
-import Link from "../../Link"
+import ButtonConf from "../Button"
 
 interface LinkItem {
   section: string
@@ -32,28 +30,34 @@ const links: LinkItem[] = [
   },
 ]
 
+const classes = {
+  button:
+    "inline-flex text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-600 rounded text-lg",
+  background: "bg-[#862e69]",
+}
+
 const HeaderConf = () => {
   return (
-    <header>
-      <section>
-        <Link className="conf-header" href="/">
-          <img
-            src="/img/conf/logo-color.png"
-            alt="GraphQL Conf Logo"
-            style={{ height: "50px", width: "auto" }}
-          />
-        </Link>
-        <nav>
-          <input type="checkbox" id="menubox" aria-label="Menu" />
-          <div>
-            {links.map((link, i) => (
-              <Link key={i} href={link.href}>
-                {link.text}
-              </Link>
-            ))}
-          </div>
+    <header className={classes.background}>
+      <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
+        <nav className="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
+          {links.map((link, i) => (
+            <a
+              className="mr-5 text-white font-normal hover:font-extrabold hover:text-white"
+              key={i}
+              href={link.href}
+            >
+              {link.text}
+            </a>
+          ))}
         </nav>
-      </section>
+        <a className="flex order-first lg:order-none lg:w-1/5 title-font font-medium items-center lg:items-center lg:justify-center mb-4 md:mb-0">
+          <img src="/img/graphql-conf-logo.svg" className="w-[150px]" />
+        </a>
+        <div className="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
+          <ButtonConf text="REGISTER NOW" href="/" />
+        </div>
+      </div>
     </header>
   )
 }

src/components/Conf/Layout/index.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+
+import "../../../assets/css/style.less"
+
+interface Props {
+  children: React.ReactNode
+  className?: string
+}
+const LayoutConf = ({ children, className }: Props): JSX.Element => (
+  <>
+    <div className={className}>{children}</div>
+  </>
+)
+
+export default LayoutConf

src/components/Conf/SocialIcons/index.tsx

@@ -0,0 +1,65 @@
+import React from "react"
+
+const SocialIcons = () => {
+  return (
+    <>
+      <a className="ml-5 mt-3 text-white cursor-pointer" href="/">
+        <svg
+          fill="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          className="w-5 h-5"
+          viewBox="0 0 24 24"
+        >
+          <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+        </svg>
+      </a>
+      <a className="ml-5 mt-3 text-white cursor-pointer" href="/">
+        <svg
+          fill="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          className="w-5 h-5"
+          viewBox="0 0 24 24"
+        >
+          <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+        </svg>
+      </a>
+      <a className="ml-5 mt-3 text-white cursor-pointer" href="/">
+        <svg
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          className="w-5 h-5"
+          viewBox="0 0 24 24"
+        >
+          <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+          <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
+        </svg>
+      </a>
+      <a className="ml-5 mt-3 text-white cursor-pointer" href="/">
+        <svg
+          fill="currentColor"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="0"
+          className="w-5 h-5"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke="none"
+            d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
+          ></path>
+          <circle cx="4" cy="4" r="2" stroke="none"></circle>
+        </svg>
+      </a>
+    </>
+  )
+}
+
+export default SocialIcons

src/pages/conf/index.tsx

@@ -4,15 +4,13 @@ import FooterConf from "../../components/Conf/Footer"
 import HeaderConf from "../../components/Conf/Header"
 import "../../assets/css/style.less"
 import "../../assets/css/global.css"
-
-const classes = {
-  button:
-    "inline-flex text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-600 rounded text-lg",
-}
+import LayoutConf from "../../components/Conf/Layout"
+import ButtonConf from "../../components/Conf/Button"
 
 export default () => {
   return (
-    <>
+    <LayoutConf>
+      <HeaderConf />
       <div className="text-gray-600 body-font bg-[url('/img/bg-graphql-conf.png')]">
         <div className="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
           <div className="flex flex-col items-center lg:w-2/3 w-full">
@@ -25,14 +23,14 @@ export default () => {
             </h2>
             <p className="mb-8 leading-relaxed text-white">#GRAPHQLCONF</p>
             <div className="flex justify-center gap-4">
-              <button className={classes.button}>REGISTER NOW</button>
-              <button className={classes.button}>SUBMIT TO SPEAK</button>
+              <ButtonConf text="JOIN AS A SPONSOR" href="/" />
+              <ButtonConf text="SUBMIT TO SPEAK" href="/" />
             </div>
           </div>
         </div>
       </div>
       <FooterConf />
-    </>
+    </LayoutConf>
   )
 }