diff options
Diffstat (limited to 'src/app/OurServices.tsx')
-rw-r--r-- | src/app/OurServices.tsx | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/src/app/OurServices.tsx b/src/app/OurServices.tsx new file mode 100644 index 0000000..4f3e5e8 --- /dev/null +++ b/src/app/OurServices.tsx @@ -0,0 +1,121 @@ +"use client"; + +import { BackgroundRippleEffect } from "@/components/ui/background-ripple-effect"; +import { CardSpotlight } from "@/components/ui/card-spotlight"; +import { WobbleCard } from "@/components/ui/wooble-card"; +import { WorldMap } from "@/components/ui/world-map"; +import { motion } from "motion/react"; + +export default function OurServices() { + const CheckIcon = () => { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + fill="currentColor" + className="h-4 w-4 text-blue-500 mt-1 shrink-0" + > + <path stroke="none" d="M0 0h24v24H0z" fill="none" /> + <path + d="M12 2c-.218 0 -.432 .002 -.642 .005l-.616 .017l-.299 .013l-.579 .034l-.553 .046c-4.785 .464 -6.732 2.411 -7.196 7.196l-.046 .553l-.034 .579c-.005 .098 -.01 .198 -.013 .299l-.017 .616l-.004 .318l-.001 .324c0 .218 .002 .432 .005 .642l.017 .616l.013 .299l.034 .579l.046 .553c.464 4.785 2.411 6.732 7.196 7.196l.553 .046l.579 .034c.098 .005 .198 .01 .299 .013l.616 .017l.642 .005l.642 -.005l.616 -.017l.299 -.013l.579 -.034l.553 -.046c4.785 -.464 6.732 -2.411 7.196 -7.196l.046 -.553l.034 -.579c.005 -.098 .01 -.198 .013 -.299l.017 -.616l.005 -.642l-.005 -.642l-.017 -.616l-.013 -.299l-.034 -.579l-.046 -.553c-.464 -4.785 -2.411 -6.732 -7.196 -7.196l-.553 -.046l-.579 -.034a28.058 28.058 0 0 0 -.299 -.013l-.616 -.017l-.318 -.004l-.324 -.001zm2.293 7.293a1 1 0 0 1 1.497 1.32l-.083 .094l-4 4a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 1.32 -1.497l.094 .083l1.293 1.292l3.293 -3.292z" + fill="currentColor" + strokeWidth="0" + /> + </svg> + ); + }; + const Step = ({ title }: { title: string }) => { + return ( + <li className="flex gap-2 items-start"> + <CheckIcon /> + <p>{title}</p> + </li> + ); + }; + + return ( + <section className="relative isolate pt-24 sm:pt-32 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 }} + > + <span className="text-gradient">Learn in a Better Way</span> + </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="grid grid-cols-1 lg:grid-cols-3 gap-4 max-w-7xl mx-auto w-full mt-12"> + {" "} + <motion.div + initial={{ opacity: 0, y: 20 }} + whileInView={{ opacity: 1, y: 0 }} + transition={{ delay: 0.14, duration: 0.5 }} + > + <div className="p-4 text-center ring-1 ring-indigo-600/40 rounded-lg shadow-lg backdrop-blur-xs bg-white/60"> + <h3 className="text-xl font-semibold tracking-tight"> + Tutoring at All Grade Levels + </h3> + <p className="mt-2 text-sm/6 max-lg:text-center"> + Meet with experienced tutors who can help you excel in any + subject. + </p> + <ul className="mt-6 space-y-4 text-left"> + <Step title="K-12 Tutoring" /> + <Step title="AP Class and Exam Preparation" /> + <Step title="Undergraduate-Level STEM Tutoring" />{" "} + </ul> + </div> + </motion.div> + <motion.div + initial={{ opacity: 0, y: 20 }} + whileInView={{ opacity: 1, y: 0 }} + transition={{ delay: 0.1, duration: 0.5 }} + > + <div className="p-4 text-center ring-1 ring-indigo-600/40 rounded-lg shadow-lg backdrop-blur-xs bg-white/60"> + <h3 className="text-xl font-semibold tracking-tight"> + College Application Assistance + </h3> + <p className="mt-2 text-sm/6 max-lg:text-center"> + Have former Ivy League students help you craft the best possible + college application. + </p> + <ul className="mt-6 space-y-4 text-left"> + <Step title="ACT/SAT Test Prep" /> + <Step title="College Essay Coaching" /> + <Step title="Interview Preparation" /> + </ul> + </div> + </motion.div> + <motion.div + initial={{ opacity: 0, y: 20 }} + whileInView={{ opacity: 1, y: 0 }} + transition={{ delay: 0.1, duration: 0.5 }} + > + <div className="p-4 text-center ring-1 ring-indigo-600/40 rounded-lg shadow-lg backdrop-blur-xs bg-white/60"> + <h3 className=" text-xl font-semibold tracking-tight "> + Group Review Sessions + </h3> + <p className="mt-2 text-sm/6 max-lg:text-center"> + Join group sessions at no cost to prepare for nationwide + standardized exams (e.g., SAT, ACT, APs, AMC). + </p> + <ul className="mt-6 space-y-4 text-left"> + <Step title="Organization-Wide Review Sessions" /> + <Step title="Specific Test Taking Strategies" /> + <Step title="Previous Recordings Available" /> + </ul> + </div> + </motion.div> + </div> + </section> + ); +} |