add hero and get-started page

1 files changed, 165 insertions, 0 deletions

diff --git a/src/components/old/bentonbox.tsx b/src/components/old/bentonbox.tsx
new file mode 100644
index 0000000..5a3afca
--- /dev/null
+++ b/src/components/old/bentonbox.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { motion } from "motion/react";
+
+export default function OurServices() {
+  return (
+    <div className="pt-24 sm:pt-32">
+      <section className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+        <motion.h2
+          className="text-center text-base/7 font-semibold text-indigo-700"
+          initial={{ opacity: 0, y: -20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        >
+          Learn In a Better Way
+        </motion.h2>
+        <motion.p
+          className="mx-auto mt-2 max-w-lg text-center text-4xl font-semibold tracking-tight sm:text-5xl"
+          initial={{ opacity: 0, y: -20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+        >
+          Our Services
+        </motion.p>
+        <div className="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2">
+          <motion.div
+            className="relative lg:row-span-2"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2, duration: 0.2 }}
+          >
+            <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 lg:rounded-l-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
+              <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
+                <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
+                  Tutoring at All Grade Levels
+                </p>
+                <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
+                  Our tutors cover a wide range of subjects and grade levels,
+                </p>
+              </div>
+              <div className="@container relative min-h-120 w-full grow max-lg:mx-auto max-lg:max-w-sm">
+                <div className="absolute inset-x-10 top-10 bottom-0 overflow-hidden rounded-t-[12cqw] border-x-[3cqw] border-t-[3cqw] border-gray-700 bg-gray-900 outline outline-white/20">
+                  <img
+                    alt=""
+                    src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-mobile-friendly.png"
+                    className="size-full object-cover object-top"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 lg:rounded-l-4xl" />
+          </motion.div>
+          <motion.div
+            className="relative max-lg:row-start-1"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{
+              opacity: 1,
+              y: 0,
+              transition: { delay: 0.2, duration: 0.2 },
+            }}
+          >
+            <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 max-lg:rounded-t-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
+              <div className="px-8 pt-8 sm:px-10 sm:pt-10">
+                <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
+                  SAT / ACT Prep
+                </p>
+                <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
+                  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.
+                </p>
+              </div>
+              <div className="flex flex-1 items-center justify-center px-8 max-lg:pt-10 max-lg:pb-12 sm:px-10 lg:pb-2">
+                <img
+                  alt=""
+                  src="https://tailwindcss.com/plus-assets/img/component-images/dark-bento-03-performance.png"
+                  className="w-full max-lg:max-w-xs"
+                />
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 max-lg:rounded-t-4xl" />
+          </motion.div>
+          <motion.div
+            className="relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{
+              opacity: 1,
+              y: 0,
+              transition: { delay: 0.2, duration: 0.2 },
+            }}
+          >
+            <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+              <div className="px-8 pt-8 sm:px-10 sm:pt-10">
+                <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
+                  Secure Technological Integration
+                </p>
+                <p className="mt-2 text-sm/6 text-gray-700 max-lg:text-center">
+                  While applying technology to make learning the best it can be,
+                  we prioritize security and privacy to protect our users' data
+                  and ensure a safe learning environment.
+                </p>
+              </div>
+              <div className="@container flex flex-1 items-center max-lg:py-6 lg:pb-2">
+                <img
+                  alt=""
+                  src="https://tailwindcss.com/plus-assets/img/component-images/dark-bento-03-security.png"
+                  className="h-[min(152px,40cqw)] object-cover"
+                />
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15" />
+          </motion.div>
+          <motion.div
+            className="relative lg:row-span-2"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{
+              opacity: 1,
+              y: 0,
+              transition: { delay: 0.2, duration: 0.2 },
+            }}
+          >
+            <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]">
+              <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
+                <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
+                  Competitive Math and Coding Counseling
+                </p>
+                <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
+                  Our handcrafted AI learns from your sessions and provides
+                  personalized summaries, practice problems, and study plans to
+                  help you succeed.
+                </p>
+              </div>
+              <div className="relative min-h-120 w-full grow">
+                <div className="absolute top-10 right-0 bottom-0 left-10 overflow-hidden rounded-tl-xl bg-gray-900/60 outline outline-white/10">
+                  <div className="flex bg-gray-900 outline outline-white/5">
+                    <div className="-mb-px flex text-sm/6 font-medium text-gray-400">
+                      <div className="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white">
+                        Week1_Session_Precalc.md
+                      </div>
+                      <div className="border-r border-gray-600/10 px-4 py-2">
+                        Week2_Session_Precalc.md
+                      </div>
+                    </div>
+                  </div>
+                  <div className="px-6 pt-6 pb-14">
+                    <p className="text-sm/6 text-gray-400">AI Summary:</p>
+                    <p className="text-sm/6 text-gray-400">
+                      This is a summary of the AI's findings and recommendations
+                      based on the user's input and interactions.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
+          </motion.div>
+        </div>
+      </section>
+    </div>
+  );
+}