Initial Commit

frontend/components/Helper/SectionDivider.tsx

@@ -0,0 +1,34 @@
+export const SectionDivider1 = () => {
+
+    return (
+        <div
+            className="w-full h-20 transition-all duration-500 ease-in-out"
+            style={{
+                background: `linear-gradient(to bottom, var(--primary-bg), var(--secondary-bg))`
+            }}
+        />
+    );
+};
+
+export const SectionDivider2 = () => {
+
+    return (
+        <div
+            className="w-full h-20 transition-all duration-500 ease-in-out"
+            style={{
+                background: `linear-gradient(to bottom, var(--secondary-bg), var(--primary-bg))`
+            }}
+        />
+    );
+};
+
+export const SectionDivider3 = () => {
+    return (
+        <div
+            className="w-full h-20 transition-all duration-500 ease-in-out"
+            style={{
+                background: `linear-gradient(to bottom, var(--primary-bg), var(--footer-bg))`
+            }}
+        />
+    );
+};

frontend/components/Helper/SmallHero.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React, {useContext} from "react";
+import {ThemeContext} from "@/components/provider/ThemeProvider";
+import {themeColors} from "@/components/Helper/ThemeColors";
+import {motion} from "framer-motion";
+
+type SmallHeroProps = {
+    title: string;
+    subtitle?: string;
+    backgroundImage?: string;
+    blurBackground?: boolean;
+};
+
+const SmallHero = ({title, subtitle, backgroundImage, blurBackground}: SmallHeroProps) => {
+    const {theme} = useContext(ThemeContext);
+    const colors = themeColors[theme];
+
+    const primaryTextColor = backgroundImage ? "#ffffff" : colors.primaryText;
+    const secondaryTextColor = backgroundImage ? "rgba(255, 255, 255, 0.8)" : "#6B7280"; // Tailwind gray-500
+
+    return (
+        <div className="relative w-full py-36 overflow-hidden">
+            {backgroundImage && 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">
+                <motion.h1
+                    className="text-3xl sm:text-4xl font-bold text-left"
+                    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"
+                        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;

frontend/components/Helper/ThemeColors.ts

@@ -0,0 +1,34 @@
+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",
+    },
+};