add hero and get-started page

1 files changed, 53 insertions, 0 deletions

diff --git a/src/app/people/page.tsx b/src/app/people/page.tsx
new file mode 100644
index 0000000..3df1ac4
--- /dev/null
+++ b/src/app/people/page.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+export default function Page() {
+  const peopleInfo = [
+    {
+      name: "Joseph",
+      role: "Founder",
+      bio: "Bio - Quia illum aut in beatae. Possimus dolores aliquid accusantium aut in ut non assumenda. Enim iusto molestias aut deleniti eos aliquid magnam molestiae. At et non possimus ab. Magni labore molestiae nulla qui.",
+      imageUrl: "/globe.svg",
+    },
+    {
+      name: "Michael",
+      role: "Co-Founder",
+      bio: "Bio - Quia illum aut in beatae. Possimus dolores aliquid accusantium aut in ut non assumenda. Enim iusto molestias aut deleniti eos aliquid magnam molestiae. At et non possimus ab. Magni labore molestiae nulla qui.",
+      imageUrl: "/globe.svg",
+    },
+  ];
+
+  const peopleList = peopleInfo.map((person) => (
+    <div key={person.name} className="flex items-start gap-4 text-left">
+      <img
+        className="w-16 rounded-full object-cover"
+        src={person.imageUrl}
+        alt={`Headshot photo of ${person.name}`}
+      />
+      <div>
+        <h3 className="text-lg font-semibold">{person.name}</h3>
+        <p className="text-sm text-gray-500">{person.role}</p>
+        <p className="mt-2 text-sm/6 text-gray-700">{person.bio}</p>
+      </div>
+    </div>
+  ));
+
+  return (
+    <div className="container mx-auto h-lvh px-6 py-10">
+      <div className="text-center pb-8">
+        <h1 className="text-2xl font-semibold">
+          Meet{" "}
+          <span className="bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
+            Our Team
+          </span>
+        </h1>
+        <p className="max-w-2xl mx-auto my-6 text-gray-700 dark:text-gray-500">
+          We are a passionate group of educators dedicated to making learning
+          accessible and engaging for everyone.
+        </p>
+      </div>
+      <div className="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 xl:mt-16">
+        {peopleList}
+      </div>
+    </div>
+  );
+}