Merge pull request #537 from Shariq2003/JSON_GrowthPage

Added JSON Server Support in the Growth Page | Issue #493

PROJECT_STRUCTURE.md

@@ -409,6 +409,7 @@
 │   │       ├── hover-card.jsx
 │   │       ├── input.jsx
 │   │       ├── label.jsx
+│   │       ├── loading.jsx
 │   │       ├── menubar.jsx
 │   │       ├── navigation-menu.jsx
 │   │       ├── notification.jsx

data.json

@@ -48247,5 +48247,77 @@
               ]
           }
       }
+  ],
+  "overviewProducts":[
+      {
+          "title": "Google Play",
+          "description": "Publish your apps and games, grow your audience, boost engagement, and earn revenue.",
+          "image": "/gro1.png"
+      },
+      {
+          "title": "Google AdMob",
+          "description": "Monetize mobile apps with targeted, in-app advertising that respects user experience.",
+          "image": "/gro2.png"
+      },
+      {
+          "title": "Google Ads",
+          "description": "Promote your website, products, and app to the right users with Google Ads.",
+          "image": "/gro3.svg"
+      },
+      {
+          "title": "Firebase",
+          "description": "An app development platform that helps you build and grow apps and games users love.",
+          "image": "/gro4.svg"
+      }
+  ],
+  "allProducts":[
+      {
+          "title": "Firebase In-App Messaging",
+          "description": "Firebase In-App Messaging helps you engage your app's active users by sending them targeted, contextual messages that encourage them to use key app features."
+      },
+      {
+          "title": "Firebase Cloud Messaging",
+          "description": "Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost."
+      },
+      {
+          "title": "Chrome Extensions",
+          "description": "Learn how to develop Chrome extensions."
+      },
+      {
+          "title": "Google Ads API",
+          "description": "Build tools to manage large Google Ads accounts and campaigns."
+      },
+      {
+          "title": "Privacy Sandbox",
+          "description": "Privacy-focused APIs and updates for cookies, advertising, identity, personalization, and fraud prevention."
+      },
+      {
+          "title": "Google Play's billing system",
+          "description": "Google Play’s billing system Sell digital in-app products and subscriptions in your app."
+      },
+      {
+          "title": "Distribute Your Apps & Games on Google Play",
+          "description": "Utilize Google Play to distribute your apps and games, which has the ability to reach over 2 billion Android devices and increase total app downloads."
+      },
+      {
+          "title": "Google Play Console",
+          "description": "Publish your apps and games with Google Play Console and grow your business on Google Play."
+      },
+      {
+          "title": "Interactive Media Ads SDKs",
+          "description": "The IMA SDKs enable publishers to monetize video, audio, or gaming content with video advertising."
+      },
+      {
+          "title": "AdSense",
+          "description": "Google AdSense provides a free, flexible way to earn money from your websites, mobile sites, and site search results."
+      },
+      {
+          "title": "Google Ads",
+          "description": "Create and manage ads that reach users looking for your products or services on Google Search, Display, YouTube, and more."
+      },
+      {
+          "title": "AdMob",
+          "description": "Discover how to monetize your mobile apps with targeted in-app advertising that matches criteria you set."
+      }
   ]
 }

repo_structure.txt

@@ -405,6 +405,7 @@
 │   │       ├── hover-card.jsx
 │   │       ├── input.jsx
 │   │       ├── label.jsx
+│   │       ├── loading.jsx
 │   │       ├── menubar.jsx
 │   │       ├── navigation-menu.jsx
 │   │       ├── notification.jsx

src/app/(pages)/growth/page.jsx

@@ -1,12 +1,32 @@
 'use client';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { Search } from 'lucide-react';
 import ProductsNavbar from '../../../components/Global/ProductsNavbar';
 
 // Growth and Monetization Page Component
 const GrowthMonetizationPage = () => {
     const [selectedTab, setSelectedTab] = useState("Growth and monetization");
+    const [overviewProducts, setOverviewProducts] = useState([]);
+    const [allProducts, setAllProducts] = useState([]);
+
+    useEffect(() => {
+        const fetchProducts = async () => {
+            try {
+                const overviewResponse = await fetch('http://localhost:5000/overviewProducts');
+                const allResponse = await fetch('http://localhost:5000/allProducts');
+                const overviewData = await overviewResponse.json();
+                const allData = await allResponse.json();
+
+                setOverviewProducts(overviewData);
+                setAllProducts(allData);
+            } catch (error) {
+                console.error('Error fetching product data:', error);
+            }
+        };
+
+        fetchProducts();
+    }, []);
 
     return (
         <div className="bg-white text-black">