Skip to content

Commit 3d220ba

Browse files
manascb1344manascb1344
committed
refactor(ai-group): improve layout and styling across components
- Made it mobile friendly
1 parent a6869da commit 3d220ba

File tree

8 files changed

+99
-96
lines changed

8 files changed

+99
-96
lines changed

‎components/ai-group/Events.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,45 +30,45 @@ const events = [
3030

3131
export function Events() {
3232
return (
33-
<section className="py-20 bg-neutral-950">
33+
<section className="py-12 md:py-20 bg-neutral-950">
3434
<div className="container px-4 mx-auto">
3535
<motion.div
3636
initial={{ opacity: 0, y: 20 }}
3737
whileInView={{ opacity: 1, y: 0 }}
3838
transition={{ duration: 0.5 }}
39-
className="text-center mb-16"
39+
className="text-center mb-8 md:mb-16"
4040
>
41-
<h2 className="text-4xl font-bold text-white mb-4">Upcoming Events</h2>
42-
<p className="text-gray-400 max-w-2xl mx-auto">
41+
<h2 className="text-3xl md:text-4xl font-bold text-white mb-3 md:mb-4">Upcoming Events</h2>
42+
<p className="text-gray-400 max-w-2xl mx-auto text-sm md:text-base">
4343
Join us for exciting AI events, workshops, and learning opportunities
4444
</p>
4545
</motion.div>
4646

47-
<div className="space-y-6">
47+
<div className="space-y-4 md:space-y-6">
4848
{events.map((event, index) => (
4949
<motion.div
5050
key={index}
5151
initial={{ opacity: 0, x: -20 }}
5252
whileInView={{ opacity: 1, x: 0 }}
5353
transition={{ duration: 0.5, delay: index * 0.1 }}
5454
>
55-
<Card className="p-6 bg-neutral-900/50 border-neutral-800 hover:border-neutral-700 transition-all">
55+
<Card className="p-4 md:p-6 bg-neutral-900/50 border-neutral-800 hover:border-neutral-700 transition-all">
5656
<div className="flex flex-col md:flex-row md:items-center justify-between">
5757
<div className="flex-1">
58-
<div className="flex items-center mb-2">
59-
<Icons.calendar className="h-5 w-5 text-emerald-400 mr-2" />
60-
<span className="text-emerald-400">{event.date}</span>
58+
<div className="flex items-center mb-1.5 md:mb-2">
59+
<Icons.calendar className="h-4 w-4 md:h-5 md:w-5 text-emerald-400 mr-1.5 md:mr-2" />
60+
<span className="text-emerald-400 text-sm md:text-base">{event.date}</span>
6161
</div>
62-
<h3 className="text-xl font-semibold text-white mb-2">{event.title}</h3>
63-
<p className="text-gray-400 mb-4">{event.description}</p>
62+
<h3 className="text-lg md:text-xl font-semibold text-white mb-1.5 md:mb-2">{event.title}</h3>
63+
<p className="text-gray-400 mb-3 md:mb-4 text-sm md:text-base">{event.description}</p>
6464
<div className="flex items-center text-gray-500">
65-
<Icons.mapPin className="h-4 w-4 mr-2" />
66-
<span>{event.location}</span>
65+
<Icons.mapPin className="h-3.5 w-3.5 md:h-4 md:w-4 mr-1.5 md:mr-2" />
66+
<span className="text-sm md:text-base">{event.location}</span>
6767
</div>
6868
</div>
69-
<div className="mt-4 md:mt-0 md:ml-6">
69+
<div className="mt-4 md:mt-0 md:ml-6 flex justify-start md:justify-end">
7070
<button
71-
className={`px-4 py-2 rounded-lg transition-colors ${
71+
className={`px-3 md:px-4 py-1.5 md:py-2 rounded-lg transition-colors text-sm md:text-base ${
7272
event.registration === "Open"
7373
? "bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30"
7474
: "bg-gray-500/20 text-gray-400 cursor-not-allowed"

‎components/ai-group/JoinCTA.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,63 +5,63 @@ import { Icons } from "@/components/icons";
55

66
export function JoinCTA() {
77
return (
8-
<section className="py-20 bg-gradient-to-b from-neutral-950 to-black">
8+
<section className="py-12 md:py-20 bg-gradient-to-b from-neutral-950 to-black">
99
<div className="container px-4 mx-auto">
1010
<motion.div
1111
initial={{ opacity: 0, y: 20 }}
1212
whileInView={{ opacity: 1, y: 0 }}
1313
transition={{ duration: 0.5 }}
1414
className="max-w-4xl mx-auto text-center"
1515
>
16-
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
16+
<h2 className="text-3xl md:text-5xl font-bold text-white mb-4 md:mb-6">
1717
Join the AI Revolution
1818
</h2>
19-
<p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
19+
<p className="text-base md:text-xl text-gray-400 mb-6 md:mb-8 max-w-2xl mx-auto">
2020
Be part of our innovative AI community. Learn, collaborate, and build the future of artificial intelligence together.
2121
</p>
22-
<div className="flex flex-col sm:flex-row gap-4 justify-center">
22+
<div className="flex flex-col sm:flex-row gap-3 md:gap-4 justify-center">
2323
<a
2424
href="#apply"
25-
className="inline-flex items-center justify-center px-6 py-3 rounded-lg bg-emerald-500 text-white hover:bg-emerald-600 transition-colors"
25+
className="inline-flex items-center justify-center px-4 md:px-6 py-2.5 md:py-3 rounded-lg bg-emerald-500 text-white hover:bg-emerald-600 transition-colors text-sm md:text-base"
2626
>
2727
Apply Now
28-
<Icons.arrowRight className="ml-2 h-5 w-5" />
28+
<Icons.arrowRight className="ml-1.5 md:ml-2 h-4 w-4 md:h-5 md:w-5" />
2929
</a>
3030
<a
3131
href="#contact"
32-
className="inline-flex items-center justify-center px-6 py-3 rounded-lg bg-neutral-800 text-white hover:bg-neutral-700 transition-colors"
32+
className="inline-flex items-center justify-center px-4 md:px-6 py-2.5 md:py-3 rounded-lg bg-neutral-800 text-white hover:bg-neutral-700 transition-colors text-sm md:text-base"
3333
>
3434
Contact Us
35-
<Icons.mail className="ml-2 h-5 w-5" />
35+
<Icons.mail className="ml-1.5 md:ml-2 h-4 w-4 md:h-5 md:w-5" />
3636
</a>
3737
</div>
3838

3939
<motion.div
4040
initial={{ opacity: 0, y: 20 }}
4141
whileInView={{ opacity: 1, y: 0 }}
4242
transition={{ duration: 0.5, delay: 0.2 }}
43-
className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8"
43+
className="mt-8 md:mt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8"
4444
>
4545
<div className="text-center">
46-
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-500/10 text-blue-400 mb-4">
47-
<Icons.users className="h-6 w-6" />
46+
<div className="inline-flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full bg-blue-500/10 text-blue-400 mb-3 md:mb-4">
47+
<Icons.users className="h-5 w-5 md:h-6 md:w-6" />
4848
</div>
49-
<h3 className="text-white font-semibold mb-2">Community</h3>
50-
<p className="text-gray-400">Join a vibrant community of AI enthusiasts</p>
49+
<h3 className="text-white font-semibold mb-1 md:mb-2 text-lg md:text-xl">Community</h3>
50+
<p className="text-gray-400 text-sm md:text-base">Join a vibrant community of AI enthusiasts</p>
5151
</div>
5252
<div className="text-center">
53-
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-purple-500/10 text-purple-400 mb-4">
54-
<Icons.brain className="h-6 w-6" />
53+
<div className="inline-flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full bg-purple-500/10 text-purple-400 mb-3 md:mb-4">
54+
<Icons.brain className="h-5 w-5 md:h-6 md:w-6" />
5555
</div>
56-
<h3 className="text-white font-semibold mb-2">Learning</h3>
57-
<p className="text-gray-400">Access exclusive AI/ML learning resources</p>
56+
<h3 className="text-white font-semibold mb-1 md:mb-2 text-lg md:text-xl">Learning</h3>
57+
<p className="text-gray-400 text-sm md:text-base">Access exclusive AI/ML learning resources</p>
5858
</div>
59-
<div className="text-center">
60-
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-emerald-500/10 text-emerald-400 mb-4">
61-
<Icons.rocket className="h-6 w-6" />
59+
<div className="text-center sm:col-span-2 md:col-span-1">
60+
<div className="inline-flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full bg-emerald-500/10 text-emerald-400 mb-3 md:mb-4">
61+
<Icons.rocket className="h-5 w-5 md:h-6 md:w-6" />
6262
</div>
63-
<h3 className="text-white font-semibold mb-2">Projects</h3>
64-
<p className="text-gray-400">Work on cutting-edge AI projects</p>
63+
<h3 className="text-white font-semibold mb-1 md:mb-2 text-lg md:text-xl">Projects</h3>
64+
<p className="text-gray-400 text-sm md:text-base">Work on cutting-edge AI projects</p>
6565
</div>
6666
</motion.div>
6767
</motion.div>

‎components/ai-group/ProjectGallery.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33

44
import { motion } from "framer-motion";
5+
import Image from "next/image";
56
import { Card } from "@/components/ui/card";
67
import { Icons } from "@/components/icons";
78

@@ -31,45 +32,47 @@ const projects = [
3132

3233
export function ProjectGallery() {
3334
return (
34-
<section className="py-20 bg-black/50">
35+
<section className="py-12 md:py-20 bg-black/50">
3536
<div className="container px-4 mx-auto">
3637
<motion.div
3738
initial={{ opacity: 0, y: 20 }}
3839
whileInView={{ opacity: 1, y: 0 }}
3940
transition={{ duration: 0.5 }}
40-
className="text-center mb-16"
41+
className="text-center mb-8 md:mb-16"
4142
>
42-
<h2 className="text-4xl font-bold text-white mb-4">Project Gallery</h2>
43-
<p className="text-gray-400 max-w-2xl mx-auto">
43+
<h2 className="text-3xl md:text-4xl font-bold text-white mb-3 md:mb-4">Project Gallery</h2>
44+
<p className="text-gray-400 max-w-2xl mx-auto text-sm md:text-base">
4445
Explore our collection of innovative AI projects with live demonstrations
4546
</p>
4647
</motion.div>
4748

48-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
49+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
4950
{projects.map((project, index) => (
5051
<motion.div
5152
key={index}
5253
initial={{ opacity: 0, y: 20 }}
5354
whileInView={{ opacity: 1, y: 0 }}
5455
transition={{ duration: 0.5, delay: index * 0.1 }}
5556
>
56-
<Card className="overflow-hidden bg-neutral-900/50 border-neutral-800 hover:border-neutral-700 transition-all">
57+
<Card className="overflow-hidden bg-neutral-900/50 border-neutral-800 hover:border-neutral-700 transition-all h-full flex flex-col">
5758
<div className="aspect-video relative">
5859
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
59-
<img
60+
<Image
6061
src={project.image}
6162
alt={project.title}
63+
fill
6264
className="w-full h-full object-cover"
65+
loading="lazy"
6366
/>
6467
</div>
65-
<div className="p-6">
66-
<h3 className="text-xl font-semibold text-white mb-2">{project.title}</h3>
67-
<p className="text-gray-400 mb-4">{project.description}</p>
68-
<div className="flex flex-wrap gap-2 mb-4">
68+
<div className="p-4 md:p-6 flex flex-col flex-1">
69+
<h3 className="text-lg md:text-xl font-semibold text-white mb-1.5 md:mb-2">{project.title}</h3>
70+
<p className="text-gray-400 mb-3 md:mb-4 text-sm md:text-base">{project.description}</p>
71+
<div className="flex flex-wrap gap-1.5 md:gap-2 mb-3 md:mb-4 mt-auto">
6972
{project.tech.map((tech, i) => (
7073
<span
7174
key={i}
72-
className="px-2 py-1 text-sm bg-blue-500/10 text-blue-300 rounded"
75+
className="px-2 py-0.5 md:py-1 text-xs md:text-sm bg-blue-500/10 text-blue-300 rounded"
7376
>
7477
{tech}
7578
</span>
@@ -79,10 +82,10 @@ export function ProjectGallery() {
7982
href={project.demo}
8083
target="_blank"
8184
rel="noopener noreferrer"
82-
className="inline-flex items-center text-emerald-400 hover:text-emerald-300 transition-colors"
85+
className="inline-flex items-center text-emerald-400 hover:text-emerald-300 transition-colors text-sm md:text-base"
8386
>
8487
View Live Demo
85-
<Icons.externalLink className="ml-2 h-4 w-4" />
88+
<Icons.externalLink className="ml-1.5 md:ml-2 h-3.5 w-3.5 md:h-4 md:w-4" />
8689
</a>
8790
</div>
8891
</Card>

‎components/ai-group/ResearchProjects.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,44 +26,44 @@ const projects = [
2626

2727
export function ResearchProjects() {
2828
return (
29-
<section className="py-20 bg-black/50">
29+
<section className="py-12 md:py-20 bg-black/50">
3030
<div className="container px-4 mx-auto">
3131
<motion.div
3232
initial={{ opacity: 0, y: 20 }}
3333
whileInView={{ opacity: 1, y: 0 }}
3434
transition={{ duration: 0.5 }}
35-
className="text-center mb-16"
35+
className="text-center mb-8 md:mb-16"
3636
>
37-
<h2 className="text-4xl font-bold text-white mb-4">Research Projects</h2>
38-
<p className="text-gray-400 max-w-2xl mx-auto">
37+
<h2 className="text-3xl md:text-4xl font-bold text-white mb-3 md:mb-4">Research Projects</h2>
38+
<p className="text-gray-400 max-w-2xl mx-auto text-sm md:text-base">
3939
Exploring the frontiers of artificial intelligence through innovative research projects
4040
</p>
4141
</motion.div>
4242

43-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
43+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
4444
{projects.map((project, index) => (
4545
<motion.div
4646
key={index}
4747
initial={{ opacity: 0, y: 20 }}
4848
whileInView={{ opacity: 1, y: 0 }}
4949
transition={{ duration: 0.5, delay: index * 0.1 }}
5050
>
51-
<Card className="p-6 bg-neutral-900/50 border-neutral-800 hover:border-neutral-700 transition-colors">
51+
<Card className="p-4 md:p-6 bg-neutral-900/50 border-neutral-800 hover:border-neutral-700 transition-colors h-full">
5252
<div className="flex flex-col h-full">
53-
<h3 className="text-xl font-semibold text-white mb-2">{project.title}</h3>
54-
<p className="text-gray-400 mb-4 flex-grow">{project.description}</p>
55-
<div className="flex flex-wrap gap-2">
53+
<h3 className="text-lg md:text-xl font-semibold text-white mb-1.5 md:mb-2">{project.title}</h3>
54+
<p className="text-gray-400 mb-3 md:mb-4 flex-grow text-sm md:text-base">{project.description}</p>
55+
<div className="flex flex-wrap gap-1.5 md:gap-2">
5656
{project.tech.map((tech, i) => (
5757
<span
5858
key={i}
59-
className="px-2 py-1 text-sm bg-blue-500/10 text-blue-300 rounded"
59+
className="px-2 py-0.5 md:py-1 text-xs md:text-sm bg-blue-500/10 text-blue-300 rounded"
6060
>
6161
{tech}
6262
</span>
6363
))}
6464
</div>
65-
<div className="mt-4">
66-
<span className="px-2 py-1 text-sm bg-green-500/10 text-green-300 rounded">
65+
<div className="mt-3 md:mt-4">
66+
<span className="px-2 py-0.5 md:py-1 text-xs md:text-sm bg-green-500/10 text-green-300 rounded">
6767
{project.status}
6868
</span>
6969
</div>

‎components/ai-group/ResourcesHub.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,46 +33,46 @@ const resources = [
3333

3434
export function ResourcesHub() {
3535
return (
36-
<section className="py-20 bg-black/50">
36+
<section className="py-12 md:py-20 bg-black/50">
3737
<div className="container px-4 mx-auto">
3838
<motion.div
3939
initial={{ opacity: 0, y: 20 }}
4040
whileInView={{ opacity: 1, y: 0 }}
4141
transition={{ duration: 0.5 }}
42-
className="text-center mb-16"
42+
className="text-center mb-8 md:mb-16"
4343
>
44-
<h2 className="text-4xl font-bold text-white mb-4">ML/DL Resources</h2>
45-
<p className="text-gray-400 max-w-2xl mx-auto">
44+
<h2 className="text-3xl md:text-4xl font-bold text-white mb-3 md:mb-4">ML/DL Resources</h2>
45+
<p className="text-gray-400 max-w-2xl mx-auto text-sm md:text-base">
4646
Access our carefully curated collection of learning resources, tools, and research materials
4747
</p>
4848
</motion.div>
4949

50-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
50+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
5151
{resources.map((resource, index) => (
5252
<motion.div
5353
key={index}
5454
initial={{ opacity: 0, y: 20 }}
5555
whileInView={{ opacity: 1, y: 0 }}
5656
transition={{ duration: 0.5, delay: index * 0.1 }}
5757
>
58-
<Card className="p-6 bg-neutral-900/50 border-neutral-800 hover:border-neutral-700 transition-all hover:scale-[1.02]">
59-
<div className="flex items-start space-x-4">
60-
<div className="bg-blue-500/10 p-3 rounded-lg">
61-
<Icons.book className="h-6 w-6 text-blue-400" />
58+
<Card className="p-4 md:p-6 bg-neutral-900/50 border-neutral-800 hover:border-neutral-700 transition-all hover:scale-[1.02]">
59+
<div className="flex items-start space-x-3 md:space-x-4">
60+
<div className="bg-blue-500/10 p-2 md:p-3 rounded-lg shrink-0">
61+
<Icons.book className="h-5 w-5 md:h-6 md:w-6 text-blue-400" />
6262
</div>
63-
<div>
64-
<h3 className="text-xl font-semibold text-white mb-2">{resource.title}</h3>
65-
<p className="text-gray-400 mb-4">{resource.description}</p>
66-
<div className="flex items-center justify-between">
67-
<span className="px-2 py-1 text-sm bg-purple-500/10 text-purple-300 rounded">
63+
<div className="min-w-0">
64+
<h3 className="text-lg md:text-xl font-semibold text-white mb-1 md:mb-2">{resource.title}</h3>
65+
<p className="text-gray-400 mb-3 md:mb-4 text-sm md:text-base">{resource.description}</p>
66+
<div className="flex items-center justify-between flex-wrap gap-2">
67+
<span className="px-2 py-1 text-xs md:text-sm bg-purple-500/10 text-purple-300 rounded">
6868
{resource.type}
6969
</span>
7070
<a
7171
href={resource.link}
72-
className="text-blue-400 hover:text-blue-300 transition-colors flex items-center"
72+
className="text-blue-400 hover:text-blue-300 transition-colors flex items-center text-sm md:text-base"
7373
>
7474
Learn More
75-
<Icons.arrowRight className="ml-2 h-4 w-4" />
75+
<Icons.arrowRight className="ml-1 md:ml-2 h-3 w-3 md:h-4 md:w-4" />
7676
</a>
7777
</div>
7878
</div>

0 commit comments

Comments
 (0)