DjedAlliance · raj-aryan-official · Mar 30, 2026 · Mar 30, 2026 · Mar 30, 2026 · Mar 30, 2026
diff --git a/License.md b/License.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 raj-aryan-official
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/src/app/apple-touch-icon.svg b/src/app/apple-touch-icon.svg
diff --git a/src/app/favicon.svg b/src/app/favicon.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next'
-import { Inter, Fraunces, Caudex } from 'next/font/google'
+import { Inter, Caudex } from 'next/font/google'
 import { twMerge } from 'tailwind-merge'
 import './globals.css'
 
@@ -9,12 +9,7 @@ const inter = Inter({
   display: 'swap',
 })
 
-const fraunces = Fraunces({
-  subsets: ['latin'],
-  variable: '--font-fraunces',
-  display: 'swap',
-  weight: ['400', '500', '600', '700'],
-})
+// Removed unused Fraunces font to avoid unnecessary load
 
 const caudex = Caudex({
   subsets: ['latin'],
@@ -24,10 +19,52 @@ const caudex = Caudex({
 })
 
 export const metadata: Metadata = {
-  title: 'StablePay Landing Page',
-  description: 'A landing page for StablePay',
+  title: 'StablePay — Open-source SDK for Djed stablecoins',
+  description: 'An open-source SDK enabling merchants to accept payments in Djed stablecoins.',
+  keywords: ['StablePay', 'Djed', 'stablecoin', 'payments', 'SDK'],
+  authors: [{ name: 'Djed Alliance' }],
+  openGraph: {
+    title: 'StablePay — Open-source SDK for Djed stablecoins',
+    description: 'An open-source SDK enabling merchants to accept payments in Djed stablecoins.',
+    url: 'https://github.com/DjedAlliance/StablePay-LandingPage',
+    siteName: 'StablePay',
+    images: [
+      {
+        // public currently does not contain og.png; use repo logo as fallback
+        url: '/favicon.svg',
+        width: 1200,
+        height: 630,
+        alt: 'StablePay — Open-source SDK',
+      },
+    ],
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'StablePay — Open-source SDK for Djed stablecoins',
+    description: 'An open-source SDK enabling merchants to accept payments in Djed stablecoins.',
+    images: ['/favicon.svg'],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+    },
+  },
+}
+
+// Configure theme color and viewport-related settings via export
+export const viewport = {
+  // Theme color used by some browsers and OS UI when using file-based favicons
+  themeColor: '#0ea5a1',
 }
 
+/**
+ * RootLayout wraps all pages and provides global styles and fonts.
+ * It also exports `viewport` and `metadata` used by Next.js.
+ */
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -38,11 +75,11 @@ export default function RootLayout({
       <body
         className={twMerge(
           inter.variable,
-          fraunces.variable,
           caudex.variable,
-          'font-inter bg-black text-white antialiased'
+          'font-inter antialiased bg-white text-black dark:bg-black dark:text-white'
         )}
       >
+        <script dangerouslySetInnerHTML={{__html: `(function(){try{var s=localStorage.getItem('theme');var p=window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;var t=s|| (p? 'dark':'light'); if(t==='dark'){document.documentElement.classList.add('dark')}else{document.documentElement.classList.remove('dark')}}catch(e){}})();`}} />
         {children}
       </body>
     </html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,16 +1,21 @@
 import { Header } from '@/sections/Header'
 import { Hero } from '@/sections/Hero'
 import { LogoTicker } from '@/sections/LogoTicker'
+import { About } from '@/sections/About'
 import { Features } from '@/sections/Features'
 
 import { CallToAction } from '@/sections/CallToAction'
 import { Footer } from '@/sections/Footer'
 
+/**
+ * Home — landing page root component assembling page sections.
+ */
 export default function Home() {
   return (
     <>
       <Header />
       <Hero />
+      <About />
       <LogoTicker />
       <Features />
 

diff --git a/src/assets/djed-alliance.svg b/src/assets/djed-alliance.svg
diff --git a/src/assets/stability-nexus.svg b/src/assets/stability-nexus.svg
diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,15 +1,23 @@
-function Button(props: React.PropsWithChildren) {
+/**
+ * Button — small styled button used throughout the site.
+ * Accepts children to be rendered inside the button element.
+ */
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
+
+function Button(props: ButtonProps) {
+  const { children, className = '', type = 'button', style, ...rest } = props
+
+  const baseClass = 'relative py-1.5 px-2.5 sm:py-2 sm:px-3 md:py-3 md:px-4 rounded-lg font-medium text-xs sm:text-sm md:text-base bg-gradient-to-b from-[#331500] to-[#FF863B] text-white transform-gpu transition-transform duration-200 hover:scale-105 active:scale-95 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400'
+  const mergedStyle = Object.assign({ boxShadow: '0 0 12px #FF863B' }, style || {})
+
   return (
-    <button
-      className="relative py-1.5 px-2.5 sm:py-2 sm:px-3 rounded-lg font-medium text-xs sm:text-sm bg-gradient-to-b from-[#331500] to-[#FF863B]"
-      style={{ boxShadow: '0 0 12px #FF863B' }}
-    >
-      <div className="absolute inset-0 rounded-lg">
-        <div className="rounded-lg border border-white/20 absolute inset-0 [mask-image:linear-gradient(to_bottom,black,transparent)]"></div>
-        <div className="rounded-lg border absolute inset-0 border-white/40 [mask-image:linear-gradient(to_top,black,transparent)]"></div>
-        <div className="absolute inset-0 shadow-[0px_0px_10px_0px_rgba(255,134,59,0.7)_inset] rounded-lg"></div>
+    <button type={type} className={`${baseClass} ${className}`} style={mergedStyle} {...rest}>
+      <div className="absolute inset-0 rounded-lg pointer-events-none">
+        <div className="rounded-lg border border-white/20 absolute inset-0 [mask-image:linear-gradient(to_bottom,black,transparent)] pointer-events-none"></div>
+        <div className="rounded-lg border absolute inset-0 border-white/40 [mask-image:linear-gradient(to_top,black,transparent)] pointer-events-none"></div>
+        <div className="absolute inset-0 shadow-[0px_0px_10px_0px_rgba(255,134,59,0.7)_inset] rounded-lg pointer-events-none"></div>
       </div>
-      <span>{props.children}</span>
+      <span>{children}</span>
     </button>
   )
 }

diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { Sun, Moon } from 'lucide-react';
+
+/**
+ * ThemeToggle — client component that toggles between light and dark themes.
+ * Persists selection to `localStorage` and applies the `dark` class to the root element.
+ */
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
+  const [mounted, setMounted] = useState(false);
+
+  // Read initial theme and apply classes
+  useEffect(() => {
+    setMounted(true);
+    const storedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
+    const initialTheme = storedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    setTheme(initialTheme);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }, [theme, mounted]);
+
+  const toggleTheme = () => {
+    setTheme(prev => (prev === 'dark' ? 'light' : 'dark'));
+  };
+
+  if (!mounted) {
+    // Prevent hydration mismatch by rendering a placeholder of the exact same size
+    return <div className="w-[60px] h-[32px] rounded-full bg-white/10" />;
+  }
+
+  const isDark = theme === 'dark';
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-pressed={isDark}
+      aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
+      className={`relative flex items-center w-[60px] h-[32px] rounded-full p-1 transition-colors duration-500 ease-in-out border border-white/10
+        ${isDark ? 'bg-white/10 shadow-[inset_0px_0px_10px_rgba(255,255,255,0.1)]' : 'bg-black/5 shadow-[inset_0px_0px_10px_rgba(0,0,0,0.05)]'}`}
+      style={{
+        WebkitTapHighlightColor: 'transparent',
+      }}
+    >
+      <motion.div
+        className={`absolute flex items-center justify-center w-6 h-6 rounded-full shadow-md z-10
+          ${isDark ? 'bg-[#331500]' : 'bg-white'} border border-white/20`}
+        layout
+        transition={{ type: 'spring', stiffness: 700, damping: 30 }}
+        initial={false}
+        animate={{
+          x: isDark ? 26 : 0,
+        }}
+      >
+        {isDark ? (
+          <Moon className="w-3.5 h-3.5 text-[#FF863B]" />
+        ) : (
+          <Sun className="w-3.5 h-3.5 text-amber-500" />
+        )}
+      </motion.div>
+
+      {/* Background Icons */}
+      <div className="absolute inset-x-2 flex justify-between pointer-events-none text-black/30 dark:text-white/30 text-xs">
+        <Sun className={`w-3.5 h-3.5 transition-opacity duration-300 ${!isDark ? 'opacity-0' : 'opacity-100'}`} />
+        <Moon className={`w-3.5 h-3.5 transition-opacity duration-300 ${isDark ? 'opacity-0' : 'opacity-100'}`} />
+      </div>
+    </button>
+  );
+}
diff --git a/src/sections/About.tsx b/src/sections/About.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+
+/**
+ * About section — brief overview of StablePay for onboarding users and contributors.
+ */
+export const About = () => {
+  return (
+    <section id="about" className="scroll-mt-24 py-12 md:py-20">
+      <div className="container px-4 sm:px-6">
+        <div className="max-w-5xl mx-auto">
+          <div className="bg-white/80 dark:bg-gray-900/60 border border-black/5 dark:border-white/5 rounded-2xl p-6 sm:p-10 shadow-md backdrop-blur-md">
+            <div className="text-center">
+              <h2 className="text-2xl sm:text-3xl font-semibold mb-3 text-black dark:text-white">About StablePay</h2>
+              <p className="text-base sm:text-lg text-black/70 dark:text-white/75 max-w-2xl mx-auto">
+                StablePay is an open, developer-friendly payments solution focused on reliable, predictable value transfer. It helps applications accept and manage stable-value payments with minimal integration work and clear developer tooling.
+              </p>
+            </div>
+
+            <div className="mt-8 grid gap-8 sm:grid-cols-2">
+              <div className="flex flex-col gap-4">
+                <h3 className="text-lg font-medium text-black dark:text-white">Core Use Cases</h3>
+                <ul className="list-inside space-y-2 text-black/70 dark:text-white/75">
+                  <li className="flex items-start gap-3">
+                    <span className="flex-shrink-0 h-3 w-3 rounded-full bg-black/80 dark:bg-white" />
+                    <span>Accept stable-value token payments in web and mobile apps</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <span className="flex-shrink-0 h-3 w-3 rounded-full bg-black/80 dark:bg-white" />
+                    <span>Automate recurring and subscription-style flows</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <span className="flex-shrink-0 h-3 w-3 rounded-full bg-black/80 dark:bg-white" />
+                    <span>Provide transparent payment rails for marketplaces and services</span>
+                  </li>
+                </ul>
+              </div>
+
+              <div className="flex flex-col gap-4">
+                <h3 className="text-lg font-medium text-black dark:text-white">How It Works (High level)</h3>
+                <ul className="list-inside space-y-2 text-black/70 dark:text-white/75">
+                  <li className="flex items-start gap-3">
+                    <span className="flex-shrink-0 h-3 w-3 rounded-full bg-black/80 dark:bg-white" />
+                    <span>Integrate via a small SDK or HTTP endpoints for payment creation and verification.</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <span className="flex-shrink-0 h-3 w-3 rounded-full bg-black/80 dark:bg-white" />
+                    <span>Payments are denominated in stable assets and settled via on-chain or off-chain relayers depending on configuration.</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <span className="flex-shrink-0 h-3 w-3 rounded-full bg-black/80 dark:bg-white" />
+                    <span>Developers receive webhooks and tooling to reconcile and monitor payment state.</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div className="mt-8 text-center">
+              <p className="text-sm text-black/60 dark:text-white/60 mb-4">For contributors: read the repository README and developer docs for architecture, API reference, and local development instructions.</p>
+              <a href="https://github.com/DjedAlliance/StablePay" target="_blank" rel="noreferrer" className="inline-block bg-black text-white px-4 py-2 rounded-lg text-sm hover:opacity-95 transition">View repository</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}