Refactor styles and restructure CSS files

- Removed App.css and migrated styles to individual component and page-specific CSS files.
- Created base styles in base.css for layout utilities and common elements.
- Added component-specific styles in cards.css, header.css, and other relevant files.
- Updated imports in App.tsx and other components to reflect new CSS structure.
- Enhanced responsiveness and visual consistency across various components and pages.

src/styles/components/header.css

@@ -0,0 +1,63 @@
+/* Floating Header Component Styles */
+
+.floating-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 1000;
+    padding: 20px 0px;
+    text-align: center;
+    background: rgba(52, 87, 245, 0.1);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    margin: 0;
+}
+
+.header-nav {
+    display: flex;
+    justify-content: center;
+    gap: clamp(10px, 2vw, 40px);
+    flex-wrap: nowrap;
+    padding: 0 20px;
+}
+
+.nav-link {
+    text-decoration: none;
+    color: rgba(255, 255, 255, 0.8);
+    font-family: "roboto, sans-serif";
+    font-size: clamp(14px, 2vw, 20px);
+    font-weight: 500;
+    transition: all 0.3s ease;
+    position: relative;
+    padding-bottom: 5px;
+    white-space: nowrap;
+}
+
+.nav-link:hover {
+    color: rgba(255, 255, 255, 1);
+}
+
+.nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: rgba(255, 255, 255, 0.8);
+    transition: width 0.3s ease;
+}
+
+.nav-link:hover::after {
+    width: 100%;
+}
+
+.nav-link.active {
+    color: rgba(255, 255, 255, 1);
+}
+
+.nav-link.active::after {
+    width: 100%;
+}