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