From ea511d93a96e437a2879b66c0a2dc94047e66e6e Mon Sep 17 00:00:00 2001
From: MIGHTY1o1 <shubhagarwalcse@gmail.com>
Date: Sat, 2 Nov 2024 02:54:35 +0530
Subject: [PATCH 1/2] add practioner page

---
 src/app/(pages)/Practitioners/page.jsx | 141 +++++++++++++++++++++++++
 1 file changed, 141 insertions(+)
 create mode 100644 src/app/(pages)/Practitioners/page.jsx

diff --git a/src/app/(pages)/Practitioners/page.jsx b/src/app/(pages)/Practitioners/page.jsx
new file mode 100644
index 0000000..149768e
--- /dev/null
+++ b/src/app/(pages)/Practitioners/page.jsx
@@ -0,0 +1,141 @@
+'use client';
+import React from 'react';
+import { motion } from 'framer-motion';
+
+// Developers & Practitioners Page Component
+const DevelopersPractitionersPage = () => {
+    return (
+        <div className="bg-gray-50 text-black">
+            {/* Header Section */}
+            <div className="max-w-7xl mx-auto px-8 py-16 text-center">
+                <h1 className="text-5xl font-bold mb-4">
+                    Developers & Practitioners
+                </h1>
+                <p className="text-lg text-gray-600">
+                    Google Cloud content and resources for its technical communities.
+                </p>
+            </div>
+
+            {/* Articles Section */}
+            <div className="max-w-5xl mx-auto px-8 py-8 space-y-12">
+                {articles.map((article, index) => (
+                    <motion.div
+                        key={index}
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.6, delay: index * 0.2 }}
+                        className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-all flex items-center gap-4"
+                    >
+                        <div className="flex-grow">
+                            <h3 className="text-xl font-bold text-blue-600 hover:underline cursor-pointer">
+                                {article.title}
+                            </h3>
+                            <p className="text-sm text-gray-600 mt-2">
+                                By {article.author} • {article.readTime}
+                            </p>
+                            <p className="mt-2 text-gray-800">
+                                {article.category}
+                            </p>
+                        </div>
+                        {article.image && (
+                            <img src={article.image} alt={article.title} className="w-24 h-24 object-cover rounded-md" />
+                        )}
+                    </motion.div>
+                ))}
+            </div>
+
+            {/* Load More Button */}
+            <div className="text-center my-16">
+                <button className="px-6 py-3 bg-blue-600 text-white rounded-full font-semibold hover:bg-blue-700 transition">
+                    Load more stories
+                </button>
+            </div>
+
+            {/* Footer Section */}
+            <footer className="bg-gray-900 text-gray-400 py-16">
+                <div className="max-w-7xl mx-auto px-8 text-center">
+                    <p className="text-lg mb-6">Follow us:</p>
+                    <div className="flex justify-center space-x-6 mb-10">
+                        <a href="#"><img src="/images/instagram-icon.png" alt="Instagram" className="w-6 h-6 hover:text-white transition-all" /></a>
+                        <a href="#"><img src="/images/twitter-icon.png" alt="Twitter" className="w-6 h-6 hover:text-white transition-all" /></a>
+                        <a href="#"><img src="/images/linkedin-icon.png" alt="LinkedIn" className="w-6 h-6 hover:text-white transition-all" /></a>
+                    </div>
+                    <ul className="flex justify-center space-x-8 mb-8">
+                        <li><a href="#" className="hover:text-white">Google Cloud Products</a></li>
+                        <li><a href="#" className="hover:text-white">Privacy</a></li>
+                        <li><a href="#" className="hover:text-white">Terms</a></li>
+                        <li><a href="#" className="hover:text-white">Help</a></li>
+                    </ul>
+                    <p className="text-sm">© 2024 Google Cloud</p>
+                </div>
+            </footer>
+        </div>
+    );
+};
+
+const articles = [
+    {
+        title: "Gemini models are coming to GitHub Copilot",
+        category: "AI & Machine Learning",
+        author: "Keith Ballinger",
+        readTime: "2-minute read",
+        image: "/images/github-copilot.png",
+    },
+    {
+        title: "Highlights from the 10th DORA report",
+        category: "DevOps & SRE",
+        author: "Nathen Harvey",
+        readTime: "6-minute read",
+        image: "/images/dora-report.png",
+    },
+    {
+        title: "How to protect your site from DDoS attacks with the power of Google Cloud networking and network security",
+        category: "Security & Identity",
+        author: "Marc Howard",
+        readTime: "8-minute read",
+    },
+    {
+        title: "An advanced LlamaIndex RAG implementation on Google Cloud",
+        category: "AI & Machine Learning",
+        author: "Sagar Kewalramani",
+        readTime: "12-minute read",
+    },
+    {
+        title: "Enhancing your gen AI use case with Vertex AI embeddings and task types",
+        category: "AI & Machine Learning",
+        author: "Parashar Shah",
+        readTime: "9-minute read",
+    },
+    {
+        title: "Tell a more complete data story with customized Looker charts and visualizations",
+        category: "Business Intelligence",
+        author: "Jeremy Chang",
+        readTime: "6-minute read",
+    },
+    {
+        title: "Routing in Google Cloud: Where can I send my IP packet from a VM?",
+        category: "Networking",
+        author: "Manjuram Perumalla",
+        readTime: "9-minute read",
+    },
+    {
+        title: "Apache Airflow ETL in Google Cloud",
+        category: "Data Analytics",
+        author: "Jaeyeon Baek",
+        readTime: "6-minute read",
+    },
+    {
+        title: "Test it out: an online shopping demo experience with Gemini and RAG",
+        category: "AI & Machine Learning",
+        author: "Olivier Bourgeois",
+        readTime: "3-minute read",
+    },
+    {
+        title: "Regnology Automates Ticket-to-Code with agentic GenAI on Vertex AI",
+        category: "AI & Machine Learning",
+        author: "Ahmed Amer",
+        readTime: "5-minute read",
+    },
+];
+
+export default DevelopersPractitionersPage;

