feat(web): create second section on landing page, and add cards to it

apps/web/app/components/info-card.tsx

@@ -0,0 +1,25 @@
+
+import { Card, CardContent } from '@/components/ui/card'
+import { LucideIcon } from 'lucide-react';
+import React from 'react'
+
+type InfoCard = {
+  icon: LucideIcon;
+  content: string;
+}
+
+export const InfoCard: React.FC<InfoCard> = ({icon, content}) => {
+  const Icon = icon
+  return (
+    <Card className="w-2/5">
+      <CardContent className="flex flex-row items-center gap-4 p-5">
+        <div className="border-slate-6 flex h-14 w-[4.25rem] items-center justify-center rounded-2xl border bg-gradient-to-b from-white/[3%] to-violet-500/10 transition duration-200 ease-in-out">
+          <Icon size={26} />
+        </div>
+        <div className="">
+          {content}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

apps/web/app/layout.tsx

@@ -23,7 +23,7 @@ export default function RootLayout({
         <Image
           src="/light-ray.svg"
           alt="Purple light ray"
-          width="1600"
+          width="1000"
           height="800"
           className="animate-in fade-in slide-in-from-bottom-1 absolute -z-10"
           style={{ color: "transparent", animationDuration: "10s" }}

apps/web/app/page.tsx

@@ -1,47 +1,70 @@
 import React from "react";
 import Link from "next/link";
-import { ChevronRight } from "lucide-react";
+import { ChevronRight, Dumbbell, Heart, MessageCircle, PiggyBank } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { InfoCard } from "./components/info-card";
+
+const infoCardContent = [
+  {
+    icon: MessageCircle,
+    content: 'The most effective way to improve your English is through speaking.'
+  },
+  {
+    icon: Dumbbell,
+    content: 'Enhance your English skills quickly by practicing a little every day.'
+  },
+  {
+    icon: Heart,
+    content: 'Show respect, patience, and kindness to everyone.'
+  },
+  {
+    icon: PiggyBank,
+    content: "And best of all, it's completely free."
+  }
+]
 
 export default function Page(): JSX.Element {
   return (
-    <main className="flex h-full flex-col">
-      <div>
-        <div className="flex w-full flex-row">
-          <div className="flex">
-            <video
-              className="-z-20 w-full max-w-5xl"
-              style={{
-                display: "block",
-                width: "700px",
-                height: "500px",
-              }}
-              playsInline
-              loop={true}
-              autoPlay={true}
-              muted={true}
-              src="/earth.mp4"
-            ></video>
-          </div>
-          <div className="z-10 mt-16 w-full p-10">
-            <h2 className="w-full text-center text-[3rem] leading-10 text-gray-300">
-              Practice english for free
-            </h2>
-            <h3 className="my-4 text-center text-[1rem] text-slate-400 antialiased">
-              The quickest path to learning English is by speaking it regularly. Just find someone to chat with.
-            </h3>
-            <div className="flex w-full justify-center">
-              <Link href={`room/queue`}>
-                <Button className="h-12 min-w-max rounded-full text-base font-semibold text-black">
-                  Get Started
-                  <ChevronRight size={16} />
-                </Button>
-              </Link>
-            </div>
+    <main className="container flex h-full flex-col">
+      <section className="flex w-full flex-row">
+        <div className="flex">
+          <video
+            className="-z-20 w-full max-w-2xl"
+            style={{
+              display: "block",
+              width: "700px",
+              height: "500px",
+            }}
+            playsInline
+            loop={true}
+            autoPlay={true}
+            muted={true}
+            src="/earth.mp4"
+          ></video>
+        </div>
+        <div className="z-10 mt-16 w-full p-10">
+          <h2 className="w-full text-center text-[3rem] leading-10 text-gray-300">
+            Practice english for free
+          </h2>
+          <h3 className="my-4 text-center text-[1rem] text-slate-400 antialiased">
+            The quickest path to learning English is by speaking it regularly. Just find someone to chat with.
+          </h3>
+          <div className="flex w-full justify-center">
+            <Link href={`room/queue`}>
+              <Button className="h-12 min-w-max rounded-full text-base font-semibold text-black">
+                Get Started
+                <ChevronRight size={16} />
+              </Button>
+            </Link>
           </div>
         </div>
-      </div>
+      </section>
+      <section className="border-slate-6 relative mt-20 flex max-w-5xl flex-col items-center rounded-3xl border-t px-6 py-12 sm:py-24 md:max-w-7xl">
+        <div className="flex w-full flex-wrap items-center justify-center gap-10">
+          {infoCardContent.map((card, i) => <InfoCard icon={card.icon} content={card.content} key={i}/>)}
+        </div>
+      </section>
     </main>
   );
 }