Redesign: Match homepage to Figma design and apply theme site-wide (#68)

* redesign: match homepage to Figma design and apply theme site-wide

- Update brand color from green to teal (#2ca4ab) with full light/dark palette

- Add Inter font via Google Fonts for clean modern typography

- Redesign homepage hero: light gray background, centered title/subtitle, 3 buttons

- Replace SVG feature cards with 3 API cards (Content, OAuth2/OIDC, User-related)

- Clean up navbar: shorter title, remove emoji prefixes, teal pill Request Access btn

- Streamline footer to 3 columns matching Figma (API Docs, Community, More)

- Apply new design tokens across request-access, request-scopes, and modal pages

- Add reusable CSS variables for surfaces, borders, shadows, and radii

- No functionality changes  styling and presentation only

* fix: keep Request Access visible on mobile homepage

Removes the media query that hid the navbar Request Access button on mobile homepage. The old inline fallback button was removed in the redesign, so this rule left mobile users with no path to /request-access.

* fix: remove duplicate site title in browser tab

Layout no longer passes title=siteConfig.title on the homepage, so Docusaurus shows just the site title instead of repeating it twice.

* feat: mobile Request Access as top hero button, Quick Start becomes outlined

On mobile homepage: Request Access appears as the primary teal button at the top of the hero, Quick Start Guide swaps to outlined style, and Request Access is hidden from the hamburger menu to avoid duplication.

* fix: address PR review  use design tokens and fix footer link paths

- Dark mode navbar: use var(--qf-surface-page) and var(--qf-border-card) instead of hardcoded colors

- Hover backgrounds: use var(--ifm-color-emphasis-100) for theme-aware hover states

- Border-radius: use var(--ifm-global-radius) instead of hardcoded 8px

- Footer links: add leading / to OAuth2 and User-related API paths

* Update homepage branding and developer benefits wording

* Style Request Access menu item for sidebar in mobile and homepage

Author: basit3407

docusaurus.config.js

@@ -6,8 +6,8 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "QuranFoundation API Documentation Portal",
-  tagline: "Build Quran-related apps in no time!",
+  title: "Quran Foundation Documentation Portal",
+  tagline: "Our API documentation is clear, concise, easy to understand and will help you create innovative and engaging Quran-related apps.",
   // Set the production url of your site here
   url: "https://api-docs.quran.foundation",
   baseUrl: "/",
@@ -175,19 +175,19 @@ const config = {
       // Replace with your project's social card
       // image: 'img/docusaurus-social-card.jpg',
       navbar: {
-        title: "QuranFoundation API Docs portal",
+        title: "Quran Foundation API Docs",
         items: [
           {
             type: "doc",
             docId: "quickstart/index", // Points to your /docs/quickstart/index.md
             position: "left",
-            label: "🚀 Quick Start",
+            label: "Quick Start",
           },
           {
             type: "doc",
             docId: "updates/index",
             position: "left",
-            label: "📢 Updates",
+            label: "Updates",
           },
 
           {
@@ -266,20 +266,16 @@ const config = {
                 to: "/docs/category/content-apis",
               },
               {
-                label: "Search APIs",
-                to: "/docs/search_apis_versioned/quran-foundation-search-api",
-              },
-              {
-                label: "JavaScript SDK",
-                to: "/docs/sdk/javascript",
+                label: "OAuth2 / OIDC APIs",
+                to: "/docs/category/oauth2_apis",
               },
               {
                 label: "User-related APIs",
-                to: "docs/category/user-related-apis",
+                to: "/docs/category/user-related-apis",
               },
               {
-                label: "OAuth2 APIs",
-                to: "docs/category/oauth2_apis",
+                label: "Search APIs",
+                to: "/docs/search_apis_versioned/quran-foundation-search-api",
               },
             ],
           },
@@ -299,29 +295,12 @@ const config = {
                 label: "Donate",
                 to: "https://donate.quran.foundation",
               },
-              {
-                label: "Updates",
-                to: "/docs/updates",
-              },
               {
                 label: "GitHub",
                 href: "https://github.com/quran",
               },
             ],
           },
-          {
-            title: "Legal",
-            items: [
-              {
-                label: "Developer Terms of Service",
-                to: "/legal/developer-terms",
-              },
-              {
-                label: "Developer Privacy Policy Requirements",
-                to: "/legal/developer-privacy",
-              },
-            ],
-          },
         ],
       },
       prism: {

src/components/DeveloperModals/DeveloperBenefitsModal.tsx

@@ -17,7 +17,7 @@ const benefitPoints: React.ReactNode[] = [
       target="_blank"
       rel="noopener noreferrer"
     >
-      Quran App Portal
+      Connected Quran Apps
     </Link>
     .
   </>,

src/components/DeveloperModals/DeveloperModal.module.css

@@ -7,15 +7,16 @@
   justify-content: center;
   z-index: 999;
   padding: 1rem;
+  backdrop-filter: blur(2px);
 }
 
 .modalCard {
-  background: #ffffff;
-  color: #0f172a;
-  border-radius: 14px;
+  background: var(--qf-surface-card);
+  color: var(--qf-text-primary);
+  border-radius: var(--qf-radius-xl);
   max-width: 780px;
   width: min(90vw, 780px);
-  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14);
+  box-shadow: var(--qf-shadow-lg);
   padding: 1.6rem 1.5rem 2.4rem;
   animation: popIn 160ms ease;
   max-height: calc(100vh - 2rem);
@@ -41,9 +42,14 @@
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
-  color: #0f172a;
+  color: var(--qf-text-muted);
   line-height: 1;
   padding: 0.25rem 0.5rem;
+  transition: color 150ms ease;
+}
+
+.closeButton:hover {
+  color: var(--qf-text-primary);
 }
 
 .modalList {

src/components/HomepageFeatures/index.tsx

@@ -1,53 +1,49 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
+import React from "react";
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.css";
 
-type FeatureItem = {
+type ApiCard = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
-  description: JSX.Element;
+  icon: string;
+  description: string;
+  link: string;
 };
 
-const FeatureList: FeatureItem[] = [
+const ApiCards: ApiCard[] = [
   {
-    title: 'Easy-to-use API documentation',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Our API documentation is clear, concise, easy to understand and will help you create innovative and engaging Quran-related apps.
-      </>
-    ),
+    title: "Content APIs",
+    icon: "📖",
+    description:
+      "Access Quranic chapters, verses, translations, audio files, and search through comprehensive endpoints designed for seamless app integration.",
+    link: "/docs/category/content-apis",
   },
   {
-    title: 'Try our APIs right from the browser',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        We provide the ability to try our APIs right from the browser. Try first and integrate into your app later.
-      </>
-    ),
+    title: "OAuth2 / OIDC APIs",
+    icon: "🔐",
+    description:
+      "Implement secure user authentication using industry-standard OAuth2 and OpenID Connect flows. Manage tokens, authorization, and identity.",
+    link: "/docs/category/oauth2_apis",
   },
   {
-    title: 'Integration code examples',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Each API comes with integration examples in popular programming languages, such as Java, Python, and JavaScript. Build your app in no time!
-      </>
-    ),
+    title: "User-related APIs",
+    icon: "👤",
+    description:
+      "Manage user data including bookmarks, reading sessions, preferences, goals, notes, and collections. Build personalized Quran experiences.",
+    link: "/docs/category/user-related-apis",
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function ApiCardItem({ title, icon, description, link }: ApiCard) {
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
+    <div className={styles.card}>
+      <div className={styles.cardHeader}>
+        <span className={styles.cardIcon}>{icon}</span>
+        <h3 className={styles.cardTitle}>{title}</h3>
       </div>
+      <p className={styles.cardDescription}>{description}</p>
+      <Link className={styles.cardLink} to={link}>
+        See docs →
+      </Link>
     </div>
   );
 }
