Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Roadmap Page to Outline Future Development Plans and Milestones #277

Merged
merged 1 commit into from
Oct 28, 2024
Merged

Add Roadmap Page to Outline Future Development Plans and Milestones #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 236 additions & 0 deletions src/app/(pages)/certifications/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }) => (
<motion.div
className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-blue-200 group"
whileHover={{ y: -5 }}
>
<div className="flex items-start gap-4">
<div className="p-3 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
<Cloud className="text-blue-600 w-6 h-6" />
</div>
<div>
<h3 className="text-lg font-semibold text-gray-800 group-hover:text-blue-600 transition-colors">{title}</h3>
<p className="mt-2 text-gray-600">Prepare for certification with expert-led sessions</p>
</div>
</div>
<div className="mt-4 flex items-center text-blue-600 font-medium">
<span>Learn more</span>
<ArrowRight className="w-4 h-4 ml-2" />
</div>
</motion.div>
);

const EventCard = ({ title, location, date }) => (
<motion.div
className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 border border-gray-100"
whileHover={{ y: -5 }}
>
<div className="flex flex-col h-full">
<span className="text-sm font-medium text-green-600 mb-2">{date}</span>
<h3 className="text-xl font-bold text-gray-800 mb-3">{title}</h3>
<div className="flex items-center text-gray-600 mt-auto">
<MapPin className="w-4 h-4 mr-2" />
<span>{location}</span>
</div>
</div>
</motion.div>
);

const RoadToCertificationPage = () => {
const [searchTerm, setSearchTerm] = useState("");

return (
<div className="min-h-screen bg-gray-50">
{/* Hero Section */}
<div className="bg-gradient-to-br from-blue-600 via-blue-500 to-green-400 text-white relative overflow-hidden">
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDIwIDAgTCAwIDAgMCAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmlkKSIvPjwvc3ZnPg==')] opacity-30" />
<div className="container mx-auto px-6 py-24 relative">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="max-w-4xl mx-auto text-center"
>
<h1 className="text-5xl font-bold mb-6">Road to Google Cloud Certification</h1>
<p className="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
Join community-led events, hosted by Google Developer Groups, to prepare for Google Cloud certifications with hands-on workshops and expert support.
</p>
<div className="flex gap-4 justify-center">
<button className="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-blue-50 transition-colors">
Get Started
</button>
<button className="bg-transparent border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white/10 transition-colors">
Learn More
</button>
</div>
</motion.div>
</div>
</div>

{/* How It Works Section */}
<div className="py-20 bg-white">
<div className="container mx-auto px-6">
<h2 className="text-3xl font-bold text-center text-gray-800 mb-16">How It Works</h2>
<div className="grid md:grid-cols-3 gap-12">
{[
{
icon: <CheckCircle className="text-red-500 w-8 h-8" />,
title: "Register",
description: "Find and RSVP for certification events near you"
},
{
icon: <BookOpen className="text-yellow-500 w-8 h-8" />,
title: "Learn",
description: "Access study materials and hands-on labs"
},
{
icon: <Code className="text-green-500 w-8 h-8" />,
title: "Practice",
description: "Work on real-world scenarios with experts"
}
].map((step, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.2 }}
className="text-center"
>
<div className="bg-gray-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
{step.icon}
</div>
<h3 className="text-xl font-semibold mb-4">{step.title}</h3>
<p className="text-gray-600">{step.description}</p>
</motion.div>
))}
</div>
</div>
</div>

{/* Certifications Section */}
<div className="py-20 bg-gray-50">
<div className="container mx-auto px-6">
<h2 className="text-3xl font-bold text-center text-gray-800 mb-6">Available Certifications</h2>
<p className="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
Choose from a wide range of Google Cloud certifications and start your journey to becoming a certified professional.
</p>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{certifications.map((cert, index) => (
<CertificationCard key={index} title={cert} />
))}
</div>
</div>
</div>

{/* Events Section */}
<div className="py-20 bg-white">
<div className="container mx-auto px-6">
<h2 className="text-3xl font-bold text-center text-gray-800 mb-6">Upcoming Events</h2>
<div className="max-w-xl mx-auto mb-12">
<div className="relative">
<input
type="text"
value={searchTerm}
onChange={(e) => 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"
/>
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
</div>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{events
.filter(event =>
event.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
event.title.toLowerCase().includes(searchTerm.toLowerCase())
)
.map((event, index) => (
<EventCard key={index} {...event} />
))
}
</div>
</div>
</div>

{/* Footer */}
<footer className="bg-gray-900 text-white py-12">
<div className="container mx-auto px-6">
<div className="grid md:grid-cols-4 gap-8 mb-8">
<div>
<h3 className="font-bold mb-4">About</h3>
<ul className="space-y-2">
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">About GDG</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Chapters</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Community</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Resources</h3>
<ul className="space-y-2">
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Documentation</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Cloud Console</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Support</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Events</h3>
<ul className="space-y-2">
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Calendar</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">DevFest</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Study Jams</a></li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Legal</h3>
<ul className="space-y-2">
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Privacy</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Terms</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Cookie Policy</a></li>
</ul>
</div>
</div>
<div className="border-t border-gray-800 pt-8 text-center text-gray-400">
<p>© 2024 Google. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
};

export default RoadToCertificationPage;
Empty file added src/app/(pages)/explore/page.jsx
View file
Open in desktop
Empty file.
Loading