Skip to content

Commit b009f8a

Browse files
Sohan-RoutSohan-Rout
committed
Feat : added changes to faq feature and testimonial sections
1 parent 029c856 commit b009f8a

File tree

5 files changed

+22
-101
lines changed

5 files changed

+22
-101
lines changed

‎app/components/about.jsx‎

Lines changed: 6 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,23 @@
11
import React from 'react';
2-
import { FiTarget, FiEye, FiUsers } from 'react-icons/fi';
2+
import { IoMdInformationCircle } from "react-icons/io";
33

44
const AboutSection = () => {
5-
const features = [
6-
{
7-
icon: <FiTarget className="w-6 h-6" />,
8-
title: "Clear Mission",
9-
description: "Bridge theory and practice through visualization"
10-
},
11-
{
12-
icon: <FiEye className="w-6 h-6" />,
13-
title: "Visual Learning",
14-
description: "See algorithms come to life with animations"
15-
},
16-
{
17-
icon: <FiUsers className="w-6 h-6" />,
18-
title: "Community Focused",
19-
description: "Built for students and developers"
20-
}
21-
];
22-
235
return (
24-
<section className="relative py-12 bg-white dark:bg-black overflow-hidden">
25-
{/* Floating background elements */}
26-
<div className="absolute inset-0 overflow-hidden pointer-events-none">
27-
<div className="absolute top-0 left-0 w-64 h-64 bg-blue-400/10 rounded-full filter blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
28-
<div className="absolute bottom-0 right-0 w-96 h-96 bg-blue-600/10 rounded-full filter blur-3xl translate-x-1/2 translate-y-1/2"></div>
29-
{/* Subtle grid pattern */}
30-
<div className="absolute inset-0 opacity-10 dark:opacity-5 bg-[size:40px_40px] [mask-image:linear-gradient(to_bottom,transparent,white_20%,white_80%,transparent)]"
31-
style={{backgroundImage: 'radial-gradient(currentColor 1px, transparent 1px)'}}>
32-
</div>
33-
</div>
34-
6+
<section className="relative py-10 bg-white dark:bg-neutral-900 overflow-hidden">
357
<div className="container mx-auto px-6 relative z-10">
368
{/* Section Header */}
37-
<div className="max-w-2xl mx-auto text-center mb-16">
38-
<span className="inline-block text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
9+
<div className="max-w-2xl mx-auto text-center mb-12">
10+
<span className="flex items-center justify-center gap-2 text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
11+
<IoMdInformationCircle className='text-xl'/>
3912
About The Platform
4013
</span>
4114
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
4215
Revolutionizing <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-400 dark:to-blue-300">DSA Learning</span>
4316
</h2>
44-
<p className="text-xl text-gray-600 dark:text-gray-400 leading-relaxed">
45-
Transforming abstract concepts into tangible understanding through interactive visualization.
46-
</p>
47-
</div>
48-
49-
{/* Feature Grid */}
50-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
51-
{features.map((feature, index) => (
52-
<div
53-
key={index}
54-
className="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
55-
>
56-
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center text-blue-500 dark:text-blue-400 mb-4">
57-
{feature.icon}
58-
</div>
59-
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
60-
{feature.title}
61-
</h3>
62-
<p className="text-gray-600 dark:text-gray-400">
63-
{feature.description}
64-
</p>
65-
</div>
66-
))}
6717
</div>
6818

6919
{/* Mission Statement */}
70-
<div className="max-w-4xl mx-auto bg-white dark:bg-gray-800/50 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-3xl p-8 md:p-10 shadow-lg overflow-hidden">
20+
<div className="max-w-6xl mx-auto bg-white dark:bg-neutral-950 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-3xl p-8 md:p-10 shadow-lg overflow-hidden">
7121
<div className="relative">
7222
{/* Decorative element */}
7323
<div className="absolute -top-20 -right-20 w-40 h-40 bg-blue-500/10 rounded-full filter blur-xl"></div>
@@ -85,22 +35,6 @@ const AboutSection = () => {
8535
</div>
8636
</div>
8737
</div>
88-
89-
{/* CTA */}
90-
<div className="text-center mt-16">
91-
<a href='/#features'>
92-
<button className="relative px-8 py-4 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium rounded-lg transition-all duration-300 shadow-lg hover:shadow-blue-500/30 group overflow-hidden">
93-
<span className="relative z-10 flex items-center justify-center gap-2">
94-
Explore Features
95-
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
96-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
97-
</svg>
98-
</span>
99-
<span className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
100-
</button>
101-
</a>
102-
</div>
103-
10438
{/* Divider */}
10539
<div className="mt-20 mx-auto h-[1px] max-w-4xl bg-gradient-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
10640
</div>

‎app/components/faq.jsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,7 @@ const FAQSection = () => {
3030
];
3131

3232
return (
33-
<section className="relative py-6 bg-white dark:bg-black overflow-hidden">
34-
{/* Floating background elements */}
35-
<div className="absolute inset-0 overflow-hidden pointer-events-none">
36-
<div className="absolute top-0 left-0 w-64 h-64 bg-blue-400/10 rounded-full filter blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
37-
<div className="absolute bottom-0 right-0 w-96 h-96 bg-blue-600/10 rounded-full filter blur-3xl translate-x-1/2 translate-y-1/2"></div>
38-
{/* Subtle grid pattern */}
39-
<div className="absolute inset-0 opacity-10 dark:opacity-5 bg-[size:40px_40px] [mask-image:linear-gradient(to_bottom,transparent,white_20%,white_80%,transparent)]"
40-
style={{backgroundImage: 'radial-gradient(currentColor 1px, transparent 1px)'}}>
41-
</div>
42-
</div>
43-
33+
<section className="relative py-6 bg-white dark:bg-neutral-900 overflow-hidden">
4434
<div className="container mx-auto px-6 relative z-10">
4535
{/* Section Header */}
4636
<div className="max-w-4xl mx-auto text-center mb-16">
@@ -61,7 +51,7 @@ const FAQSection = () => {
6151
{faqs.map((faq, index) => (
6252
<div
6353
key={index}
64-
className={`bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden transition-all duration-300 ${activeIndex === index ? 'shadow-lg' : 'shadow-sm hover:shadow-md'}`}
54+
className={`bg-white/70 dark:bg-neutral-950 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden transition-all duration-300 ${activeIndex === index ? 'shadow-lg' : 'shadow-sm hover:shadow-md'}`}
6555
>
6656
<button
6757
className="w-full flex items-center justify-between p-6 text-left"
@@ -94,7 +84,7 @@ const FAQSection = () => {
9484
</div>
9585

9686
{/* Additional Help */}
97-
<div className="max-w-3xl mx-auto mt-16 text-center bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-2xl p-8 shadow-sm">
87+
<div className="max-w-3xl mx-auto mt-16 text-center bg-white/50 dark:bg-neutral-950 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-2xl p-8 shadow-sm">
9888
<div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-500 dark:text-blue-400 mx-auto mb-6">
9989
<FiMail className="w-8 h-8" />
10090
</div>

‎app/components/feature.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22
import React, { useState } from 'react';
33
import { FiCpu, FiBookOpen, FiAward } from 'react-icons/fi';
4+
import { HiSparkles } from "react-icons/hi2";
45

56
const FeaturesSection = () => {
67
const features = [
@@ -55,7 +56,8 @@ const FeaturesSection = () => {
5556
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
5657
{/* Section Heading */}
5758
<div className="text-center mb-16">
58-
<span className="inline-block text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
59+
<span className="flex items-center justify-center gap-2 text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
60+
<HiSparkles className='text-xl'/>
5961
Features we offer
6062
</span>
6163
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">

‎app/components/review.jsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,7 @@ const TestimonialsSection = () => {
6060
};
6161

6262
return (
63-
<section className="relative bg-white dark:bg-black overflow-hidden">
64-
{/* Decorative elements */}
65-
<div className="absolute inset-0 opacity-10 dark:opacity-5">
66-
<div className="absolute -top-10 -left-20 w-64 h-64 bg-blue-200/20 dark:bg-blue-800/10 rounded-full filter blur-3xl -z-10 animate-float-slow"></div>
67-
<div className="absolute -bottom-20 -right-20 w-72 h-72 bg-blue-200/20 dark:bg-blue-800/10 rounded-full filter blur-3xl -z-10 animate-float-slower"></div>
68-
</div>
69-
63+
<section className="relative bg-white dark:bg-neutral-900 overflow-hidden">
7064
<div className="container mx-auto px-4 sm:px-6 mt-5 relative z-10">
7165
<motion.div
7266
initial={{ opacity: 0, y: 20 }}
@@ -76,7 +70,7 @@ const TestimonialsSection = () => {
7670
className="max-w-3xl mx-auto text-center mb-12"
7771
>
7872
<h2 className="md:text-5xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
79-
Share <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600">Your Experience</span>
73+
Share <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-400 dark:to-blue-300">Your Experience</span>
8074
</h2>
8175
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
8276
We value your feedback to help us improve our services
@@ -88,7 +82,7 @@ const TestimonialsSection = () => {
8882
whileInView={{ opacity: 1, y: 0 }}
8983
transition={{ duration: 0.5, delay: 0.1 }}
9084
viewport={{ once: true }}
91-
className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 sm:p-8 max-w-2xl mx-auto border border-gray-100 dark:border-gray-700/50 backdrop-blur-sm"
85+
className="bg-white dark:bg-neutral-950 rounded-2xl shadow-xl p-6 sm:p-8 max-w-2xl mx-auto border border-gray-100 dark:border-gray-700/50 backdrop-blur-sm"
9286
>
9387
<AnimatePresence mode="wait">
9488
{submitSuccess ? (
@@ -134,7 +128,7 @@ const TestimonialsSection = () => {
134128
placeholder="John Doe"
135129
value={formData.name}
136130
onChange={handleChange}
137-
className="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700/50 transition-all"
131+
className="w-full text-black dark:text-white px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-neutral-950 transition-all"
138132
required
139133
/>
140134
</div>
@@ -149,7 +143,7 @@ const TestimonialsSection = () => {
149143
placeholder="[email protected]"
150144
value={formData.email}
151145
onChange={handleChange}
152-
className="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700/50 transition-all"
146+
className="w-full text-black dark:text-white px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-neutral-950 transition-all"
153147
required
154148
/>
155149
</div>
@@ -186,7 +180,7 @@ const TestimonialsSection = () => {
186180
rows={5}
187181
value={formData.review}
188182
onChange={handleChange}
189-
className="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700/50 transition-all"
183+
className="w-full dark:text-white text-black px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-neutral-950 transition-all"
190184
required
191185
/>
192186
</div>
@@ -207,7 +201,7 @@ const TestimonialsSection = () => {
207201
whileTap={{ scale: 0.97 }}
208202
type="submit"
209203
disabled={isSubmitting}
210-
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-400 text-white font-medium rounded-xl transition-all shadow-md hover:shadow-lg flex items-center"
204+
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white font-medium rounded-xl transition-all shadow-md hover:shadow-lg flex items-center"
211205
>
212206
{isSubmitting ? (
213207
<>

‎app/components/testimonial.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22
import React, { useState, useEffect, useRef } from 'react';
3+
import { IoChatboxEllipses } from "react-icons/io5";
34
import { FaStar, FaRegStar, FaStarHalfAlt, FaChevronDown, FaChevronUp } from 'react-icons/fa';
45
import { gsap } from 'gsap';
56
import { motion } from 'framer-motion';
@@ -108,8 +109,8 @@ const TestimonialSection = () => {
108109
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
109110
{/* Section Heading */}
110111
<div className="text-center mb-16">
111-
<span className="inline-block text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
112-
Reviews
112+
<span className="flex items-center justify-center gap-2 text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
113+
<IoChatboxEllipses className='text-xl'/>Reviews
113114
</span>
114115
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
115116
What Our <span className="text-blue-500 dark:text-blue-400">Users Say</span>

0 commit comments

Comments
 (0)