@@ -56,9 +52,15 @@ export default function HomepageFeatures(): JSX.Element {
   return (
     <section className={styles.features}>
       <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
+        <div className={styles.sectionHeader}>
+          <h2 className={styles.sectionTitle}>Get started with our APIs:</h2>
+          <Link className={styles.sectionLink} to="/docs/category/content-apis">
+            See API References
+          </Link>
+        </div>
+        <div className={styles.cardGrid}>
+          {ApiCards.map((card) => (
+            <ApiCardItem key={card.title} {...card} />
           ))}
         </div>
       </div>

src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,123 @@
+/**
+ * HomepageFeatures – API card grid styles.
+ */
+
 .features {
+  padding: 3rem 0 4rem;
+}
+
+/* ── Section header ── */
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.sectionTitle {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--qf-text-primary);
+  margin: 0;
+}
+
+.sectionLink {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--ifm-color-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.sectionLink:hover {
+  color: var(--ifm-color-primary-dark);
+}
+
+/* ── Card grid ── */
+.cardGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.25rem;
+}
+
+/* ── Individual card ── */
+.card {
+  background: var(--qf-surface-card);
+  border: 1px solid var(--qf-border-card);
+  border-radius: var(--qf-radius-lg);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
+}
+
+.card:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: var(--qf-shadow-md);
+  transform: translateY(-2px);
+}
+
+.cardHeader {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+  gap: 0.6rem;
+  margin-bottom: 0.75rem;
+}
+
+.cardIcon {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.cardTitle {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--qf-text-primary);
+  margin: 0;
+}
+
+.cardDescription {
+  font-size: 0.9rem;
+  color: var(--qf-text-secondary);
+  line-height: 1.6;
+  flex: 1;
+  margin: 0 0 1rem;
+}
+
+.cardLink {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  transition: color 150ms ease;
+}
+
+.cardLink:hover {
+  color: var(--ifm-color-primary-dark);
+  text-decoration: underline;
+}
+
+/* ── Responsive ── */
+@media screen and (max-width: 768px) {
+  .features {
+    padding: 2rem 0 3rem;
+  }
+
+  .cardGrid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .sectionHeader {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
 }
 
-.featureSvg {
-  height: 200px;
-  width: 200px;
+@media screen and (min-width: 769px) and (max-width: 996px) {
+  .cardGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }