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
|
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>
);
}
|
