Merge pull request #72 from AndyOooh/ED1-53-convert-landing-to-SSG

Ed1 53 convert landing to ssg

.github/workflows/push-any-build.yaml

@@ -26,9 +26,9 @@ jobs:
           # yarn workspaces foreach --verbose --since --no-private info
           # yarn workspaces info
           # yarn workspaces foreach install
-          # turbo run lint --filter="...[HEAD^1]"
-          # turbo run build --filter="...[HEAD^1]"
-          turbo run lint
+          turbo run lint --filter="...[HEAD^1]"
+          turbo run build --filter="...[HEAD^1]"
+          # turbo run lint
           # turbo run build 
           # turbo run test --filter=...[origin/main]
 

README.md

@@ -226,6 +226,7 @@ Once you have the development servers running, you can access the:
 - [x] User profiles - edit, delete, view.
 - [x] Event creation - create, edit, delete, view.
 - [x] Event feed.
+- [x] Optimize SSG.
 - [ ] Contract - create, edit, delete, view.
 - [ ] Contract - sign.
 - [ ] Video upload, storage and viewing.

apps/app/src/firebase/clientApp.ts

@@ -42,6 +42,7 @@ const getCloudFunction = (functionName: string) => {
 };
 
 if (process.env.NEXT_PUBLIC_EMULATORS_ON === 'true' && process.env.NODE_ENV === 'development') {
+  console.log('⚠️  - Emulators are ON!');
   connectAuthEmulator(auth, 'http://localhost:9099');
   connectFirestoreEmulator(db, 'localhost', 8080);
   connectStorageEmulator(storage, 'localhost', 9199);

apps/landing/src/app/about/page.tsx

@@ -0,0 +1,9 @@
+import { ComingSoon } from '../components/ComingSoon';
+
+export default function AboutPage() {
+  return (
+    <div>
+      <ComingSoon pageName='About' />
+    </div>
+  );
+}

apps/landing/src/app/companies copy/companies/page.tsx

@@ -0,0 +1,9 @@
+import { ComingSoon } from '../../components/ComingSoon';
+
+export default function CompaniesPage() {
+  return (
+    <div>
+      <ComingSoon pageName='Companies' />
+    </div>
+  );
+}

apps/landing/src/app/companies copy/page.tsx

@@ -0,0 +1,9 @@
+import { ComingSoon } from '../components/ComingSoon';
+
+export default function CompaniesPage() {
+  return (
+    <div>
+      <ComingSoon pageName='Companies' />
+    </div>
+  );
+}

apps/landing/src/app/companies/page.tsx

@@ -0,0 +1,9 @@
+import { ComingSoon } from '../components/ComingSoon';
+
+export default function CompaniesPage() {
+  return (
+    <div>
+      <ComingSoon pageName='Companies' />
+    </div>
+  );
+}

apps/landing/src/app/components/Benefits.tsx

@@ -7,11 +7,8 @@ type Props = {};
 
 export const Benefits = (props: Props) => {
   return (
-    // <section className='w-5/6 mx-auto my-16 grid grid-cols-2 gap-6'>
-    <section className={`w-5/6 mx-auto my-16 grid grid-cols-2 gap-6 ${container}`}>
+    <section className={`w-5/6 mx-auto my-16 grid md:grid-cols-2 gap-6 ${container}`}>
       {benefits.map(benefit => {
-        // console.log('🚀  file: Benefits.tsx:22  benefit:', benefit)
-        // return <div key={benefit.title}>{benefit.title} </div>;
         return (
           <div key={benefit.title} className=''>
             <ColoredDiv
@@ -20,7 +17,7 @@ export const Benefits = (props: Props) => {
               height={16}
               className='p-8 '>
               <div className='flex flex-col justify-center h-full'>
-                <p className='text-2xl font-bold'>{benefit.title}</p>
+                <p className='md:text-2xl font-bold'>{benefit.title}</p>
                 <p className='text-md max-w-xs'>{benefit.text}</p>
               </div>
             </ColoredDiv>

apps/landing/src/app/components/ComingSoon.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ColoredDiv } from 'ui';
+
+import { container } from '../../styles/styles';
+
+type Props = {
+  pageName: string;
+};
+export const ComingSoon = ({ pageName }: Props) => {
+  return (
+    <section
+      className={`main-height mt-16 flex flex-col justify-center items-center gap-4 ${container}`}>
+      <h1 className='text-5xl'>{pageName}</h1>
+      <h1 className='text-3xl'>Coming Soon..</h1>
+      <div className='grid grid-cols-5 w-3/4'>
+        <ColoredDiv color='pink' direction='top' height={12} width={24} rotateZ={45} />
+        <ColoredDiv color='green' direction='bottom' height={8} width={8} rotateZ={22.5} />
+        <ColoredDiv
+          color='blue'
+          direction='top'
+          height={12}
+          width={12}
+          rotateZ={45}
+          className='rounded-full'
+        />
+        <ColoredDiv color='beige' direction='bottom' height={12} width={12} rotateZ={45} />
+        <ColoredDiv
+          color='black'
+          direction='top'
+          height={12}
+          width={18}
+          rotateZ={90}
+          className='rounded-3xl'
+        />
+        <ColoredDiv color='white' direction='bottom' height={10} width={14} rotateZ={15} />
+        <ColoredDiv color='orange' direction='top' height={16} width={6} rotateZ={90} />
+        <ColoredDiv
+          color='purple'
+          direction='top'
+          height={14}
+          width={8}
+          rotateZ={-35}
+          className='rounded-full'
+        />
+        <ColoredDiv
+          color='red'
+          direction='bottom'
+          height={16}
+          width={12}
+          rotateZ={45}
+          className='rounded-full'
+        />
+        <ColoredDiv
+          color='yellow'
+          direction='bottom'
+          height={14}
+          width={8}
+          rotateZ={45}
+          className='rounded-xl'
+        />
+      </div>
+    </section>
+  );
+};

apps/landing/src/app/components/Hero/HeroLeft.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import { appUrl } from '../../../consts';
 
-type Props = {};
-
-export const HeroLeft = (props: Props) => {
+export const HeroLeft = () => {
   return (
-    <div className=' lg:w-1/2'>
-      <h1 className='text-7xl font-semibold '>
+    <div className='mt-4 md:mt-0 lg:w-1/2'>
+      <h1 className='text-3xl md:text-7xl font-semibold '>
         Hire event
         <br />
         professionals