Redesign: Match homepage to Figma design and apply theme site-wide

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",
               },
               {
-                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/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);
+  }
 }