|
| 1 | +import Image from 'next/image'; |
| 2 | + |
| 3 | +const About = () => { |
| 4 | + const sessions = [ |
| 5 | + { |
| 6 | + host: "Shahbaz Asif", |
| 7 | + title: "Next JS | TypeScript | Figma for Web Design", |
| 8 | + time: "6:00 to 7:00 PM (Sunday off)", |
| 9 | + description: "Figma for Web & Mobile Apps", |
| 10 | + discordLink: "https://discord.gg/GKRK7AUswr", |
| 11 | + youtubeLink: "https://www.youtube.com/@LearnthenDesign/streams", |
| 12 | + linkedinLink: "https://www.linkedin.com/events/basicweblayout-buttonsandfonts-7280738364230688768/theater/", |
| 13 | + emoji: "💻" |
| 14 | + }, |
| 15 | + { |
| 16 | + host: "Rabia Noreen", |
| 17 | + title: "Day 2: English Speaking Practice | Personal Pronouns", |
| 18 | + time: "7:00 to 8:00 PM (Sunday, Wednesday off)", |
| 19 | + description: "Beginners to Advance | Mastering in English", |
| 20 | + discordLink: "https://discord.gg/hKPuwpQbgS", |
| 21 | + youtubeLink: "https://www.youtube.com/live/e7kktLjaVbY?si=IveS3DSn7GvYLpZN", |
| 22 | + linkedinLink: "https://www.linkedin.com/events/day2-englishspeakingpracticeonl7280700168629370880/theater/", |
| 23 | + emoji: "🗣️" |
| 24 | + }, |
| 25 | + { |
| 26 | + host: "Minahil Nawaz", |
| 27 | + title: "Lec-3: Python | String Complete | Conditional Statements", |
| 28 | + time: "8:00 PM to 9:00 PM", |
| 29 | + description: "Basic To Advance Full Course", |
| 30 | + discordLink: "https://discord.gg/Pgw2nf2ewn", |
| 31 | + youtubeLink: "https://youtube.com/live/0m3Q0a2UkIw?feature=share", |
| 32 | + linkedinLink: "https://www.linkedin.com/events/lec-3-python-stringcomplete-con7280748479679782913/theater/", |
| 33 | + emoji: "🐍" |
| 34 | + }, |
| 35 | + { |
| 36 | + host: "Minahil Nawaz", |
| 37 | + title: "Agent AI PIAIC201", |
| 38 | + time: "9:00 PM to 11:59 PM", |
| 39 | + description: "Agent AI Exploring LLM Models Generation & Script Analysis + LangChain RAG", |
| 40 | + discordLink: "https://discord.gg/Pgw2nf2ewn", |
| 41 | + youtubeLink: "https://youtube.com/live/0m3Q0a2UkIw?feature=share", |
| 42 | + linkedinLink: "https://www.linkedin.com/events/langchainrag-llmmodelsforcreati7280751452996722688/theater/", |
| 43 | + emoji: "🤖" |
| 44 | + }, |
| 45 | + { |
| 46 | + host: "Muhammad Tahir", |
| 47 | + title: "FastAPI PostgreSQL with Next.js", |
| 48 | + time: "10:00 PM to 11:00 PM", |
| 49 | + description: "Implementing FastAPI with PostgreSQL and Next.js", |
| 50 | + discordLink: "https://discord.gg/72AjJzquu8", |
| 51 | + youtubeLink: "https://youtube.com/live/YLHenP2i980?feature=share", |
| 52 | + linkedinLink: "https://www.linkedin.com/events/implementingstudentsapiwithfast7280754291022192640/theater/", |
| 53 | + channelLink: "https://www.youtube.com/@motivation2code", |
| 54 | + emoji: "⚙️" |
| 55 | + } |
| 56 | + ]; |
| 57 | + |
| 58 | + return ( |
| 59 | + <div className="max-w-6xl mx-auto px-4 py-8"> |
| 60 | + <div className="text-center mb-6"> |
| 61 | + <Image |
| 62 | + src="/logo1.jpg" |
| 63 | + alt="Logo" |
| 64 | + width={150} |
| 65 | + height={150} |
| 66 | + className="mx-auto mb-4" |
| 67 | + /> |
| 68 | + <h1 className="text-3xl font-semibold text-gray-800">About Us</h1> |
| 69 | + <p className="mt-2 text-lg text-gray-600">We offer a variety of online courses to help you improve your skills.</p> |
| 70 | + <p className="mt-2 text-lg text-gray-600">TypeScript 🟨 | Next.js ⚛️ | Figma 🎨</p> |
| 71 | + </div> |
| 72 | + |
| 73 | + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8"> |
| 74 | + {sessions.map((session, index) => ( |
| 75 | + <div key={index} className="bg-white shadow-lg rounded-lg overflow-hidden relative group"> |
| 76 | + <div className="absolute inset-0 bg-cover bg-center opacity-40 group-hover:opacity-50" style={{ backgroundImage: 'url(/logo1.png)' }}></div> |
| 77 | + <div className="p-6 relative z-10"> |
| 78 | + <h2 className="text-2xl font-semibold text-slate-950"> |
| 79 | + {session.title} {session.emoji} |
| 80 | + </h2> |
| 81 | + <p className="mt-2 text-lg text-slate-950"><strong>Host:</strong> {session.host}</p> |
| 82 | + <p className="mt-2 text-lg text-slate-950"><strong>Time:</strong> {session.time}</p> |
| 83 | + <p className="mt-4 text-slate-950">{session.description}</p> |
| 84 | + </div> |
| 85 | + <div className="px-6 py-4 border-t border-gray-200 relative z-10"> |
| 86 | + <div className="flex space-x-4"> |
| 87 | + <a href={session.discordLink} className="text-blue-500 hover:underline">Discord</a> |
| 88 | + <a href={session.youtubeLink} className="text-blue-500 hover:underline">YouTube</a> |
| 89 | + <a href={session.linkedinLink} className="text-blue-500 hover:underline">LinkedIn</a> |
| 90 | + {session.channelLink && ( |
| 91 | + <a href={session.channelLink} className="text-blue-500 hover:underline">Channel</a> |
| 92 | + )} |
| 93 | + </div> |
| 94 | + </div> |
| 95 | + </div> |
| 96 | + ))} |
| 97 | + </div> |
| 98 | + </div> |
| 99 | + ); |
| 100 | +} |
| 101 | + |
| 102 | +export default About; |
0 commit comments