Skip to content

Commit

Permalink
Merge pull request #255 from shubhagarwal1/devprod
Browse files Browse the repository at this point in the history
Add Developer Portal for Productive Development Resources and Documentation
  • Loading branch information
rishicds authored Oct 28, 2024
2 parents 43286bf + 6d31e5d commit 18a976c
Show file tree
Hide file tree
Showing 7 changed files with 167 additions and 0 deletions.
Binary file added public/devprod1.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/devprod2.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/devprod3.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/devprod4.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/devprod5.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/devprod6.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
167 changes: 167 additions & 0 deletions src/app/(pages)/devprod/page.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
"use client";
import React, { useState } from 'react';
import { Search } from 'lucide-react';

// Header Section with Search Bar
const Header = () => {
return (
<div className="relative bg-gradient-to-r from-[#4285F4] via-[#34A853] to-[#EA4335] text-white py-20 px-6 text-center">
<h1 className="text-5xl font-bold mb-4">Developer Products</h1>
<p className="text-lg font-light mb-8 max-w-lg mx-auto">
Discover powerful tools and platforms designed to accelerate your development journey with Google.
</p>
<div className="mt-6 max-w-lg mx-auto flex items-center bg-white rounded-full overflow-hidden shadow-lg">
<input
type="text"
placeholder="Search for a product..."
className="flex-grow py-3 px-4 text-gray-800 focus:outline-none"
/>
<button className="bg-[#4285F4] text-white px-6 py-3 hover:bg-[#357ae8] transition">
<Search className="w-5 h-5" />
</button>
</div>
</div>
);
};

// Filter Section with Category and Development Focus Buttons
const Filters = ({ selectedCategory, setSelectedCategory, selectedFocus, setSelectedFocus }) => {
const categories = ["Platforms", "Frameworks", "Services", "Growth"];
const focusAreas = ["AI", "Mobile", "Web", "Cloud"];

return (
<div className="py-8 bg-gray-50 border-t border-b">
<div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-4 px-6">
<div>
<h3 className="text-xl font-semibold mb-2">Product Category</h3>
<div className="flex flex-wrap gap-2">
{categories.map((category, index) => (
<button
key={index}
onClick={() => setSelectedCategory(category)}
className={`px-4 py-2 rounded-full text-sm font-medium transition ${selectedCategory === category
? "bg-[#34A853] text-white"
: "bg-gray-200 text-gray-800 hover:bg-gray-300"
}`}
>
{category}
</button>
))}
</div>
</div>
<div>
<h3 className="text-xl font-semibold mb-2">Development Focus</h3>
<div className="flex flex-wrap gap-2">
{focusAreas.map((focus, index) => (
<button
key={index}
onClick={() => setSelectedFocus(focus)}
className={`px-4 py-2 rounded-full text-sm font-medium transition ${selectedFocus === focus
? "bg-[#EA4335] text-white"
: "bg-gray-200 text-gray-800 hover:bg-gray-300"
}`}
>
{focus}
</button>
))}
</div>
</div>
</div>
</div>
);
};

// Product Card Component with Classy Hover Effect
const ProductCard = ({ product }) => {
return (
<div className="bg-white rounded-lg shadow-md hover:shadow-lg p-6 w-80 hover:bg-gray-50 transition-all">
<img
src={product.image}
alt={product.title}
className="rounded-lg w-full h-40 object-cover mb-4 border border-gray-200"
/>
<h3 className="text-2xl font-semibold text-gray-900 mb-2">{product.title}</h3>
<p className="text-gray-600 mb-4">{product.description}</p>
<a
href={product.link}
className="inline-block px-4 py-2 rounded-full bg-[#FABB05] text-gray-900 font-semibold hover:bg-[#F4B400] transition"
>
Explore
</a>
</div>
);
};

// Product Grid Section
const ProductGrid = ({ products }) => {
return (
<div className="py-16 bg-gray-100">
<h2 className="text-4xl font-bold text-center text-gray-800 mb-10">Our Products</h2>
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-6">
{products.map((product, index) => (
<ProductCard key={index} product={product} />
))}
</div>
</div>
);
};

// Main Developer Products Page Component
const DeveloperProductsPage = () => {
const [selectedCategory, setSelectedCategory] = useState(null);
const [selectedFocus, setSelectedFocus] = useState(null);

const products = [
{
title: "Android",
description: "Modern tools to help you build experiences that people love across every Android device.",
image: "/devprod1.jpeg",
link: "#",
},
{
title: "Google Cloud",
description: "New customers get $300 in free credits to deploy dynamic websites and launch VMs.",
image: "/devprod2.png",
link: "#",
},
{
title: "Google AI Studio",
description: "Build generative AI applications quickly with Gemini in Google AI Studio.",
image: "/devprod3.jpeg",
link: "#",
},
{
title: "ChromeOS",
description: "Modern tools and features to help you build high-quality web experiences.",
image: "/devprod4.png",
link: "#",
},
{
title: "Android Studio",
description: "An integrated development environment (IDE) optimized for Android apps.",
image: "/devprod5.jpeg",
link: "#",
},
{
title: "Firebase Cloud Messaging",
description: "A cross-platform messaging solution to reliably send messages at no cost.",
image: "/devprod6.jpeg",
link: "#",
},
];

return (
<div>
<Header />
<Filters
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
selectedFocus={selectedFocus}
setSelectedFocus={setSelectedFocus}
/>
<ProductGrid products={products} />
</div>
);
};

export default DeveloperProductsPage;

0 comments on commit 18a976c

Please sign in to comment.