1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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>
);
}
|
