Improve project structure.

New Project Structure:
  - Created reusable UI components (ServiceCard, AnimatedSection, SectionTitle)
  - Split large components into smaller, focused ones
  - Extracted shared hooks for common functionality
  - Organized constants into separate files

Key Improvements:
  - Hooks: useScrollNavigation, useScrollToSection, useCookieSettings
  - UI Components: Modular components for consistent styling and behavior
  - Constants: Centralized data management (ServicesData, NavigationData)
  - Component Split: Navbar, Hero, and Footer broken into logical sub-components

frontend/components/ui/SectionTitle.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+interface SectionTitleProps {
+    title: string;
+    subtitle?: string;
+    className?: string;
+    showUnderline?: boolean;
+    underlineColor?: string;
+}
+
+export const SectionTitle = ({ 
+    title, 
+    subtitle, 
+    className = "", 
+    showUnderline = true,
+    underlineColor = "bg-amber-500"
+}: SectionTitleProps) => {
+    return (
+        <div className={className}>
+            <motion.h2
+                className="text-3xl md:text-4xl font-bold mb-1 text-left"
+                initial={{ opacity: 0, y: 10 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.4 }}
+            >
+                {title}
+            </motion.h2>
+
+            {showUnderline && (
+                <motion.div
+                    className={`w-12 h-[2px] mt-2 mb-10 ${underlineColor}`}
+                    initial={{ opacity: 0, x: -20 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.4, delay: 0.1 }}
+                />
+            )}
+
+            {subtitle && (
+                <motion.p
+                    className="text-lg text-muted-foreground mt-4"
+                    initial={{ opacity: 0, y: 10 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.4, delay: 0.2 }}
+                >
+                    {subtitle}
+                </motion.p>
+            )}
+        </div>
+    );
+};

frontend/components/ui/ServiceCard.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+import { ReactNode } from 'react';
+
+interface ServiceCardProps {
+    title: string;
+    description: string;
+    bullets: string[];
+    index: number;
+    children?: ReactNode;
+}
+
+export const ServiceCard = ({ title, description, bullets, index, children }: ServiceCardProps) => {
+    return (
+        <motion.div
+            className="flex flex-col justify-between h-full p-6 rounded-3xl border bg-muted text-foreground"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.4, delay: index * 0.1 }}
+            whileHover={{
+                scale: 1.03,
+                boxShadow: '0px 12px 30px rgba(0, 0, 0, 0.08)',
+            }}
+        >
+            <div>
+                <h3 className="text-xl font-semibold mb-2">{title}</h3>
+                <p className="text-muted-foreground mb-4">{description}</p>
+                <ul className="space-y-3">
+                    {bullets.map((point, i) => (
+                        <li key={i} className="flex items-start gap-2">
+                            <ChevronRight className="w-4 h-4 text-primary mt-1" />
+                            <span className="text-sm text-foreground">{point}</span>
+                        </li>
+                    ))}
+                </ul>
+                {children && <div className="mt-4">{children}</div>}
+            </div>
+        </motion.div>
+    );
+};