Add hero section when logged out

pbteja1998 · pbteja1998 · commit c1458102f5a2 · 2021-02-18T20:07:10.000+05:30
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -0,0 +1,40 @@
+import { signIn } from 'next-auth/client'
+import { A } from '@/components'
+
+export default function Hero() {
+  return (
+    <div className="relative bg-gray-50 overflow-hidden ">
+      <div className="mx-auto max-w-7xl px-4 py-16">
+        <div className="text-center">
+          <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
+            <span className="block text-indigo-600 xl:inline">Coderplex </span>
+            <span className="block xl:inline">Community</span>
+          </h1>
+          <p className="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Reprehenderit nam voluptatibus placeat perspiciatis porro laborum
+            cum explicabo dolore quae.
+          </p>
+          <div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
+            <div className="rounded-md shadow">
+              <button
+                onClick={() => signIn('github')}
+                className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"
+              >
+                Join Community
+              </button>
+            </div>
+            <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
+              <A
+                href="https://chat.coderplex.org"
+                className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
+              >
+                Join Discord
+              </A>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/HomePageFeed.tsx b/src/components/HomePageFeed.tsx
@@ -10,23 +10,25 @@ import {
 } from 'phosphor-react'
 import { HomePageFeedUpdateType } from 'src/pages'
 import { DateTime } from 'luxon'
-import { Markdown, A } from '@/components'
 import { useMutation, useQuery } from 'react-query'
 import classNames from 'classnames'
 import { useEffect, useReducer, useState } from 'react'
 import { signIn, useSession } from 'next-auth/client'
+import { User } from 'src/pages/members'
+import useFollowUser from './profile/useFollowUser'
 import {
+  Markdown,
+  A,
+  Hero,
+  AppNavBar,
+  AppFooter,
   NewComment,
   NewGoal,
   NewUpdate,
   UpdateComment,
   UpdateComments,
   UpdateCommentsList,
-} from './goals'
-import { User } from 'src/pages/members'
-import AppNavBar from './AppNavBar'
-import AppFooter from './AppFooter'
-import useFollowUser from './profile/useFollowUser'
+} from '@/components'
 
 type LikeData = {
   count: number
@@ -228,6 +230,7 @@ export default function HomePageFeed({
       <header className="bg-white shadow-sm sticky top-0 z-10">
         <AppNavBar />
       </header>
+      {!session && <Hero />}
       <div className="py-10 flex-1">
         <div className="max-w-3xl mx-auto sm:px-6 lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-12 lg:gap-8">
           <div className="hidden lg:block lg:col-span-3 xl:col-span-2">
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -9,3 +9,4 @@ export * from './profile'
 export * from './goals'
 export { default as Markdown } from './Markdown'
 export { default as HomePageFeed } from './HomePageFeed'
+export { default as Hero } from './Hero'
