From 3737120f16e6c62ab5597af411f6fa9344a9253a Mon Sep 17 00:00:00 2001 From: MIGHTY1o1 Date: Mon, 28 Oct 2024 04:03:56 +0530 Subject: [PATCH] add roadmap page --- src/app/(pages)/certifications/page.jsx | 236 ++++++++++++++++++++++++ src/app/(pages)/explore/page.jsx | 0 2 files changed, 236 insertions(+) create mode 100644 src/app/(pages)/certifications/page.jsx create mode 100644 src/app/(pages)/explore/page.jsx diff --git a/src/app/(pages)/certifications/page.jsx b/src/app/(pages)/certifications/page.jsx new file mode 100644 index 0000000..ab30f9f --- /dev/null +++ b/src/app/(pages)/certifications/page.jsx @@ -0,0 +1,236 @@ +"use client"; +import React, { useState } from "react"; +import { motion } from "framer-motion"; +import { + MapPin, + Calendar, + BookOpen, + CheckCircle, + Cloud, + Code, + Search, + ArrowRight +} from "lucide-react"; + +const certifications = [ + "Associate Cloud Engineer", + "Professional Cloud Architect", + "Professional Cloud Developer", + "Professional Cloud DevOps Engineer", + "Professional Cloud Security Engineer", + "Professional Cloud Network Engineer", + "Professional Data Engineer", + "Professional Machine Learning Engineer", +]; + +const events = [ + { title: "DevFest New Delhi 2024", location: "Delhi", date: "Nov 9" }, + { title: "Gen AI Study Jam", location: "Delhi", date: "Sep 25" }, + { title: "Cloud Innovation Workshop", location: "Chandigarh", date: "Oct 28" }, + { title: "DevFest Jalandhar 2024", location: "Jalandhar", date: "Nov 30" }, + { title: "Google Devfest-‎Gemini Lahore 2024", location: "Lahore", date: "Dec 7" }, + { title: "DevFest Udaipur 2024", location: "Udaipur", date: "Nov 24" }, + { title: "DevFest 2024 Bhubaneswar", location: "Bhubaneswar", date: "Nov 10" }, + { title: "Responsible AI Workshop", location: "Almaty", date: "Oct 30" }, +]; + +const CertificationCard = ({ title }) => ( + +
+
+ +
+
+

{title}

+

Prepare for certification with expert-led sessions

+
+
+
+ Learn more + +
+ +); + +const EventCard = ({ title, location, date }) => ( + +
+ {date} +

{title}

+
+ + {location} +
+
+ +); + +const RoadToCertificationPage = () => { + const [searchTerm, setSearchTerm] = useState(""); + + return ( +
+ {/* Hero Section */} +
+
+
+ +

Road to Google Cloud Certification

+

+ Join community-led events, hosted by Google Developer Groups, to prepare for Google Cloud certifications with hands-on workshops and expert support. +

+
+ + +
+ +
+
+ + {/* How It Works Section */} +
+
+

How It Works

+
+ {[ + { + icon: , + title: "Register", + description: "Find and RSVP for certification events near you" + }, + { + icon: , + title: "Learn", + description: "Access study materials and hands-on labs" + }, + { + icon: , + title: "Practice", + description: "Work on real-world scenarios with experts" + } + ].map((step, index) => ( + +
+ {step.icon} +
+

{step.title}

+

{step.description}

+ + ))} +
+
+
+ + {/* Certifications Section */} +
+
+

Available Certifications

+

+ Choose from a wide range of Google Cloud certifications and start your journey to becoming a certified professional. +

+
+ {certifications.map((cert, index) => ( + + ))} +
+
+
+ + {/* Events Section */} +
+
+

Upcoming Events

+
+
+ setSearchTerm(e.target.value)} + placeholder="Search events by city..." + className="w-full px-6 py-4 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent pl-12" + /> + +
+
+
+ {events + .filter(event => + event.location.toLowerCase().includes(searchTerm.toLowerCase()) || + event.title.toLowerCase().includes(searchTerm.toLowerCase()) + ) + .map((event, index) => ( + + )) + } +
+
+
+ + {/* Footer */} + +
+ ); +}; + +export default RoadToCertificationPage; \ No newline at end of file diff --git a/src/app/(pages)/explore/page.jsx b/src/app/(pages)/explore/page.jsx new file mode 100644 index 0000000..e69de29