1 files changed, 141 insertions, 0 deletions
diff --git a/src/app/Testimonials.tsx b/src/app/Testimonials.tsx
new file mode 100644
index 0000000..774f38f
--- /dev/null
+++ b/src/app/Testimonials.tsx
@@ -0,0 +1,141 @@
+import { motion } from "motion/react";
+
+const posts = [
+  {
+    id: 1,
+    title: "Boost your conversion rate",
+    href: "#",
+    description:
+      "Illo sint volupta. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.",
+    date: "Mar 16, 2020",
+    datetime: "2020-03-16",
+    category: { title: "AP Calculus", href: "#" },
+    author: {
+      name: "Michael Foster",
+      role: "Co-Founder / CTO",
+      href: "#",
+      imageUrl:
+        "https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+  },
+  {
+    id: 2,
+    title: "How to use search engine optimization to drive sales",
+    href: "#",
+    description:
+      "Optio cum necessitatibus dolor voluptatum provident commodi et. Qui aperiam fugiat nemo cumque.",
+    date: "Mar 10, 2020",
+    datetime: "2020-03-10",
+    category: { title: "ACT Prep", href: "#" },
+    author: {
+      name: "Lindsay Walton",
+      role: "Front-end Developer",
+      href: "#",
+      imageUrl:
+        "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+  },
+  {
+    id: 3,
+    title: "Improve your customer experience",
+    href: "#",
+    description:
+      "Cupiditate maiores ullam eveniet adipisci in doloribus nulla minus. Voluptas iusto libero adipisci rem et corporis. Nostrud sint anim sunt aliqua. Nulla eu labore irure incididunt velit cillum quis magna dolore.",
+    date: "Feb 12, 2020",
+    datetime: "2020-02-12",
+    category: { title: "HS Algebra", href: "#" },
+    author: {
+      name: "Tom Cook",
+      role: "Director of Product",
+      href: "#",
+      imageUrl:
+        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+  },
+];
+
+export default function Testimonials() {
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        className="absolute inset-x-0 -z-10 transform-gpu overflow-hidden blur-3xl -translate-y-60 sm:-translate-y-80"
+      >
+        <div
+          style={{
+            clipPath:
+              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+          }}
+          className="relative rotate-12 aspect-1000/900 sm:aspect-1155/700 w-144.5-translate-x-1/2 bg-linear-to-r from-indigo-600 via-red-200 to-red-500 opacity-30 sm:w-288.75 max-w-7xl mx-auto"
+        />
+      </div>
+
+      <div className="pt-24 sm:pt-32">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <motion.div
+            className="mx-auto max-w-2xl lg:mx-0"
+            initial={{ opacity: 0, y: -20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.25, delay: 0.1 }}
+          >
+            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
+              From the Students
+            </h2>
+            <p className="mt-2 text-lg/8 text-gray-600">
+              Listen to what our students have to say about their experiences.
+            </p>
+          </motion.div>
+          <motion.div
+            className="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-indigo-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            {posts.map((post) => (
+              <article
+                key={post.id}
+                className="flex max-w-xl flex-col items-start justify-between"
+              >
+                <div className="flex items-center gap-x-4 text-xs">
+                  <time dateTime={post.datetime} className="text-gray-500">
+                    {post.date}
+                  </time>
+                  <p className="relative z-10 rounded-full bg-indigo-100 px-3 py-1.5 font-medium text-gray-600 hover:bg-indigo-200">
+                    {post.category.title}
+                  </p>
+                </div>
+                <div className="group relative grow">
+                  <h3 className="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
+                    <a href={post.href}>
+                      <span className="absolute inset-0" />
+                      {post.title}
+                    </a>
+                  </h3>
+                  <p className="mt-5 line-clamp-3 text-sm/6 text-gray-600">
+                    {post.description}
+                  </p>
+                </div>
+                <div className="relative mt-8 flex items-center gap-x-4 justify-self-end">
+                  <img
+                    alt=""
+                    src={post.author.imageUrl}
+                    className="size-10 rounded-full bg-gray-50"
+                  />
+                  <div className="text-sm/6">
+                    <p className="font-semibold text-gray-900">
+                      <a href={post.author.href}>
+                        <span className="absolute inset-0" />
+                        {post.author.name}
+                      </a>
+                    </p>
+                    <p className="text-gray-600">{post.author.role}</p>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </motion.div>
+        </div>
+      </div>
+    </>
+  );
+}