Skip to content

Commit

Permalink
Merge pull request #211 from shubhagarwal1/expdev
Browse files Browse the repository at this point in the history
Add Expert Developer Page for Showcasing Advanced Resources and Services
  • Loading branch information
rishicds authored Oct 27, 2024
2 parents f87cfd2 + 3132c7b commit 0edee56
Show file tree
Hide file tree
Showing 8 changed files with 184 additions and 0 deletions.
Binary file added public/exp1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/exp2.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/exp3.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/exp4.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/exp5.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/exp6.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/exp7.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
184 changes: 184 additions & 0 deletions src/app/(pages)/expertdev/page.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
"use client";
import React, { useState } from 'react';
import { PlayCircle, Users, ArrowRightCircle, ChevronDown, ChevronUp } from 'lucide-react';

// Header Section with Animated Background and Text
const Header = () => {
return (
<div className="relative bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white py-24 px-6 text-center overflow-hidden">
<div className="absolute top-0 left-0 w-64 h-64 bg-blue-400 rounded-full opacity-20 animate-ping"></div>
<div className="absolute top-16 right-16 w-48 h-48 bg-purple-400 rounded-full opacity-30 animate-pulse"></div>
<div className="absolute bottom-10 left-10 w-32 h-32 bg-pink-400 rounded-full opacity-40 animate-bounce"></div>

<div className="relative z-10 max-w-3xl mx-auto">
<h1 className="text-5xl font-bold mb-4">Google Developer Experts</h1>
<p className="text-xl font-medium">
Join a global network of over 1,000 professionals. Connect, share, and grow with Google Developer Experts.
</p>
<div className="mt-6">
<button className="bg-white text-blue-600 font-semibold px-8 py-3 rounded-lg hover:bg-gray-100 transition">
Become an Expert
</button>
<button className="ml-4 bg-transparent text-white font-semibold px-8 py-3 border border-white rounded-lg hover:bg-white hover:text-blue-600 transition">
View All Experts
</button>
</div>
</div>
</div>
);
};

// Section for Program Benefits with Images and Icons
const ProgramBenefits = () => {
const benefits = [
{
title: "Share",
description: "Share your knowledge with the developer community by speaking at events and mentoring others.",
icon: <Users className="w-10 h-10 text-purple-500" />,
image: "/exp1.png",
},
{
title: "Connect",
description: "Join a passionate community of technologists from around the world and network with Google teams.",
icon: <ArrowRightCircle className="w-10 h-10 text-blue-500" />,
image: "/exp2.jpeg",
},
{
title: "Develop",
description: "Grow your career by getting featured in the GDE directory and gaining early access to products.",
icon: <Users className="w-10 h-10 text-pink-500" />,
image: "/exp3.jpeg",
},
];

return (
<div className="py-20 bg-gray-50 text-center">
<h2 className="text-4xl font-bold text-gray-800 mb-10">Program Benefits</h2>
<div className="max-w-6xl mx-auto flex flex-wrap gap-8 justify-center px-6">
{benefits.map((benefit, index) => (
<div key={index} className="bg-white rounded-lg shadow-lg w-80 transform transition-transform hover:scale-105">
<img src={benefit.image} alt={benefit.title} className="rounded-t-lg w-full h-40 object-cover" />
<div className="p-6">
<div className="mb-4 flex justify-center">{benefit.icon}</div>
<h3 className="text-2xl font-semibold text-gray-800 mb-2">{benefit.title}</h3>
<p className="text-gray-600">{benefit.description}</p>
</div>
</div>
))}
</div>
</div>
);
};

// Testimonials Section with Image and Playable Video Thumbnails
const Testimonials = () => {
const testimonials = [
{
title: "Fostering an inclusive tech community with Evelyn Mendes",
link: "#",
image: "/exp3.jpeg",
},
{
title: "Using Machine Learning for COVID-19 helpline with Krupal Modi",
link: "#",
image: "/exp4.jpeg",
},
{
title: "Indian sign language recognition with Akshay Bahadur",
link: "#",
image: "/exp5.jpeg",
},
{
title: "My GDE journey by Lara Martin",
link: "#",
image: "/exp6.jpeg",
},
];

return (
<div className="py-20 bg-white text-center">
<h2 className="text-4xl font-bold text-gray-800 mb-10">Stories from the Community</h2>
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 px-6">
{testimonials.map((testimonial, index) => (
<div
key={index}
className="relative bg-gray-100 rounded-lg shadow-lg hover:bg-gray-200 transition"
>
<img src={testimonial.image} alt={testimonial.title} className="rounded-t-lg w-full h-40 object-cover" />
<div className="p-6">
<div className="absolute top-4 right-4 text-gray-500">
<PlayCircle className="w-8 h-8" />
</div>
<h3 className="text-2xl font-semibold text-gray-800 mb-4">{testimonial.title}</h3>
<button className="text-blue-600 font-medium">Watch Now</button>
</div>
</div>
))}
</div>
</div>
);
};

// Directory Iframe Section
const DirectoryIframe = () => {
return (
<div className="py-20 bg-gray-50 text-center">
<h2 className="text-4xl font-bold text-gray-800 mb-10">Explore the Expert Directory</h2>
<div className="max-w-6xl mx-auto">
<div className="devsite-landing-row-item border rounded-lg shadow-lg overflow-hidden">
<iframe
src="https://developers.google.com/frame/community/experts/index_42d78dc5096bb559bd93e00d0957167a04582b6c5a24bf34a3fce1b1c84c2335.frame"
className="w-full h-[610px] border-0"
allow="clipboard-write https://developers-dot-devsite-v2-prod.appspot.com"
allowFullScreen
></iframe>
</div>
</div>
</div>
);
};


// Social Media Links Section
const SocialMedia = () => {
const socials = [
{ platform: "YouTube", icon: "📺", link: "#" },
{ platform: "LinkedIn", icon: "🔗", link: "#" },
{ platform: "X (Twitter)", icon: "🐦", link: "#" },
{ platform: "Medium", icon: "✍️", link: "#" },
];

return (
<div className="py-16 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-center">
<h2 className="text-3xl font-bold mb-6">Stay in Touch</h2>
<p className="text-lg mb-8">Follow Google Developer Experts for the latest news and updates.</p>
<div className="flex justify-center gap-10">
{socials.map((social, index) => (
<a
key={index}
href={social.link}
className="text-4xl hover:scale-110 transition transform"
aria-label={social.platform}
>
{social.icon}
</a>
))}
</div>
</div>
);
};

// Main Google Developer Experts Page Component
const GoogleDeveloperExpertsPage = () => {
return (
<div>
<Header />
<ProgramBenefits />
<Testimonials />
<DirectoryIframe /> {/* Added Directory Iframe Section */}
<SocialMedia />
</div>
);
};

export default GoogleDeveloperExpertsPage;

0 comments on commit 0edee56

Please sign in to comment.