Refactor website to use shadcn components

frontend/components/Helper/SmallHero.tsx

@@ -1,58 +1,59 @@
-'use client';
+'use client'
 
-import React, {useContext} from "react";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
-import {motion} from "framer-motion";
+import {motion} from 'framer-motion'
+import clsx from 'clsx'
 
 type SmallHeroProps = {
-    title: string;
-    subtitle?: string;
-    backgroundImage?: string;
-    blurBackground?: boolean;
-};
+    title: string
+    subtitle?: string
+    backgroundImage?: string
+    blurBackground?: boolean
+    className?: string
+}
 
-const SmallHero = ({title, subtitle, backgroundImage, blurBackground}: SmallHeroProps) => {
-    const {theme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
+const SmallHero = ({
+                       title,
+                       subtitle,
+                       backgroundImage,
+                       blurBackground,
+                       className = 'py-36'
+                   }: SmallHeroProps) => {
+    const hasImage = !!backgroundImage
 
-    const primaryTextColor = backgroundImage ? "#ffffff" : colors.primaryText;
-    const secondaryTextColor = backgroundImage ? "rgba(255, 255, 255, 0.8)" : "#6B7280"; // Tailwind gray-500
+    const baseTextColor = hasImage ? 'text-white' : 'text-foreground'
+    const subtitleTextColor = hasImage ? 'text-white/80' : 'text-muted-foreground'
 
     return (
-        <div className="relative w-full py-36 overflow-hidden">
-            {backgroundImage && blurBackground && (
+        <div className={clsx('relative w-full overflow-hidden', className)}>
+            {hasImage && blurBackground && (
                 <div
                     className="absolute inset-0 bg-cover bg-center blur-sm scale-[1.05] z-0 will-change-transform"
                     style={{backgroundImage: `url(${backgroundImage})`}}
                 />
             )}
 
-            {/* Text content */}
-            <div className="relative z-10 px-6 sm:px-12 max-w-5xl mx-auto">
+            <div className="relative z-10 px-6 sm:px-12 max-w-6xl mx-auto">
                 <motion.h1
-                    className="text-3xl sm:text-4xl font-bold text-left"
+                    className={clsx('text-3xl sm:text-4xl font-bold text-left', baseTextColor)}
                     initial={{opacity: 0, y: 20}}
                     animate={{opacity: 1, y: 0}}
                     transition={{duration: 0.6}}
-                    style={{color: primaryTextColor}}
                 >
                     {title}
                 </motion.h1>
                 {subtitle && (
                     <motion.p
-                        className="mt-3 text-lg text-left"
+                        className={clsx('mt-3 text-lg text-left', subtitleTextColor)}
                         initial={{opacity: 0, y: 10}}
                         animate={{opacity: 1, y: 0}}
                         transition={{duration: 0.6, delay: 0.2}}
-                        style={{color: secondaryTextColor}}
                     >
                         {subtitle}
                     </motion.p>
                 )}
             </div>
         </div>
-    );
-};
+    )
+}
 
-export default SmallHero;
+export default SmallHero

frontend/components/Helper/ThemeColors.ts

@@ -1,34 +0,0 @@
-export const themeColors: Record<
-    "light" | "dark",
-    {
-        primaryBg: string;
-        secondaryBg: string;
-        navBg: string;
-        footerBg: string;
-        primaryText: string;
-        secondaryText: string;
-        inputFieldBg: string;
-        inputBorder: string;
-    }
-> = {
-    light: {
-        primaryBg: "#F3F4F6",
-        secondaryBg: "#eff1f3",
-        navBg: "#F9FAFB",
-        footerBg: "#E5E7EB",
-        primaryText: "#1E293B",
-        secondaryText: "#475569",
-        inputFieldBg: "#ffffff",
-        inputBorder: "#cbd5e1",
-    },
-    dark: {
-        primaryBg: "#1A1A23",
-        secondaryBg: "#22222C",
-        navBg: "#2A2A35",
-        footerBg: "#1F1F29",
-        primaryText: "#F0F0F3",
-        secondaryText: "#C0C2CC",
-        inputFieldBg: "#2D2D38",
-        inputBorder: "#4B4B5A",
-    },
-};