A bunch of changes from lee!

* Moved all assets into a single dir
* Set up subpages and corrected all links
* Created main page banner
* Minor style edits

Author: leebyron

src/assets/css/_css/conf.less

@@ -42,7 +42,8 @@
     }
   }
   .conf-hero::before {
-    background: url(/img/conf/conf-hero.png) repeat center center;
+    background-color: #562556;
+    background: url(/img/conf/graphql-conf-bg.png) repeat center center;
     content: "";
     display: block;
     height: 100%;
@@ -228,7 +229,7 @@
     }
     .library-howto-expand {
       cursor: pointer;
-      
+
       &.not-expanded {
         background: -webkit-linear-gradient(
           top,

src/assets/css/_css/index.less

@@ -7,6 +7,62 @@ div.index {
     margin-top: 50px;
   }
 
+  // GraphQLConf 2023 - Remove on Oct 1, 2023
+  section.conf-banner {
+    background-color: #562556;
+    background: url("/img/conf/graphql-conf-bg.png") repeat center center;
+    background-size: cover;
+    color: #fff;
+    text-align: center;
+    max-width: none;
+    margin-top: 30px;
+
+    & > a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 30px;
+      margin: 0 auto;
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      & > div {
+        display: flex;
+        flex-direction: column;
+
+        & > * {
+          margin: 6px 0;
+        }
+      }
+    }
+
+    img {
+      height: 130px;
+      margin: 0 30px;
+    }
+
+    .button {
+      .headline-font(@size: 17px, @color: white);
+      border: solid 1px fadeout(white, 60%);
+      border-radius: 6px;
+      line-height: 1.0;
+      transition: background 0.1s ease-out, color 0.1s ease-out;
+      padding: 0.6em 1.6em;
+      margin: 0 0.8em;
+      display: inline-block;
+      text-decoration: none;
+
+      &:hover, &:focus, &:active {
+        color: @text-color;
+        background: white;
+        text-decoration: none;
+      }
+    }
+  }
+  // End GraphQLConf 2023
+
   header {
     display: none;
     @media screen and (min-width: 1020px) {

src/components/Conf/Button/index.tsx

@@ -11,7 +11,7 @@ const ButtonConf = ({ text, href, className }: Props) => {
     <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 "
+        "transition ease-in-out no-underline inline-flex text-white bg-[--rhodamine] border-0 py-2 px-6 focus:outline-none hover:drop-shadow-lg hover:scale-105 rounded text-lg"
       }
     >
       <a className="cursor-pointer no-underline hover:no-underline" href={href}>

src/components/Conf/Footer/index.tsx

@@ -5,25 +5,25 @@ const links = [
   {
     category: "GraphQLConf",
     links: [
-      { text: "GraphQLConf", href: "/" },
-      { text: "Speakers", href: "/#speakers" },
-      { text: "Venue", href: "/#venue" },
+      { text: "GraphQLConf", href: "/conf/" },
+      { text: "Speakers", href: "/conf/#speakers" },
+      { text: "Venue", href: "/conf/#venue" },
     ],
   },
   {
-    category: "Register",
+    category: "Act now",
     links: [
-      { text: "Register", href: "/#register" },
-      { text: "Speak", href: "/cfp" },
-      { text: "Sponsor", href: "/PDF" },
+      { text: "Register", href: "/conf/#register" },
+      { text: "Speak", href: "/conf/speak" },
+      { text: "Sponsor", href: "/conf/sponsor" },
     ],
   },
   {
     category: "FAQ",
     links: [
       { text: "FAQ", href: "/faq" },
-      { text: "Code of Conduct", href: "/faq#codeofconduct" },
-      { text: "Contact Us", href: "/faq#contact" },
+      { text: "Code of Conduct", href: "/conf/faq/#codeofconduct" },
+      { text: "Contact Us", href: "/conf/faq/#contact" },
     ],
   },
 ]
@@ -33,8 +33,8 @@ const FooterConf = () => {
     <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 href="/conf/" className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
+            <img src="/img/conf/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">

src/components/Conf/Header/index.tsx

@@ -11,28 +11,26 @@ const links: LinkItem[] = [
   {
     section: "Register",
     text: "Register",
-    href: "/#register",
+    href: "/conf/#register",
   },
   {
     section: "Speak",
     text: "Speak",
-    href: "/cfp",
+    href: "/conf/speak/",
   },
   {
     section: "Sponsor",
     text: "Sponsor",
-    href: "/pdf",
+    href: "/conf/sponsor/",
   },
   {
     section: "FAQ",
     text: "FAQ",
-    href: "/faq/",
+    href: "/conf/faq/",
   },
 ]
 
 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]",
 }
 
@@ -51,8 +49,8 @@ const HeaderConf = () => {
             </a>
           ))}
         </nav>
-        <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 href="/conf/" 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/conf/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="/" />

src/pages/conf/faq.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import Seo from "../../components/Seo"
+import FooterConf from "../../components/Conf/Footer"
+import HeaderConf from "../../components/Conf/Header"
+import "../../assets/css/style.less"
+import "../../assets/css/global.css"
+import LayoutConf from "../../components/Conf/Layout"
+
+export default () => {
+  return (
+    <LayoutConf>
+      <HeaderConf />
+      <h1>FAQ</h1>
+      <FooterConf />
+    </LayoutConf>
+  )
+}
+
+export function Head() {
+  return <Seo title="GraphQLConf 2023 FAQ Frequently Asked Questions" />
+}

src/pages/conf/index.tsx

@@ -11,20 +11,19 @@ export default () => {
   return (
     <LayoutConf>
       <HeaderConf />
-      <div className="text-gray-600 body-font bg-[url('/img/bg-graphql-conf.png')]">
+      <div className="text-gray-600 body-font bg-color-[#562556] bg-[url('/img/conf/graphql-conf-bg.png')] bg-cover">
         <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">
-            <img src="/img/graphql-conf-logo.svg" className="w-[500px] mb-4" />
+            <img src="/img/conf/graphql-conf-logo.svg" className="w-[500px] mb-4" />
             <h1 className="title-font sm:text-4xl text-3xl mb-4 font-extrabold text-white">
               SEPTEMBER 19-21, 2023
             </h1>
             <h2 className="sm:text-2xl text-xl mb-8 text-white leading-relaxed">
               SAN FRANCISCO BAY AREA, CA
             </h2>
-            <p className="mb-8 leading-relaxed text-white">#GRAPHQLCONF</p>
             <div className="flex justify-center gap-4">
-              <ButtonConf text="JOIN AS A SPONSOR" href="/" />
-              <ButtonConf text="SUBMIT TO SPEAK" href="/" />
+              <ButtonConf text="JOIN AS A SPONSOR" href="/sponsor" />
+              <ButtonConf text="SUBMIT TO SPEAK" href="/speak" />
             </div>
           </div>
         </div>
@@ -35,5 +34,5 @@ export default () => {
 }
 
 export function Head() {
-  return <Seo title="GraphQL Conf 2023" />
+  return <Seo title="GraphQLConf 2023 - hosted by the GraphQL Foundation" />
 }

src/pages/conf/speak.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import Seo from "../../components/Seo"
+import FooterConf from "../../components/Conf/Footer"
+import HeaderConf from "../../components/Conf/Header"
+import "../../assets/css/style.less"
+import "../../assets/css/global.css"
+import LayoutConf from "../../components/Conf/Layout"
+import ButtonConf from "../../components/Conf/Button"
+
+export default () => {
+  return (
+    <LayoutConf>
+      <HeaderConf />
+      <h1>Speak at GraphQLConf 2023</h1>
+      <ButtonConf text="SUBMIT TO SPEAK" href="https://sessionize.com/graphqlconf2023/" />
+      <FooterConf />
+    </LayoutConf>
+  )
+}
+
+export function Head() {
+  return <Seo title="Speak at GraphQLConf 2023 - (CFP) Call for proposals" />
+}

src/pages/conf/sponsor.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import Seo from "../../components/Seo"
+import FooterConf from "../../components/Conf/Footer"
+import HeaderConf from "../../components/Conf/Header"
+import "../../assets/css/style.less"
+import "../../assets/css/global.css"
+import LayoutConf from "../../components/Conf/Layout"
+import ButtonConf from "../../components/Conf/Button"
+
+export default () => {
+  return (
+    <LayoutConf>
+      <HeaderConf />
+      <h1>Sponsor GraphQLConf 2023</h1>
+      <ButtonConf text="SPONSORSHIP PROSPECTUS" href="https://events.linuxfoundation.org/sponsor-graphqlconf-23" />
+      <ButtonConf text="REQUEST A CONTRACT" href="https://na3.docusign.net/Member/PowerFormSigning.aspx?PowerFormId=ba1e05a3-244d-4c94-9b3a-fd769966e479&env=na3&acct=f30e10ec-fea1-4dd8-a262-384a61edabb5&v=2" />
+      <FooterConf />
+    </LayoutConf>
+  )
+}
+
+export function Head() {
+  return <Seo title="Sponsor GraphQLConf 2023 - hosted by the GraphQL Foundation" />
+}

src/pages/index.tsx

@@ -14,8 +14,20 @@ import Seo from "../components/Seo"
 
 export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => {
   return (
-    <Layout className={"index"} pageContext={pageContext}>
+    <Layout className="index" pageContext={pageContext}>
       <Hero />
+      <section className="conf-banner">
+        <a href="/conf/">
+          <img src="/img/conf/graphql-conf-logo.svg" />
+          <div>
+            <span>The offical GraphQL conference by the GraphQL Foundation.</span>
+            <i>SEPTEMBER 19-21, 2023 • SAN FRANCISO BAY AREA, CA</i>
+            <div>
+              <a className="button" href="/conf/">Register Now!</a>
+            </div>
+          </div>
+        </a>
+      </section>
       <section className="lead">
         <h1>A query language for your API</h1>
         <p>