added landing

frontend/src/components/HowItWorks.tsx

@@ -0,0 +1,73 @@
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { MedalIcon, MapIcon, PlaneIcon, GiftIcon } from "../components/Icons";
+
+interface FeatureProps {
+  icon: JSX.Element;
+  title: string;
+  description: string;
+}
+
+const features: FeatureProps[] = [
+  {
+    icon: <MedalIcon />,
+    title: "Accesibility",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
+  },
+  {
+    icon: <MapIcon />,
+    title: "Community",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
+  },
+  {
+    icon: <PlaneIcon />,
+    title: "Scalability",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
+  },
+  {
+    icon: <GiftIcon />,
+    title: "Gamification",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
+  },
+];
+
+export const HowItWorks = () => {
+  return (
+    <section
+      id="howItWorks"
+      className="container text-center py-24 sm:py-32"
+    >
+      <h2 className="text-3xl md:text-4xl font-bold ">
+        How It{" "}
+        <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+          Works{" "}
+        </span>
+        Step-by-Step Guide
+      </h2>
+      <p className="md:w-3/4 mx-auto mt-4 mb-8 text-xl text-muted-foreground">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis
+        dolor pariatur sit!
+      </p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+        {features.map(({ icon, title, description }: FeatureProps) => (
+          <Card
+            key={title}
+            className="bg-muted/50"
+          >
+            <CardHeader>
+              <CardTitle className="grid gap-4 place-items-center">
+                {icon}
+                {title}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>{description}</CardContent>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+};