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,51 @@ 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: [
+      {
+        url: '/og.png',
+        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: ['/og.png'],
+  },
+  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,9 +74,8 @@ 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'
         )}
       >
         {children}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -6,6 +6,9 @@ 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 (
     <>

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' }}
-    >
+    <button type={type} className={`${baseClass} ${className}`} style={mergedStyle} {...rest}>
       <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>
       </div>
-      <span>{props.children}</span>
+      <span>{children}</span>
     </button>
   )
 }

diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
@@ -0,0 +1,79 @@
+"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
+      onClick={toggleTheme}
+      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)]'}`}
+      aria-label="Toggle Theme"
+      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/CallToAction.tsx b/src/sections/CallToAction.tsx
@@ -7,6 +7,11 @@ import { RefObject, useEffect, useRef, useCallback } from 'react'
 import { useMotionTemplate, useMotionValue, useScroll, useTransform } from 'framer-motion'
 import { motion } from 'framer-motion'
 
+/**
+ * Hook to track mouse position relative to a target element.
+ * Returns motion values `[mouseX, mouseY]` representing coordinates
+ * within the target element's bounding box.
+ */
 const useRelativeMousePosition = (to: RefObject<HTMLElement>) => {
   const mouseX = useMotionValue(0)
   const mouseY = useMotionValue(0)
@@ -32,6 +37,10 @@ const useRelativeMousePosition = (to: RefObject<HTMLElement>) => {
   return [mouseX, mouseY]
 }
 
+/**
+ * CallToAction component — hero CTA block with animated background
+ * Displays a headline, supporting text, and primary action button.
+ */
 export const CallToAction = () => {
   const sectionRef = useRef<HTMLElement>(null)
   const borderedDivRef = useRef<HTMLDivElement>(null)
@@ -46,11 +55,11 @@ export const CallToAction = () => {
   const maskImage = useMotionTemplate`radial-gradient(50% 50% at ${mouseX}px ${mouseY}px, black, transparent)`
 
   return (
-    <section ref={sectionRef} className="py-12 sm:py-16 md:py-24">
+    <section id="developers" ref={sectionRef} className="py-12 sm:py-16 md:py-24">
       <div className="container px-4 sm:px-6">
         <motion.div
           ref={borderedDivRef}
-          className="border border-white/15 py-12 sm:py-16 md:py-24 rounded-xl overflow-hidden relative group"
+          className="border border-black/15 dark:border-white/15 py-12 sm:py-16 md:py-24 rounded-xl overflow-hidden relative group transition-colors duration-500 bg-white dark:bg-black"
           animate={{
             backgroundPositionX: startBg.width,
           }}
@@ -59,11 +68,15 @@ export const CallToAction = () => {
             duration: 60,
             ease: 'linear',
           }}
-          style={{
-            backgroundImage: `url(${startBg.src})`,
-            backgroundPositionY: backgroundPositionY,
-          }}
         >
+          {/* Animated Background */}
+          <motion.div
+            className="absolute inset-0 -z-20 invert opacity-40 dark:invert-0 dark:opacity-100 transition-all duration-500 pointer-events-none"
+            style={{
+              backgroundImage: `url(${startBg.src})`,
+              backgroundPositionY: backgroundPositionY,
+            }}
+          />
           <div
             className="absolute inset-0 bg-[#FF863B] bg-blend-overlay [mask-image:radial-gradient(50%_50%_at_50%_35%,black,transparent)] group-hover:opacity-0 transition duration-300"
             style={{
@@ -78,10 +91,10 @@ export const CallToAction = () => {
             }}
           ></motion.div>
           <div className="relative px-4 sm:px-6">
-            <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-medium max-w-xs sm:max-w-sm mx-auto tracking-tighter text-center">
+            <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-medium max-w-xs sm:max-w-sm mx-auto tracking-tighter text-center text-black dark:text-white transition-colors duration-500">
               Redefining the Future of Stable Payments.
             </h2>
-            <p className="text-base sm:text-lg md:text-xl max-w-xs mx-auto text-center text-white/70 mt-4 sm:mt-5 tracking-tight">
+            <p className="text-base sm:text-lg md:text-xl max-w-xs mx-auto text-center text-black/70 dark:text-white/70 mt-4 sm:mt-5 tracking-tight transition-colors duration-500">
               Accept Djed stablecoins and empower your business with a reliable, decentralized payment solution.
             </p>