feat: add hero section and navigation components

- Created HeroSection component for the landing page.
- Implemented Navigation component with smooth scrolling to sections.
- Added useNavigation hook to manage active section and scroll state.
- Introduced useScrollToSection hook for smooth scrolling functionality.

feat: add projects section with project cards

- Developed ProjectCard component to display individual project details.
- Created ProjectsSection component to showcase featured projects with filtering options.
- Added sample project data for demonstration.

feat: add skills section with skill cards

- Implemented SkillCard component to display individual skills.
- Created SkillsSection component to showcase skills with category filtering.
- Added sample skills data for demonstration.

style: update global styles and add custom scrollbar

- Imported Urbanist font and set it as the default font.
- Updated body background and text colors.
- Customized scrollbar styles for better aesthetics.

feat: add shared components and constants

- Created AnimatedSection, Button, and Footer components for reusability.
- Added COLORS and GRADIENT constants for consistent theming.
- Updated index files for shared components and hooks.

chore: update dependencies and configuration

- Added framer-motion for animations.
- Updated Tailwind CSS configuration for custom animations and colors.
- Adjusted TypeScript configuration for better path resolution.

apps/web/tailwind.config.ts

@@ -0,0 +1,65 @@
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Urbanist', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        green: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#145231',
+          950: '#052e16',
+        },
+        emerald: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#10b981',
+          600: '#059669',
+          700: '#047857',
+          800: '#065f46',
+          900: '#064e3b',
+          950: '#022c1d',
+        },
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-in-out',
+        'fade-out': 'fadeOut 0.5s ease-in-out',
+        'slide-up': 'slideUp 0.5s ease-out',
+        'slide-down': 'slideDown 0.5s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        fadeOut: {
+          '0%': { opacity: '1' },
+          '100%': { opacity: '0' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        slideDown: {
+          '0%': { transform: 'translateY(-10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;