Skip to content

Commit 5da7c43

Browse files
trungdong11trungdong11
authored
QUIZ-197: landingpage (#127)
1 parent 471449e commit 5da7c43

File tree

15 files changed

+1302
-16
lines changed

15 files changed

+1302
-16
lines changed

‎src/components/base/BaseModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<template>
33
<div
44
delay="200"
5-
class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-[45]"
5+
class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-[9999]"
66
>
77
<div
88
v-motion-pop-visible

‎src/components/landing/FeaturesSection.vue‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<template>
2+
<section
3+
id="features"
4+
class="py-20 px-4 sm:px-6 lg:px-8"
5+
>
6+
<div class="mx-auto max-w-7xl">
7+
<div class="text-center mb-16">
8+
<p
9+
class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r text-transparent from-purple-600 to-pink-600 bg-clip-text"
10+
>
11+
Powerful Features
12+
</p>
13+
<p class="text-xl text-gray-600 mx-auto dark:text-gray-300 max-w-3xl">
14+
Everything you need to create engaging quizzes and enhance learning experiences
15+
</p>
16+
</div>
17+
<div class="md:grid-cols-2 lg:grid-cols-3 grid grid-cols-1 gap-8">
18+
<div
19+
class="bg-white/50 dark:bg-gray-800/50 rounded-2xl group backdrop-blur-sm p-8 border border-gray-200/50 dark:border-gray-700/50 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 hover:transform hover:scale-105"
20+
>
21+
<div
22+
class="w-14 h-14 bg-gradient-to-r rounded-2xl items-center justify-center mb-6 from-purple-500 to-pink-500 flex group-hover:scale-110 transition-transform"
23+
>
24+
<svg
25+
id="Windframe_wqQeTXBiw"
26+
class="w-7 h-7 text-white"
27+
fill="none"
28+
stroke="currentColor"
29+
viewBox="0 0 24 24"
30+
>
31+
<path
32+
stroke-linecap="round"
33+
stroke-linejoin="round"
34+
stroke-width="2"
35+
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
36+
></path>
37+
</svg>
38+
</div>
39+
<p class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">
40+
Multiple Question Types
41+
</p>
42+
<p class="text-gray-600 leading-relaxed dark:text-gray-300">
43+
Create diverse quizzes with multiple choice, true/false, fill-in-the-blank, and more
44+
question formats.
45+
</p>
46+
</div>
47+
<div
48+
class="bg-white/50 dark:bg-gray-800/50 rounded-2xl group backdrop-blur-sm p-8 border border-gray-200/50 dark:border-gray-700/50 hover:border-cyan-300 dark:hover:border-cyan-600 transition-all duration-300 hover:transform hover:scale-105"
49+
>
50+
<div
51+
class="w-14 h-14 bg-gradient-to-r rounded-2xl items-center justify-center mb-6 from-cyan-500 to-blue-500 flex group-hover:scale-110 transition-transform"
52+
>
53+
<svg
54+
id="Windframe_Wk4I6BMFO"
55+
class="w-7 h-7 text-white"
56+
fill="none"
57+
stroke="currentColor"
58+
viewBox="0 0 24 24"
59+
>
60+
<path
61+
stroke-linecap="round"
62+
stroke-linejoin="round"
63+
stroke-width="2"
64+
d="M13 10V3L4 14h7v7l9-11h-7z"
65+
></path>
66+
</svg>
67+
</div>
68+
<p class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Real-time Gameplay</p>
69+
<p class="text-gray-600 leading-relaxed dark:text-gray-300">
70+
Play quizzes live with friends and colleagues. See results instantly and compete in
71+
real-time.
72+
</p>
73+
</div>
74+
<div
75+
class="bg-white/50 dark:bg-gray-800/50 rounded-2xl group backdrop-blur-sm p-8 border border-gray-200/50 dark:border-gray-700/50 hover:border-pink-300 dark:hover:border-pink-600 transition-all duration-300 hover:transform hover:scale-105"
76+
>
77+
<div
78+
class="w-14 h-14 bg-gradient-to-r rounded-2xl items-center justify-center mb-6 from-pink-500 to-rose-500 flex group-hover:scale-110 transition-transform"
79+
>
80+
<svg
81+
id="Windframe_Y5Af4D0jO"
82+
class="w-7 h-7 text-white"
83+
fill="none"
84+
stroke="currentColor"
85+
viewBox="0 0 24 24"
86+
>
87+
<path
88+
stroke-linecap="round"
89+
stroke-linejoin="round"
90+
stroke-width="2"
91+
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
92+
></path>
93+
</svg>
94+
</div>
95+
<p class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Smart Flashcards</p>
96+
<p class="text-gray-600 leading-relaxed dark:text-gray-300">
97+
Turn your quizzes into interactive flashcards for effective studying and memory
98+
retention.
99+
</p>
100+
</div>
101+
<div
102+
class="bg-white/50 dark:bg-gray-800/50 rounded-2xl group backdrop-blur-sm p-8 border border-gray-200/50 dark:border-gray-700/50 hover:border-green-300 dark:hover:border-green-600 transition-all duration-300 hover:transform hover:scale-105"
103+
>
104+
<div
105+
class="w-14 h-14 bg-gradient-to-r rounded-2xl items-center justify-center mb-6 from-green-500 to-emerald-500 flex group-hover:scale-110 transition-transform"
106+
>
107+
<svg
108+
id="Windframe_uLWByJyWj"
109+
class="w-7 h-7 text-white"
110+
fill="none"
111+
stroke="currentColor"
112+
viewBox="0 0 24 24"
113+
>
114+
<path
115+
stroke-linecap="round"
116+
stroke-linejoin="round"
117+
stroke-width="2"
118+
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
119+
></path>
120+
</svg>
121+
</div>
122+
<p class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Analytics & Insights</p>
123+
<p class="text-gray-600 leading-relaxed dark:text-gray-300">
124+
Track performance, identify knowledge gaps, and get detailed analytics on quiz results.
125+
</p>
126+
</div>
127+
<div
128+
class="bg-white/50 dark:bg-gray-800/50 rounded-2xl group backdrop-blur-sm p-8 border border-gray-200/50 dark:border-gray-700/50 hover:border-indigo-300 dark:hover:border-indigo-600 transition-all duration-300 hover:transform hover:scale-105"
129+
>
130+
<div
131+
class="w-14 h-14 bg-gradient-to-r rounded-2xl items-center justify-center mb-6 from-indigo-500 to-purple-500 flex group-hover:scale-110 transition-transform"
132+
>
133+
<svg
134+
id="Windframe_mZ6PvUzXI"
135+
class="w-7 h-7 text-white"
136+
fill="none"
137+
stroke="currentColor"
138+
viewBox="0 0 24 24"
139+
>
140+
<path
141+
stroke-linecap="round"
142+
stroke-linejoin="round"
143+
stroke-width="2"
144+
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
145+
></path>
146+
</svg>
147+
</div>
148+
<p class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Team Collaboration</p>
149+
<p class="text-gray-600 leading-relaxed dark:text-gray-300">
150+
Work together with team members to create and manage quizzes collaboratively.
151+
</p>
152+
</div>
153+
<div
154+
class="bg-white/50 dark:bg-gray-800/50 rounded-2xl group backdrop-blur-sm p-8 border border-gray-200/50 dark:border-gray-700/50 hover:border-orange-300 dark:hover:border-orange-600 transition-all duration-300 hover:transform hover:scale-105"
155+
>
156+
<div
157+
class="w-14 h-14 bg-gradient-to-r rounded-2xl items-center justify-center mb-6 from-orange-500 to-red-500 flex group-hover:scale-110 transition-transform"
158+
>
159+
<svg
160+
id="Windframe_4uwRE5yQb"
161+
class="w-7 h-7 text-white"
162+
fill="none"
163+
stroke="currentColor"
164+
viewBox="0 0 24 24"
165+
>
166+
<path
167+
stroke-linecap="round"
168+
stroke-linejoin="round"
169+
stroke-width="2"
170+
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h4a2 2 0 002-2V9a2 2 0 00-2-2H7a2 2 0 00-2 2v6a2 2 0 002 2z"
171+
></path>
172+
</svg>
173+
</div>
174+
<p class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">AI-Powered Creation</p>
175+
<p class="text-gray-600 leading-relaxed dark:text-gray-300">
176+
Generate quiz questions automatically using AI to save time and enhance creativity.
177+
</p>
178+
</div>
179+
</div>
180+
</div>
181+
</section>
182+
</template>

0 commit comments

Comments
 (0)