Feature: change theme mode (#42)

* Added theme Selector

* Conflict bub.lock

* Update changes

Author: hanuchaudhary

apps/web/components/Appbar.tsx

@@ -5,6 +5,7 @@ import { Button } from "./ui/button";
 import { Credits } from "./navbar/Credits";
 import Link from "next/link";
 import { motion } from "framer-motion";
+import { ThemeToggle } from "./ThemeToggle";
 
 export function Appbar() {
   return (
@@ -19,7 +20,7 @@ export function Appbar() {
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ duration: 0.4, ease: "easeOut" }}
-          className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 backdrop-blur-xl rounded-2xl bg-background/50 border border-neutral-200 dark:border-neutral-700 shadow-lg"
+          className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 backdrop-blur-xl rounded-2xl bg-background/50 border border-neutral-300 dark:border-neutral-900 shadow-lg"
         >
           <div className="flex h-16 items-center justify-between">
             {/* Logo */}
@@ -47,7 +48,7 @@ export function Appbar() {
             </motion.div>
 
             {/* Auth & Pricing */}
-            <div className="flex items-center gap-4">
+            <div className="flex items-center md:gap-4 gap-2">
               <SignedIn>
                 <Button
                   variant="ghost"
@@ -56,7 +57,7 @@ export function Appbar() {
                   asChild
                 >
                   <Link href="/dashboard">Dashboard</Link>
-                </Button>
+                </Button> 
                 <Button
                   variant="ghost"
                   size="sm"
@@ -102,6 +103,7 @@ export function Appbar() {
                   </Button>
                 </motion.div>
               </SignedOut>
+              <ThemeToggle />
             </div>
           </div>
         </motion.div>

apps/web/components/ThemeToggle.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Switch } from "@/components/ui/switch";
+import { Sun, Moon } from "lucide-react";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const isDark = theme === "dark";
+
+  return (
+    <div className="flex items-center gap-2">
+      <Sun className={`h-5 w-5 ${!isDark ? "text-pink-500" : ""}`} />
+      <Switch
+        checked={isDark}
+        onCheckedChange={() => setTheme(isDark ? "light" : "dark")}
+      />
+      <Moon className={`h-5 w-5 ${isDark ? "text-pink-500" : ""}`} />
+    </div>
+  );
+}

apps/web/components/home/Features.tsx

@@ -42,19 +42,19 @@ export function Features() {
         <motion.div
           key={index}
           whileHover={{ y: -10 }}
-          className="p-6 rounded-2xl bg-white/5 backdrop-blur-sm hover:bg-white/10 transition-all duration-300 border border-white/10 group"
+          className="p-6 rounded-2xl bg-white/5 backdrop-blur-sm hover:bg-pink-50 dark:hover:bg-white/10 transition-all duration-300 border dark:border-white/10 border-pink-100 group"
         >
           <div
             className={`w-12 h-12 rounded-xl bg-gradient-to-r ${feature.gradient} p-0.5 mb-4 group-hover:scale-110 transition-transform duration-300`}
           >
-            <div className="w-full h-full bg-gray-900 rounded-[10px] flex items-center justify-center">
+            <div className="w-full h-full bg-neutral-900 rounded-[10px] flex items-center justify-center">
               {feature.icon}
             </div>
           </div>
-          <h3 className="text-xl font-semibold mb-2 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
+            <h3 className="text-xl font-semibold mb-2 dark:bg-gradient-to-r dark:from-white dark:to-neutral-300 bg-gradient-to-r from-neutral-900 to-neutral-700 bg-clip-text text-transparent">
             {feature.title}
-          </h3>
-          <p className="text-gray-400">{feature.description}</p>
+            </h3>
+          <p className="text-muted-foreground">{feature.description}</p>
         </motion.div>
       ))}
     </motion.div>

apps/web/components/home/Hero.tsx

@@ -17,7 +17,7 @@ import { HowItWorks } from "./HowItWorks";
 
 export function Hero() {
   return (
-    <div className="bg-black" >
+    <div className="dark:bg-black">
       <div className="relative min-h-screen bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-purple-900 via-gray-900 to-black text-white overflow-hidden">
         <BackgroundEffects />
 
@@ -33,7 +33,7 @@ export function Hero() {
             {/* <TrustedBy /> */}
 
             <section className="relative">
-              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/5 to-black/20 pointer-events-none" />
+              <div className="absolute rounded-3xl inset-0 dark:bg-gradient-to-b from-transparent via-black/5 to-black/20 pointer-events-none" />
               <ImageCarousel />
             </section>
 
@@ -42,12 +42,12 @@ export function Hero() {
             <StatsSection />
 
             <section id="features" className="relative">
-              <div className="absolute inset-0 bg-gradient-to-b from-black/20 to-transparent pointer-events-none" />
+              <div className="absolute inset-0 dark:bg-gradient-to-b from-black/20 to-transparent pointer-events-none" />
               <Features />
             </section>
 
             <section className="relative">
-              <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/20 pointer-events-none" />
+              <div className="absolute inset-0 dark:bg-gradient-to-b from-transparent to-black/20 pointer-events-none" />
               <Testimonials />
             </section>
 
@@ -59,12 +59,12 @@ export function Hero() {
               transition={{ delay: 0.4, duration: 0.8 }}
               className="relative py-20"
             >
-              <div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 via-pink-500/20 to-red-500/20 blur-3xl" />
+              <div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 via-pink-500/20 to-red-500/20 blur-3xl dark:from-purple-500/20 dark:via-pink-500/20 dark:to-red-500/20" />
               <div className="relative text-center max-w-3xl mx-auto space-y-8">
-                <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 bg-clip-text text-transparent">
+                <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 dark:from-purple-400 dark:via-pink-500 dark:to-red-500 bg-clip-text text-transparent">
                   Start Your AI Portrait Journey Today
                 </h2>
-                <p className="text-xl text-gray-300">
+                <p className="text-muted-foreground text-xl">
                   Join thousands of creators who have already transformed their
                   photos with our AI technology.
                 </p>
@@ -74,7 +74,7 @@ export function Hero() {
                     <Button
                       asChild
                       size="lg"
-                      className="group bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
+                      className="group bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white"
                     >
                       <SignInButton mode="modal">
                         <span className="flex items-center">
@@ -86,7 +86,7 @@ export function Hero() {
                     <Button
                       variant="outline"
                       size="lg"
-                      className="border-white/20 hover:bg-white/10"
+                      className="text-black dark:text-white"
                       onClick={() =>
                         document
                           .getElementById("features")
@@ -100,17 +100,17 @@ export function Hero() {
 
                 <div className="pt-8 flex flex-wrap items-center justify-center gap-4 sm:gap-8">
                   <div className="flex items-center gap-2 text-sm">
-                    <span className="flex items-center text-purple-300">
+                    <span className="flex items-center text-purple-600 dark:text-purple-300">
                       <CheckCircle className="w-4 h-4 mr-1" />
                       No credit card required
                     </span>
                     <span className="hidden sm:inline text-gray-500">•</span>
-                    <span className="flex items-center text-pink-300">
+                    <span className="flex items-center text-pink-600 dark:text-pink-300">
                       <Sparkles className="w-4 h-4 mr-1" />
                       Free credits to start
                     </span>
                     <span className="hidden sm:inline text-gray-500">•</span>
-                    <span className="flex items-center text-red-300">
+                    <span className="flex items-center text-red-600 dark:text-red-300">
                       <Clock className="w-4 h-4 mr-1" />
                       Cancel anytime
                     </span>

apps/web/components/home/HeroHeader.tsx

@@ -21,7 +21,7 @@ export function HeroHeader() {
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ delay: 0.2, duration: 0.5 }}
-          className="px-4 py-2 rounded-full bg-purple-500/10 text-purple-300 text-sm font-medium flex items-center gap-2 border border-purple-500/20"
+          className="px-4 py-2 rounded-full dark:bg-purple-500/10 dark:text-purple-300 text-sm font-medium flex items-center gap-2 border dark:border-purple-600/20 bg-purple-600/10 text-purple-500 border-purple-700/20"
         >
           <Sparkles className="w-4 h-4" />
           Next-Gen AI Portrait Generation
@@ -30,14 +30,14 @@ export function HeroHeader() {
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ delay: 0.4, duration: 0.5 }}
-          className="px-4 py-2 rounded-full bg-pink-500/10 text-pink-300 text-sm font-medium flex items-center gap-2 border border-pink-500/20"
+          className="px-4 py-2 rounded-full dark:bg-pink-500/10 dark:text-pink-300 text-sm font-medium flex items-center gap-2 border dark:border-pink-600/20 bg-pink-600/10 text-pink-500 border-pink-700/20"
         >
           <Zap className="w-4 h-4" />
           Powered by 100xDevs
         </motion.span>
       </div>
 
-      <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight max-w-4xl mx-auto leading-tight">
+      <h1 className="text-4xl sm:text-5xl md:text-6xl text-primary lg:text-7xl font-bold tracking-tight max-w-4xl mx-auto leading-tight">
         Transform Your Photos with{" "}
         <span className="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 bg-clip-text text-transparent">
           AI Magic

apps/web/components/home/HowItWorks.tsx

@@ -37,13 +37,13 @@ export function HowItWorks() {
       className="space-y-12"
     >
       <div className="text-center space-y-4">
-        <h2 className="text-3xl md:text-4xl font-bold">
+        <h2 className="text-3xl md:text-4xl font-bold text-primary">
           How It{" "}
           <span className="bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">
             Works
           </span>
         </h2>
-        <p className="text-gray-400 max-w-2xl mx-auto">
+        <p className="text-muted-foreground max-w-2xl mx-auto">
           Transform your photos into stunning AI-powered portraits in three
           simple steps
         </p>
@@ -59,12 +59,14 @@ export function HowItWorks() {
             className="relative group"
           >
             <div className="absolute -inset-4 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-xl opacity-0 group-hover:opacity-100 transition duration-500 blur-xl" />
-            <div className="relative space-y-4 text-center p-6 rounded-xl bg-white/5 border border-white/10">
+            <div className="relative space-y-4 text-center p-6 rounded-xl bg-white/5 border border-black/10 dark:border-white/10">
               <div className="w-12 h-12 mx-auto rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
                 {step.icon}
               </div>
-              <h3 className="text-xl font-semibold">{step.title}</h3>
-              <p className="text-gray-400">{step.description}</p>
+              <h3 className="text-xl font-semibold  text-primary">
+                {step.title}
+              </h3>
+              <p className="text-muted-foreground">{step.description}</p>
             </div>
           </motion.div>
         ))}

apps/web/components/home/ImageCarousel.tsx

@@ -123,7 +123,7 @@ export function ImageCarousel() {
                           ? image.title
                           : ""}
                       </h3>
-                      <p className="text-sm text-gray-200">
+                      <p className="text-sm text-neutral-200">
                         {typeof image === "object" && "description" in image
                           ? image.description
                           : ""}
@@ -141,7 +141,7 @@ export function ImageCarousel() {
           <motion.button
             whileHover={{ scale: 1.1 }}
             whileTap={{ scale: 0.9 }}
-            className="p-3 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-sm transition-colors border border-white/20"
+            className="p-3 rounded-full bg-neutral-100/60 hover:bg-neutral-200/60 backdrop-blur-sm transition-colors border border-neutral-200/60 text-neutral-700"
             onClick={scrollPrev}
           >
             <ArrowLeft className="w-5 h-5" />
@@ -150,30 +150,30 @@ export function ImageCarousel() {
           <div className="flex gap-3">
             {scrollSnaps.map((_, i) => (
               <motion.button
-                key={i}
-                className="group relative"
-                onClick={() => scrollTo(i)}
+          key={i}
+          className="group relative"
+          onClick={() => scrollTo(i)}
               >
-                <div className="w-12 h-1.5 rounded-full bg-white/20 overflow-hidden">
-                  {i === selectedIndex && (
-                    <motion.div
-                      className="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500"
-                      layoutId="activeSlide"
-                      transition={{
-                        type: "spring",
-                        bounce: 0.2,
-                      }}
-                    />
-                  )}
-                </div>
+          <div className="w-12 h-1.5 rounded-full bg-neutral-200 overflow-hidden">
+            {i === selectedIndex && (
+              <motion.div
+                className="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600"
+                layoutId="activeSlide"
+                transition={{
+            type: "spring",
+            bounce: 0.2,
+                }}
+              />
+            )}
+          </div>
               </motion.button>
             ))}
           </div>
 
           <motion.button
             whileHover={{ scale: 1.1 }}
             whileTap={{ scale: 0.9 }}
-            className="p-3 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-sm transition-colors border border-white/20"
+            className="p-3 rounded-full bg-neutral-100/60 hover:bg-neutral-200/60 backdrop-blur-sm transition-colors border border-neutral-200/60 text-neutral-700"
             onClick={scrollNext}
           >
             <ArrowRight className="w-5 h-5" />

apps/web/components/home/PricingSection.tsx

@@ -20,14 +20,14 @@ export function PricingSection() {
       className="space-y-12"
     >
       <div className="text-center space-y-4">
-        <h2 className="text-3xl md:text-4xl font-bold">
+        <h2 className="text-3xl md:text-4xl font-bold text-primary/80">
           Simple,{" "}
           <span className="bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">
             Transparent
           </span>{" "}
           Pricing
         </h2>
-        <p className="text-gray-400 max-w-2xl mx-auto">
+        <p className="text-muted-foreground max-w-2xl mx-auto">
           Choose the perfect plan for your needs. No hidden fees.
         </p>
       </div>
@@ -41,31 +41,33 @@ export function PricingSection() {
             transition={{ delay: index * 0.2, duration: 0.5 }}
             className={`relative group rounded-2xl ${
               plan.highlighted
-                ? "bg-gradient-to-b from-purple-600 to-pink-600"
-                : "bg-white/5"
+                ? "bg-gradient-to-b from-purple-600 to-pink-600 dark:from-purple-600 dark:to-pink-600"
+                : "bg-gray-50 border border-secondary dark:bg-white/5"
             } p-px`}
           >
             <div
               className={`rounded-2xl p-6 h-full ${
-                plan.highlighted ? "bg-black/90" : "bg-transparent"
+                plan.highlighted
+                  ? "bg-white/95 dark:bg-black/90"
+                  : "bg-transparent"
               }`}
             >
-              <div className="space-y-4">
+              <div className="space-y-4 text-primary">
                 <h3 className="text-xl font-semibold">{plan.name}</h3>
                 <div className="text-3xl font-bold">{plan.price}</div>
                 <ul className="space-y-3">
                   {plan.features.map((feature) => (
                     <li key={feature} className="flex items-center gap-2">
                       <Check className="w-5 h-5 text-green-500" />
-                      <span className="text-gray-300">{feature}</span>
+                      <span className="text-muted-foreground">{feature}</span>
                     </li>
                   ))}
                 </ul>
                 <Button
-                  className={`w-full ${
+                  className={`w-full text-primary ${
                     plan.highlighted
                       ? "bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
-                      : "bg-white/10 hover:bg-white/20"
+                      : "bg-gray-100 hover:bg-gray-200 dark:bg-white/10 dark:hover:bg-white/20"
                   }`}
                 >
                   Get Started

apps/web/components/home/StatsSection.tsx

@@ -16,8 +16,8 @@ export function StatsSection() {
       transition={{ duration: 0.8 }}
       className="relative"
     >
-      <div className="absolute inset-0 bg-gradient-to-b from-purple-500/10 via-transparent to-transparent" />
-      <div className="relative grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
+      <div className="absolute rounded-t-2xl inset-0 bg-gradient-to-b from-purple-500/10 via-transparent to-transparent" />
+      <div className="relative pt-4 grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
         {stats.map((stat, index) => (
           <motion.div
             key={stat.label}
@@ -31,7 +31,7 @@ export function StatsSection() {
             <div className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">
               {stat.value}
             </div>
-            <p className="text-gray-400 text-sm md:text-base">{stat.label}</p>
+            <p className="text-muted-foreground text-sm md:text-base">{stat.label}</p>
           </motion.div>
         ))}
       </div>