Add promo to landing page

Author: Eroxl

web/src/components/home/Info.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import LaptopScreen from './LaptopScreen';
+import Image from 'next/image';
+
+import LabReport from '../../public/promo/Lab-Report-Example.png';
+import ShareExample from '../../public/promo/Share-Example.png';
+
+const Info = () => (
+  <div className="max-w-4xl mx-auto">
+    <p className="flex flex-col items-center m-8 mx-auto text-6xl font-bold text-center">
+      Collaborate
+    </p>
+    <p className="my-8 text-2xl font-bold">
+      Collaborate effortlessly with Note Rack and work together with classmates.
+      No more endless scrolling through handwritten notes or spending
+      hours trying to find the right information.
+    </p>
+
+    <div className="flex w-full mx-8 my-24">
+      <div className="w-1/2">
+        <p className="text-4xl font-bold">
+          Share
+        </p>
+        <p className="my-2 text-lg font-bold">
+          Share your notes with ease using Note Rack
+          <br/>
+          and collaborate seamlessly with your classmates.
+        </p>
+      </div>
+      <div className="flex items-center justify-center w-1/2 h-full">
+        <div className="relative flex">
+          <LaptopScreen>
+            <Image
+              src={LabReport}
+              className="rounded-md aspect-square"
+              height={300}
+              width={300}
+            />
+          </LaptopScreen>
+          <div className="absolute bottom-0 right-0 translate-x-[20%] translate-y-[20%]">
+            <LaptopScreen>
+              <Image
+                src={ShareExample}
+                width={177}
+                height={137}
+              />
+            </LaptopScreen>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default Info;

web/src/components/home/Intro.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import LaptopScreen from './LaptopScreen';
 import Image from 'next/image';
 
-import NotesExample from '../../public/Notes-Example.png';
+import NotesExample from '../../public/promo/Notes-Example.png';
 
 const Intro = () => (
   <div className="mt-12">

web/src/pages/index.tsx

@@ -5,6 +5,7 @@ import Session from 'supertokens-auth-react/recipe/session';
 
 import NavBar from '../components/home/NavBar';
 import Intro from '../components/home/Intro';
+import Info from '../components/home/Info';
 
 const Home: NextPage = () => {
   // TODO:EROXL: (2023-01-24) This should be done server side when the request is made
@@ -29,6 +30,8 @@ const Home: NextPage = () => {
       <NavBar />
 
       <Intro />
+
+      <Info />
     </div>
   );
 };