Dima work

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

Author: TuvalSimha

gatsby-config.ts

@@ -11,6 +11,7 @@ const config: GatsbyConfig = {
     typesOutputPath: `src/__generated__/gatsby-types.d.ts`,
   },
   plugins: [
+    "gatsby-plugin-postcss",
     "gatsby-plugin-anchor-links",
     {
       resolve: "gatsby-source-filesystem",

package.json

@@ -43,6 +43,10 @@
   "devDependencies": {
     "@types/codemirror": "5.60.5",
     "@types/prismjs": "1.26.0",
-    "prettier": "2.7.1"
+    "autoprefixer": "^10.4.14",
+    "gatsby-plugin-postcss": "^6.8.0",
+    "postcss": "^8.4.21",
+    "prettier": "2.7.1",
+    "tailwindcss": "^3.3.0"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/assets/css/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/assets/css/style.less

@@ -6,8 +6,6 @@
 @import "_css/codemirror.less";
 @import "_css/algolia.less";
 @import "_css/code.less";
-@import "_css/conf.less";
 @import "_css/faq.less";
 @import "_css/foundation.less";
 @import "_css/brand.less";
-

src/pages/conf/index.tsx

@@ -1,19 +1,34 @@
 import React from "react"
-import Layout from "../../components/Layout"
 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"
+
+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",
+}
 
 export default () => {
   return (
     <>
-      <HeaderConf />
-      <div className="conf-hero">
-        <div className="conf-hero-inner">
-          <h1>GraphQLConf</h1>
-          <p>SEPTEMBER 19-21, 2023</p>
-          <p>SAN FRANCISCO BAY AREA, CA</p>
-          <p>#GRAPHQLCONF</p>
+      <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">
+            <img src="/img/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">
+              <button className={classes.button}>REGISTER NOW</button>
+              <button className={classes.button}>SUBMIT TO SPEAK</button>
+            </div>
+          </div>
         </div>
       </div>
       <FooterConf />