feature: features section + responsive fixes

frontend/app/(home)/Features.tsx

@@ -0,0 +1,74 @@
+import { FC, ReactNode } from "react";
+import PageHeading from "../components/ui/PageHeading";
+import Card from "../components/ui/Card";
+import {
+  GiArtificialIntelligence,
+  GiBrain,
+  GiDatabase,
+  GiFastArrow,
+  GiLockedDoor,
+  GiOpenBook,
+} from "react-icons/gi";
+
+interface FeaturesProps {}
+
+const Features: FC<FeaturesProps> = ({}) => {
+  return (
+    <section className="my-20 text-center flex flex-col items-center justify-center gap-10">
+      <div>
+        <h1 className="text-5xl font-bold ">Features</h1>
+        {/* <h2 className="opacity-50">Change the way you take notes</h2> */}
+      </div>
+      <div className="flex flex-wrap gap-5 justify-center">
+        <Feature
+          icon={<GiBrain className="text-7xl w-full" />}
+          title="Two brains is better than one"
+          desc="Quivr is your second brain in the cloud, designed to easily store and retrieve unstructured information."
+        />
+        <Feature
+          icon={<GiDatabase className="text-7xl w-full" />}
+          title="Store any kind of data"
+          desc="Quivr can handle almost any type of data you throw at it. Text, images, code snippets, we've got you covered."
+        />
+        <Feature
+          icon={<GiArtificialIntelligence className="text-7xl w-full" />}
+          title="Get a Fast and Consistent Brain"
+          desc="Quivr is your second brain in the cloud, designed to easily store and retrieve unstructured information."
+        />
+        <Feature
+          icon={<GiFastArrow className="text-7xl w-full" />}
+          title="Fast and Efficient"
+          desc="Designed with speed and efficiency at its core. Quivr ensures rapid access to your data."
+        />
+        <Feature
+          icon={<GiLockedDoor className="text-7xl w-full" />}
+          title="Secure"
+          desc="Your data, your control. Always."
+        />
+        <Feature
+          icon={<GiOpenBook className="text-7xl w-full" />}
+          title="Open source"
+          desc="Freedom is beautiful, so is Quivr. Open source and free to use."
+        />
+      </div>
+    </section>
+  );
+};
+
+interface FeatureProps {
+  icon?: ReactNode;
+  title: string;
+  desc: string;
+}
+
+const Feature: FC<FeatureProps> = ({ title, desc, icon }) => {
+  return (
+    <Card className="p-10 max-w-xs flex flex-col gap-5 w-full">
+      {icon}
+      <h1 className="text-xl font-bold">{title}</h1>
+      <p>{desc}</p>
+    </Card>
+  );
+};
+
+export default Features;

frontend/app/(home)/Hero.tsx

@@ -24,7 +24,7 @@ const Hero: FC<HeroProps> = ({}) => {
     return "sticky";
   });
 
-  const videoScaleSync = useTransform(scrollYProgress, [0, 0.5], [0.9, 0.95]);
+  const videoScaleSync = useTransform(scrollYProgress, [0, 0.5], [0.9, 1]);
   const videoScale = useSpring(videoScaleSync, { mass: 0.1, stiffness: 100 });
 
   const opacitySync = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
@@ -39,10 +39,10 @@ const Hero: FC<HeroProps> = ({}) => {
         style={{ scale, opacity, position }}
         className="top-24 -z-0 flex flex-col gap-2 items-center justify-center pt-24"
       >
-        <h1 className="text-7xl font-bold max-w-xl">
+        <h1 className="text-5xl sm:text-7xl font-bold max-w-lg sm:max-w-xl">
           Get a Second Brain with <span className="text-primary">Quivr</span>
         </h1>
-        <p className="text-base max-w-sm text-gray-500 mb-10">
+        <p className="text-base max-w-sm text-gray-500 mb-5 sm:mb-10">
           Quivr is your second brain in the cloud, designed to easily store and
           retrieve unstructured information.
         </p>

frontend/app/(home)/page.tsx

@@ -1,3 +1,4 @@
+import Features from "./Features";
 import Hero from "./Hero";
 import { redirect } from "next/navigation";
 
@@ -9,6 +10,7 @@ export default function HomePage() {
   return (
     <main className="">
       <Hero />
+      <Features />
     </main>
   );
 }

frontend/app/components/ui/Card.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "@/lib/utils";
 import { motion } from "framer-motion";
 import { FC, HTMLAttributes, LegacyRef, forwardRef } from "react";