add hero and get-started page

1 files changed, 116 insertions, 0 deletions

diff --git a/src/app/WhyUs.tsx b/src/app/WhyUs.tsx
new file mode 100644
index 0000000..bb92485
--- /dev/null
+++ b/src/app/WhyUs.tsx
@@ -0,0 +1,116 @@
+import { BackgroundRippleEffect } from "@/components/ui/background-ripple-effect";
+import {
+  AcademicCapIcon,
+  BanknotesIcon,
+  CalendarDateRangeIcon,
+  CloudArrowUpIcon,
+} from "@heroicons/react/24/solid";
+import { motion } from "motion/react";
+import Image from "next/image";
+
+const features = [
+  {
+    name: "High Quality Tutors",
+    description:
+      "We only hire tutors who have been high-performing students with previous teaching experience. Most of our tutors are currently pursuing PhDs or Masters in their respective fields.",
+    icon: AcademicCapIcon,
+  },
+  {
+    name: "Negotiable Pricing",
+    description:
+      "We determine pricing on a case-by-case basis during our free consultation to best accommodate the needs of both students and tutors.",
+    icon: BanknotesIcon,
+  },
+  {
+    name: "Flexible Scheduling",
+    description:
+      "We offer both in-person and online session options and can accommodate different time zones.",
+    icon: CalendarDateRangeIcon,
+  },
+  {
+    name: "Modern, Accessible Platform",
+    description:
+      "Our platform uses the latest web technologies to ensure a seamless connection between students and tutors on all devices.",
+    icon: CloudArrowUpIcon,
+  },
+];
+
+export default function WhyUs() {
+  return (
+    <section className="overflow-hidden pt-24 sm:pt-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid items-center max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+          <div className="lg:mt-4 lg:pr-8">
+            <div className="lg:max-w-lg">
+              <motion.h2
+                className="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl"
+                initial={{ opacity: 0, y: -20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.1 }}
+              >
+                Why Choose{" "}
+                <span className="text-gradient">Sensible Scholars?</span>
+              </motion.h2>
+              <motion.p
+                className="pt-4 text-base/7 text-indigo-600/80"
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.25, delay: 0.1 }}
+              >
+                We make learning the best it can possibly be.
+              </motion.p>
+              <dl className="mt-6 max-w-xl space-y-8 text-base/7 text-gray-600 lg:max-w-none">
+                {features.map((feature) => (
+                  <motion.div
+                    key={feature.name}
+                    className="relative pl-9"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{
+                      duration: 0.5,
+                      delay: 0.1 + features.indexOf(feature) * 0.05,
+                    }}
+                  >
+                    <dt className="inline font-semibold text-gray-900">
+                      <feature.icon
+                        aria-hidden="true"
+                        className="absolute top-1 left-1 size-5 text-indigo-600"
+                      />
+                      {feature.name}
+                    </dt>{" "}
+                    <dd className="inline">{feature.description}</dd>
+                  </motion.div>
+                ))}
+              </dl>
+            </div>
+          </div>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            <Image
+              alt="Product screenshot"
+              src="/portal-page.png"
+              width={2432}
+              height={1442}
+              className="w-3xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-228 md:-ml-4 lg:-ml-0"
+            />
+          </motion.div>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        className="absolute inset-x-0 -z-10 transform-gpu overflow-hidden blur-3xl sm:-translate-y-30 sm:-translate-x-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-180 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>
+    </section>
+  );
+}