add hero and get-started page

1 files changed, 57 insertions, 0 deletions

diff --git a/src/app/Hero.tsx b/src/app/Hero.tsx
new file mode 100644
index 0000000..7398a55
--- /dev/null
+++ b/src/app/Hero.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { BackgroundRippleEffect } from "@/components/ui/background-ripple-effect";
+import { motion } from "motion/react";
+import Link from "next/link";
+
+export default function Hero() {
+  return (
+    <div className="relative isolate px-6 pt-14 lg:px-8">
+      <BackgroundRippleEffect rows={18} cols={27} />
+      <section className="mx-auto max-w-2xl lg:max-w-4xl py-32 sm:py-48 lg:py-56">
+        <motion.div
+          className="text-center"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        >
+          <h1 className="relative z-10 text-5xl font-semibold tracking-tight sm:text-7xl">
+            Sensible Scholars <span className="text-gradient">Tutoring</span>
+          </h1>
+          <p className="text-lg font-medium text-pretty text-gray-709 sm:text-xl/8 pt-2 sm:pt-1">
+            Beyond the Classroom: Deeper Learning, Lasting Success.
+          </p>
+        </motion.div>
+        <motion.div
+          className="mt-6 flex justify-center"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          <motion.div
+            className="relative z-10"
+            whileHover={{ scale: 1.25 }}
+            whileTap={{ scale: 1.1 }}
+            transition={{ type: "spring", stiffness: 400, damping: 17 }}
+            // className="relative rounded-full px-3 py-1 text-sm/6 ring-1 ring-black/20 shadow-lg bg-white/30  hover:shadow-indigo-600/20 hover:ring-indigo-600/40 hover:bg-white/50"
+          >
+            <Link
+              href="/get-started"
+              className="relative inline-flex h-8 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 shadow-lg"
+            >
+              <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
+              <span className="inline-flex h-full mx-auto my-auto w-full cursor-pointer items-center justify-center rounded-full bg-white px-3 py-1 text-sm font-medium z-10">
+                <span className="">
+                  Get started with our{" "}
+                  <span className="font-semibold text-gradient underline decoration-2 decoration-slate-400/70 hover:decoration-slate-400/90">
+                    free 20 minute consultation &rarr;
+                  </span>
+                </span>
+              </span>
+            </Link>
+          </motion.div>
+        </motion.div>
+      </section>
+    </div>
+  );
+}