Feat/social icons clickable

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.

src/app/layout.tsx

@@ -28,6 +28,16 @@ export const metadata: Metadata = {
   description: 'A landing page for StablePay',
 }
 
+// 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<{
@@ -40,7 +50,7 @@ export default function RootLayout({
           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}

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 (
     <>

src/components/Button.tsx

@@ -1,7 +1,11 @@
+/**
+ * Button — small styled button used throughout the site.
+ * Accepts children to be rendered inside the button element.
+ */
 function Button(props: React.PropsWithChildren) {
   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]"
+      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] text-white"
       style={{ boxShadow: '0 0 12px #FF863B' }}
     >
       <div className="absolute inset-0 rounded-lg">

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>
+  );
+}

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)
@@ -50,7 +59,7 @@ export const CallToAction = () => {
       <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>
 

src/sections/Features.tsx

@@ -32,6 +32,10 @@ const tabs = [
   },
 ]
 
+/**
+ * FeatureTab — individual interactive feature card used in `Features`.
+ * Accepts icon, title and selection state and animates when selected.
+ */
 const FeatureTab = (props: (typeof tabs)[number] & ComponentPropsWithoutRef<'div'> & { selected: boolean }) => {
   const tabRef = useRef<HTMLDivElement>(null)
   const xPercentage = useMotionValue(0)
@@ -66,7 +70,7 @@ const FeatureTab = (props: (typeof tabs)[number] & ComponentPropsWithoutRef<'div
     <motion.div
       whileHover={{ scale: 1.05 }}
       whileTap={{ scale: 0.95 }}
-      className="border border-white/15 flex p-2 sm:p-2.5 rounded-xl gap-2 sm:gap-2.5 items-center lg:flex-1 relative cursor-pointer"
+      className="border border-black/15 dark:border-white/15 flex p-2 sm:p-2.5 rounded-xl gap-2 sm:gap-2.5 items-center lg:flex-1 relative cursor-pointer group transition-colors duration-500"
       ref={tabRef}
       onClick={props.onClick}
     >
@@ -83,9 +87,9 @@ const FeatureTab = (props: (typeof tabs)[number] & ComponentPropsWithoutRef<'div
       )}
       <motion.div
         whileHover={{ rotate: 10 }}
-        className="h-10 w-10 sm:h-12 sm:w-12 border border-white/15 rounded-lg inline-flex items-center justify-center bg-white/5 flex-shrink-0"
+        className="h-10 w-10 sm:h-12 sm:w-12 border border-black/15 dark:border-white/15 rounded-lg inline-flex items-center justify-center bg-black/5 dark:bg-white/5 flex-shrink-0 transition-colors duration-500"
       >
-        <IconComponent className="h-4 w-4 sm:h-5 sm:w-5 text-white/70" />
+        <IconComponent className="h-4 w-4 sm:h-5 sm:w-5 text-black/70 dark:text-white/70 transition-colors duration-500" />
       </motion.div>
       <div className="font-medium text-sm sm:text-base">{props.title}</div>
       {props.isNew && (
@@ -102,6 +106,10 @@ const FeatureTab = (props: (typeof tabs)[number] & ComponentPropsWithoutRef<'div
   )
 }
 
+/**
+ * Features component — displays product feature tabs with animated preview.
+ * Provides interactive tabs that change the background animation and preview.
+ */
 export const Features = () => {
   const [selectedTab, setSelectedTab] = useState(0)
 
@@ -129,22 +137,26 @@ export const Features = () => {
   const starsBackgroundY = useTransform(scrollYProgress, [0, 1], [-300, 300])
 
   return (
-    <motion.section
+    <section
      id="features"
-      className="scroll-mt-24 py-12 sm:py-16 md:py-24 bg-black relative overflow-visible"
-      style={{
-        backgroundImage: `url(${StarsBg.src})`,
-        backgroundPositionY: starsBackgroundY,
-        backgroundSize: 'cover',
-      }}
+      className="scroll-mt-24 py-12 sm:py-16 md:py-24 bg-white dark:bg-black relative overflow-hidden transition-colors duration-500"
     >
-      <div className="container px-4 sm:px-6">
+      {/* Animated Background */}
+      <motion.div
+        className="absolute inset-0 pointer-events-none invert opacity-40 dark:invert-0 dark:opacity-100 transition-all duration-500"
+        style={{
+          backgroundImage: `url(${StarsBg.src})`,
+          backgroundPositionY: starsBackgroundY,
+          backgroundSize: 'cover',
+        }}
+      />
+      <div className="container px-4 sm:px-6 relative z-10">
         <motion.h2
           initial={{ y: 50, opacity: 0 }}
           whileInView={{ y: 0, opacity: 1 }}
           viewport={{ once: true, amount: 0.3 }}
           transition={{ duration: 0.8 }}
-          className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-medium text-center tracking-tighter text-white"
+          className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-medium text-center tracking-tighter text-black dark:text-white transition-colors duration-500"
         >
           Easily integrate into your merchant website
         </motion.h2>
@@ -153,7 +165,7 @@ export const Features = () => {
           whileInView={{ y: 0, opacity: 1 }}
           viewport={{ once: true, amount: 0.3 }}
           transition={{ duration: 0.8 }}
-          className="text-white/70 text-base sm:text-lg md:text-xl max-w-2xl mx-auto tracking-tight text-center mt-3 sm:mt-5 px-2"
+          className="text-black/70 dark:text-white/70 text-base sm:text-lg md:text-xl max-w-2xl mx-auto tracking-tight text-center mt-3 sm:mt-5 px-2 transition-colors duration-500"
         >
           StablePay offers a seamless SDK for merchants to accept Djed stablecoins effortlessly.
         </motion.p>
@@ -169,10 +181,10 @@ export const Features = () => {
           whileInView={{ scale: 1, opacity: 1 }}
           viewport={{ once: true, amount: 0.3 }}
           transition={{ duration: 0.8 }}
-          className="border border-white/20 p-1.5 sm:p-2.5 rounded-xl mt-2 sm:mt-3"
+          className="border border-black/20 dark:border-white/20 p-1.5 sm:p-2.5 rounded-xl mt-2 sm:mt-3 transition-colors duration-500"
         >
           <motion.div
-            className="aspect-video bg-cover border border-white/20 rounded-lg"
+            className="aspect-video bg-cover border border-black/20 dark:border-white/20 rounded-lg transition-colors duration-500"
             style={{
               backgroundImage: `url(${ProductImage.src})`,
               backgroundPosition: backgroundPosition,
@@ -181,6 +193,6 @@ export const Features = () => {
           />
         </motion.div>
       </div>
-    </motion.section>
+    </section>
   )
 }