diff --git a/public/ser1.png b/public/ser1.png new file mode 100644 index 0000000..b569dc9 Binary files /dev/null and b/public/ser1.png differ diff --git a/public/ser2.png b/public/ser2.png new file mode 100644 index 0000000..cf12c19 Binary files /dev/null and b/public/ser2.png differ diff --git a/public/ser3.svg b/public/ser3.svg new file mode 100644 index 0000000..452257f --- /dev/null +++ b/public/ser3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/ser4.svg b/public/ser4.svg new file mode 100644 index 0000000..213a0b7 --- /dev/null +++ b/public/ser4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/(pages)/services/page.jsx b/src/app/(pages)/services/page.jsx new file mode 100644 index 0000000..df85243 --- /dev/null +++ b/src/app/(pages)/services/page.jsx @@ -0,0 +1,159 @@ +'use client'; +import React, { useState } from 'react'; +import { motion } from 'framer-motion'; +import { Search } from 'lucide-react'; +import ProductsNavbar from '../../../components/Global/ProductsNavbar'; + +// Services and Integrations Page Component +const ServicesIntegrationsPage = () => { + const [selectedTab, setSelectedTab] = useState("Services and integrations"); + + return ( +
+ {/* Use the existing ProductsNavbar component */} + + + {/* Header Section */} +
+

+ Services and integrations +

+

+ Integrate services to boost your app's features, improve experience, and delight your users. +

+
+ + {/* Product Overview Section */} +
+
+ {overviewProducts.map((product, index) => ( + + {product.title} +

{product.title}

+

{product.description}

+ + ))} +
+
+ + {/* All Products Section */} +
+

All Products

+
+
+ + +
+
+ + + + +
+
+ +
+ {allProducts.map((product, index) => ( + +

{product.title}

+

{product.description}

+ Explore + + ))} +
+
+
+ ); +}; + +const overviewProducts = [ + { + title: "Gemini API", + description: "Unlock new possibilities within your projects by integrating Google's latest generative AI models.", + image: "ser1.png", + }, + { + title: "Checks", + description: "Actionable insights to help you quickly discover and fix compliance issues on your apps.", + image: "ser2.png", + }, + { + title: "Identity Services", + description: "Simplify user authentication and credential management for seamless, secure experiences.", + image: "ser3.svg", + }, + { + title: "Google Pay API", + description: "Provide a quick, simple and secure checkout experience for your users.", + image: "ser4.svg", + }, +]; + +const allProducts = [ + { + title: "Cloud Functions for Firebase", + description: "Cloud Functions for Firebase is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests.", + }, + { + title: "Firebase Crashlytics", + description: "Firebase Crashlytics is a lightweight, realtime crash reporter that helps you track, prioritize, and fix stability issues that erode your app quality.", + }, + { + title: "Firebase App Distribution", + description: "Firebase App Distribution makes distributing your apps to trusted testers painless, helping you get feedback early and often.", + }, + { + title: "Firebase Test Lab", + description: "Firebase Test Lab is a cloud-based app testing infrastructure that lets you test your app on a range of devices and configurations.", + }, + { + title: "Firestore", + description: "Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud.", + }, + { + title: "Gemini in Firebase", + description: "Gemini in Firebase is an AI-assistive tool that helps you get answers to questions about Firebase products and features, generates and explains code for development, and shortens your troubleshooting process.", + }, + { + title: "Cloud Run documentation", + description: "Run containers on a fully managed environment.", + }, + { + title: "Google Home Developers", + description: "Make your smart home devices more accessible, engaging, and helpful to millions of users on the Google Home platform.", + }, + { + title: "Firebase Realtime Database", + description: "Flexible NoSQL realtime database from Firebase.", + }, + { + title: "Firebase App Hosting", + description: "Firebase App Hosting is a framework that provides serverless hosting for modern, full-stack, and AI web apps.", + }, + { + title: "Firebase Remote Config", + description: "Change the behavior and appearance of your app without publishing an app update, at no cost, for unlimited daily active users.", + }, + { + title: "Vertex AI in Firebase", + description: "Build AI-powered mobile and web apps and features with the Gemini API using Vertex AI in Firebase.", + }, +]; + +export default ServicesIntegrationsPage; diff --git a/src/components/Global/ProductsNavbar.jsx b/src/components/Global/ProductsNavbar.jsx index 94b79f1..1a1fc04 100644 --- a/src/components/Global/ProductsNavbar.jsx +++ b/src/components/Global/ProductsNavbar.jsx @@ -8,9 +8,9 @@ const ProductsNavbar = ({ selectedTab, setSelectedTab }) => { const tabs = [ { name: "All Products", path: "/devprod" }, - { name: "Platforms and operating systems", path: "/products/platforms" }, - { name: "Frameworks, IDEs and SDKs", path: "/products/frameworks" }, - { name: "Services and integrations", path: "/products/services" }, + { name: "Platforms and operating systems", path: "/platforms" }, + { name: "Frameworks, IDEs and SDKs", path: "/frameworks" }, + { name: "Services and integrations", path: "/services" }, { name: "Growth and monetization", path: "/growth" }, ]; diff --git a/src/components/ui/homepage.jsx b/src/components/ui/homepage.jsx index b3c5d4e..be9b813 100644 --- a/src/components/ui/homepage.jsx +++ b/src/components/ui/homepage.jsx @@ -123,4 +123,4 @@ export default function Homepage() { ); -} +} \ No newline at end of file