From 73f06443adcc1dabae4dbe3eb0ea151115c9b4df Mon Sep 17 00:00:00 2001
From: MIGHTY1o1 <shubhagarwalcse@gmail.com>
Date: Sat, 2 Nov 2024 02:54:44 +0530
Subject: [PATCH 2/2] add practioner page

---
 src/app/(pages)/Practitioners/page.jsx | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/src/app/(pages)/Practitioners/page.jsx b/src/app/(pages)/Practitioners/page.jsx
index 149768e..0f43150 100644
--- a/src/app/(pages)/Practitioners/page.jsx
+++ b/src/app/(pages)/Practitioners/page.jsx
@@ -50,25 +50,6 @@ const DevelopersPractitionersPage = () => {
                     Load more stories
                 </button>
             </div>
-
-            {/* Footer Section */}
-            <footer className="bg-gray-900 text-gray-400 py-16">
-                <div className="max-w-7xl mx-auto px-8 text-center">
-                    <p className="text-lg mb-6">Follow us:</p>
-                    <div className="flex justify-center space-x-6 mb-10">
-                        <a href="#"><img src="/images/instagram-icon.png" alt="Instagram" className="w-6 h-6 hover:text-white transition-all" /></a>
-                        <a href="#"><img src="/images/twitter-icon.png" alt="Twitter" className="w-6 h-6 hover:text-white transition-all" /></a>
-                        <a href="#"><img src="/images/linkedin-icon.png" alt="LinkedIn" className="w-6 h-6 hover:text-white transition-all" /></a>
-                    </div>
-                    <ul className="flex justify-center space-x-8 mb-8">
-                        <li><a href="#" className="hover:text-white">Google Cloud Products</a></li>
-                        <li><a href="#" className="hover:text-white">Privacy</a></li>
-                        <li><a href="#" className="hover:text-white">Terms</a></li>
-                        <li><a href="#" className="hover:text-white">Help</a></li>
-                    </ul>
-                    <p className="text-sm">© 2024 Google Cloud</p>
-                </div>
-            </footer>
         </div>
     );
 };
@@ -79,14 +60,12 @@ const articles = [
         category: "AI & Machine Learning",
         author: "Keith Ballinger",
         readTime: "2-minute read",
-        image: "/images/github-copilot.png",
     },
     {
         title: "Highlights from the 10th DORA report",
         category: "DevOps & SRE",
         author: "Nathen Harvey",
         readTime: "6-minute read",
-        image: "/images/dora-report.png",
     },
     {
         title: "How to protect your site from DDoS attacks with the power of Google Cloud networking and network security",