From 7096d2dbf0ddf13bc88fd814e9f7cccd31b5b1d8 Mon Sep 17 00:00:00 2001
From: Fajrian Aidil Pratama <fajrianaidilp@gmail.com>
Date: Thu, 11 Sep 2025 18:57:08 +0700
Subject: [PATCH] feat: implement comprehensive frontend design improvements

- Add reusable component system (BaseButton, BaseCard, BaseBadge, BaseSkeleton)
- Implement dark/light theme system with ThemeToggle and useTheme composable
- Enhance CodeBlock component with dual theme support and advanced features
- Add LazyImage component with intersection observer for performance
- Implement PageTransition system with multiple animation types
- Update core styles with accessibility improvements and responsive design
- Enhance Navigation component with better theme integration
- Update Home view with improved component architecture
- Configure Tailwind with extended theme colors and utilities
---
 src/App.vue                       |  17 +-
 src/components/BaseBadge.vue      | 106 +++++++
 src/components/BaseButton.vue     | 117 ++++++++
 src/components/BaseCard.vue       | 186 ++++++++++++
 src/components/BaseSkeleton.vue   | 186 ++++++++++++
 src/components/CodeBlock.vue      | 477 +++++++++++++++++++++++++++---
 src/components/LazyImage.vue      | 238 +++++++++++++++
 src/components/Navigation.vue     |  29 +-
 src/components/PageTransition.vue | 230 ++++++++++++++
 src/components/ThemeToggle.vue    | 264 +++++++++++++++++
 src/composables/useTheme.ts       |  66 +++++
 src/style.css                     | 109 +++++++
 src/views/Home.vue                |   5 +-
 tailwind.config.js                |   1 +
 14 files changed, 1972 insertions(+), 59 deletions(-)
 create mode 100644 src/components/BaseBadge.vue
 create mode 100644 src/components/BaseButton.vue
 create mode 100644 src/components/BaseCard.vue
 create mode 100644 src/components/BaseSkeleton.vue
 create mode 100644 src/components/LazyImage.vue
 create mode 100644 src/components/PageTransition.vue
 create mode 100644 src/components/ThemeToggle.vue
 create mode 100644 src/composables/useTheme.ts

diff --git a/src/App.vue b/src/App.vue
index 3c99c87..c21583f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,22 @@
 <template>
-  <div id="app">
-    <router-view />
+  <div id="app" class="transition-colors duration-200">
+    <PageTransition>
+      <router-view />
+    </PageTransition>
   </div>
 </template>
 
 <script setup lang="ts">
-// App root component
+import { onMounted } from 'vue'
+import PageTransition from '@/components/PageTransition.vue'
+import { useTheme } from '@/composables/useTheme'
+
+// Initialize theme on app start
+const { initTheme } = useTheme()
+
+onMounted(() => {
+  initTheme()
+})
 </script>
 
 <style>
diff --git a/src/components/BaseBadge.vue b/src/components/BaseBadge.vue
new file mode 100644
index 0000000..51368fe
--- /dev/null
+++ b/src/components/BaseBadge.vue
@@ -0,0 +1,106 @@
+<template>
+  <span :class="badgeClasses" v-bind="$attrs">
+    <span v-if="$slots.icon || dot" class="flex items-center mr-1" :class="{ 'mr-0': !$slots.default }" aria-hidden="true">
+      <slot name="icon">
+        <div v-if="dot" :class="dotClasses"></div>
+      </slot>
+    </span>
+    
+    <span v-if="$slots.default">
+      <slot />
+    </span>
+    
+    <span v-if="$slots.iconRight" class="flex items-center ml-1" aria-hidden="true">
+      <slot name="iconRight" />
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  dot?: boolean
+  rounded?: boolean
+  outline?: boolean
+  pulse?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'md',
+  dot: false,
+  rounded: false,
+  outline: false,
+  pulse: false
+})
+
+// Base classes
+const baseClasses = 'inline-flex items-center font-medium transition-all duration-200'
+
+// Size classes
+const sizeClasses = {
+  xs: 'px-2 py-0.5 text-xs',
+  sm: 'px-2.5 py-1 text-xs',
+  md: 'px-3 py-1 text-sm',
+  lg: 'px-4 py-1.5 text-sm'
+}
+
+// Variant classes (filled)
+const variantClasses = {
+  default: 'bg-gray-100 text-gray-700',
+  primary: 'bg-blue-100 text-blue-700',
+  secondary: 'bg-gray-100 text-gray-700',
+  success: 'bg-green-100 text-green-700',
+  warning: 'bg-yellow-100 text-yellow-700',
+  danger: 'bg-red-100 text-red-700',
+  info: 'bg-cyan-100 text-cyan-700'
+}
+
+// Outline variant classes
+const outlineVariantClasses = {
+  default: 'border border-gray-300 text-gray-700 bg-white',
+  primary: 'border border-blue-300 text-blue-700 bg-white',
+  secondary: 'border border-gray-300 text-gray-700 bg-white',
+  success: 'border border-green-300 text-green-700 bg-white',
+  warning: 'border border-yellow-300 text-yellow-700 bg-white',
+  danger: 'border border-red-300 text-red-700 bg-white',
+  info: 'border border-cyan-300 text-cyan-700 bg-white'
+}
+
+// Dot color classes
+const dotColorClasses = {
+  default: 'bg-gray-400',
+  primary: 'bg-blue-500',
+  secondary: 'bg-gray-400',
+  success: 'bg-green-500',
+  warning: 'bg-yellow-500',
+  danger: 'bg-red-500',
+  info: 'bg-cyan-500'
+}
+
+// Computed classes
+const badgeClasses = computed(() => [
+  baseClasses,
+  sizeClasses[props.size],
+  props.outline ? outlineVariantClasses[props.variant] : variantClasses[props.variant],
+  {
+    'rounded-full': props.rounded || props.size === 'xs',
+    'rounded-lg': !props.rounded && props.size !== 'xs',
+    'animate-pulse': props.pulse
+  }
+])
+
+const dotClasses = computed(() => [
+  'rounded-full',
+  dotColorClasses[props.variant],
+  {
+    'w-1.5 h-1.5': props.size === 'xs',
+    'w-2 h-2': props.size === 'sm' || props.size === 'md',
+    'w-2.5 h-2.5': props.size === 'lg',
+    'animate-pulse': props.pulse
+  }
+])
+</script>
\ No newline at end of file
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
new file mode 100644
index 0000000..5de1975
--- /dev/null
+++ b/src/components/BaseButton.vue
@@ -0,0 +1,117 @@
+<template>
+  <component 
+    :is="tag" 
+    :to="to"
+    :href="href"
+    :target="target"
+    :rel="rel"
+    :type="type"
+    :disabled="disabled || loading"
+    :class="buttonClasses"
+    :aria-label="ariaLabel"
+    :aria-describedby="ariaDescribedby"
+    @click="handleClick"
+    v-bind="$attrs"
+  >
+    <span v-if="loading" class="flex items-center justify-center mr-2" aria-hidden="true">
+      <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+      <span class="sr-only">Loading...</span>
+    </span>
+
+    <span v-if="$slots.icon && !loading" class="flex items-center mr-2" aria-hidden="true">
+      <slot name="icon" />
+    </span>
+
+    <span :class="{ 'opacity-75': loading }">
+      <slot />
+    </span>
+
+    <span v-if="$slots.iconRight && !loading" class="flex items-center ml-2" aria-hidden="true">
+      <slot name="iconRight" />
+    </span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  tag?: 'button' | 'a' | 'router-link'
+  to?: string | object
+  href?: string
+  target?: string
+  rel?: string
+  type?: 'button' | 'submit' | 'reset'
+  disabled?: boolean
+  loading?: boolean
+  block?: boolean
+  rounded?: boolean
+  shadow?: boolean
+  ariaLabel?: string
+  ariaDescribedby?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md',
+  tag: 'button',
+  type: 'button',
+  disabled: false,
+  loading: false,
+  block: false,
+  rounded: false,
+  shadow: true
+})
+
+const emit = defineEmits<{
+  click: [event: Event]
+}>()
+
+// Base classes
+const baseClasses = 'inline-flex items-center justify-center font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'
+
+// Size classes
+const sizeClasses = {
+  xs: 'px-2.5 py-1.5 text-xs',
+  sm: 'px-3 py-2 text-sm',
+  md: 'px-4 py-2.5 text-sm',
+  lg: 'px-6 py-3 text-base',
+  xl: 'px-8 py-4 text-lg'
+}
+
+// Variant classes
+const variantClasses = {
+  primary: 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white focus:ring-blue-500',
+  secondary: 'bg-gray-100 hover:bg-gray-200 text-gray-900 focus:ring-gray-500',
+  outline: 'border-2 border-gray-300 hover:border-blue-600 bg-white hover:bg-blue-50 text-gray-700 hover:text-blue-600 focus:ring-blue-500',
+  ghost: 'bg-transparent hover:bg-gray-100 text-gray-700 hover:text-gray-900 focus:ring-gray-500',
+  danger: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500'
+}
+
+// Computed classes
+const buttonClasses = computed(() => [
+  baseClasses,
+  sizeClasses[props.size],
+  variantClasses[props.variant],
+  {
+    'w-full': props.block,
+    'rounded-xl': props.rounded || props.size === 'lg' || props.size === 'xl',
+    'rounded-lg': !props.rounded && (props.size === 'md' || props.size === 'sm'),
+    'rounded-md': !props.rounded && props.size === 'xs',
+    'shadow-lg hover:shadow-xl transform hover:-translate-y-0.5': props.shadow && props.variant === 'primary',
+    'shadow-md hover:shadow-lg': props.shadow && props.variant !== 'primary',
+    'cursor-wait': props.loading
+  }
+])
+
+const handleClick = (event: Event) => {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/BaseCard.vue b/src/components/BaseCard.vue
new file mode 100644
index 0000000..b5ff1ea
--- /dev/null
+++ b/src/components/BaseCard.vue
@@ -0,0 +1,186 @@
+<template>
+  <div :class="cardClasses" v-bind="$attrs">
+    <!-- Card Header -->
+    <header v-if="$slots.header || title" :class="headerClasses">
+      <slot name="header">
+        <div v-if="icon || $slots.icon" class="flex items-center space-x-4">
+          <div :class="iconContainerClasses" v-if="icon || $slots.icon">
+            <slot name="icon">
+              <component :is="icon" :class="iconClasses" v-if="icon" />
+            </slot>
+          </div>
+          <div class="flex-1">
+            <h3 v-if="title" :class="titleClasses">{{ title }}</h3>
+            <p v-if="subtitle" :class="subtitleClasses">{{ subtitle }}</p>
+          </div>
+        </div>
+        <div v-else>
+          <h3 v-if="title" :class="titleClasses">{{ title }}</h3>
+          <p v-if="subtitle" :class="subtitleClasses">{{ subtitle }}</p>
+        </div>
+      </slot>
+    </header>
+
+    <!-- Card Content -->
+    <div :class="contentClasses">
+      <slot />
+    </div>
+
+    <!-- Card Footer -->
+    <footer v-if="$slots.footer" :class="footerClasses">
+      <slot name="footer" />
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'default' | 'elevated' | 'outlined' | 'ghost'
+  size?: 'sm' | 'md' | 'lg'
+  hover?: boolean
+  clickable?: boolean
+  title?: string
+  subtitle?: string
+  icon?: string
+  gradient?: 'blue' | 'green' | 'purple' | 'yellow' | 'red' | 'gray'
+  rounded?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'md',
+  hover: false,
+  clickable: false,
+  rounded: 'lg',
+  padding: 'md'
+})
+
+// Base classes
+const baseClasses = 'relative transition-all duration-300'
+
+// Variant classes
+const variantClasses = {
+  default: 'bg-white border border-gray-200',
+  elevated: 'bg-white shadow-lg',
+  outlined: 'bg-white border-2 border-gray-200',
+  ghost: 'bg-gray-50/50 border border-gray-100'
+}
+
+// Gradient classes for background
+const gradientClasses = {
+  blue: 'bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 border-blue-100/50',
+  green: 'bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 border-green-100/50',
+  purple: 'bg-gradient-to-br from-purple-50 via-violet-50 to-indigo-50 border-purple-100/50',
+  yellow: 'bg-gradient-to-br from-yellow-50 via-amber-50 to-orange-50 border-yellow-100/50',
+  red: 'bg-gradient-to-br from-red-50 via-rose-50 to-pink-50 border-red-100/50',
+  gray: 'bg-gradient-to-r from-gray-50 via-slate-50 to-gray-50 border-gray-200/50'
+}
+
+// Icon container gradient classes
+const iconGradientClasses = {
+  blue: 'bg-gradient-to-br from-blue-500 to-indigo-600',
+  green: 'bg-gradient-to-br from-green-500 to-emerald-600',
+  purple: 'bg-gradient-to-br from-purple-500 to-violet-600',
+  yellow: 'bg-gradient-to-br from-yellow-500 to-amber-600',
+  red: 'bg-gradient-to-br from-red-500 to-rose-600',
+  gray: 'bg-gradient-to-br from-gray-700 to-slate-800'
+}
+
+// Size classes
+const sizeClasses = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg'
+}
+
+// Padding classes
+const paddingClasses = {
+  none: '',
+  sm: 'p-4',
+  md: 'p-6',
+  lg: 'p-8'
+}
+
+// Rounded classes
+const roundedClasses = {
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+  '2xl': 'rounded-2xl',
+  '3xl': 'rounded-3xl'
+}
+
+// Computed classes
+const cardClasses = computed(() => [
+  baseClasses,
+  props.gradient ? gradientClasses[props.gradient] : variantClasses[props.variant],
+  sizeClasses[props.size],
+  roundedClasses[props.rounded],
+  {
+    'hover:shadow-lg group': props.hover && !props.gradient,
+    'hover:shadow-xl group': props.hover && props.gradient,
+    'cursor-pointer': props.clickable,
+    'hover:border-blue-200/70': props.hover && props.gradient === 'blue',
+    'hover:border-green-200/70': props.hover && props.gradient === 'green',
+    'hover:border-purple-200/70': props.hover && props.gradient === 'purple',
+    'hover:border-yellow-200/70': props.hover && props.gradient === 'yellow',
+    'hover:border-red-200/70': props.hover && props.gradient === 'red',
+    'hover:border-gray-300/70': props.hover && props.gradient === 'gray'
+  }
+])
+
+const headerClasses = computed(() => [
+  paddingClasses[props.padding],
+  {
+    'pb-0': props.padding !== 'none'
+  }
+])
+
+const contentClasses = computed(() => [
+  {
+    [paddingClasses[props.padding]]: props.padding !== 'none',
+    'pt-0': (props.$slots.header || props.title) && props.padding !== 'none'
+  }
+])
+
+const footerClasses = computed(() => [
+  paddingClasses[props.padding],
+  {
+    'pt-0': props.padding !== 'none'
+  }
+])
+
+const titleClasses = computed(() => [
+  'font-bold text-gray-900 mb-2',
+  {
+    'text-lg': props.size === 'sm',
+    'text-xl': props.size === 'md', 
+    'text-2xl': props.size === 'lg'
+  }
+])
+
+const subtitleClasses = 'text-gray-600 leading-relaxed'
+
+const iconContainerClasses = computed(() => [
+  'flex items-center justify-center rounded-xl group-hover:scale-110 transition-transform duration-300',
+  props.gradient ? iconGradientClasses[props.gradient] : 'bg-gray-100',
+  {
+    'w-12 h-12': props.size === 'sm',
+    'w-16 h-16': props.size === 'md',
+    'w-20 h-20': props.size === 'lg'
+  }
+])
+
+const iconClasses = computed(() => [
+  'text-white',
+  {
+    'w-6 h-6': props.size === 'sm',
+    'w-8 h-8': props.size === 'md',
+    'w-10 h-10': props.size === 'lg'
+  }
+])
+</script>
\ No newline at end of file
diff --git a/src/components/BaseSkeleton.vue b/src/components/BaseSkeleton.vue
new file mode 100644
index 0000000..2c76c51
--- /dev/null
+++ b/src/components/BaseSkeleton.vue
@@ -0,0 +1,186 @@
+<template>
+  <div :class="containerClasses" v-bind="$attrs">
+    <!-- Card Skeleton -->
+    <div v-if="type === 'card'" class="space-y-4">
+      <div v-if="showHeader" class="flex items-center space-x-4">
+        <div class="skeleton-item w-12 h-12 rounded-xl"></div>
+        <div class="flex-1 space-y-2">
+          <div class="skeleton-item h-4 w-3/4 rounded"></div>
+          <div class="skeleton-item h-3 w-1/2 rounded"></div>
+        </div>
+      </div>
+      <div class="space-y-2">
+        <div v-for="i in lines" :key="i" class="skeleton-item h-3 rounded" :class="getLineWidth(i)"></div>
+      </div>
+    </div>
+
+    <!-- Text Skeleton -->
+    <div v-else-if="type === 'text'" class="space-y-2">
+      <div v-for="i in lines" :key="i" class="skeleton-item rounded" :class="[heightClass, getLineWidth(i)]"></div>
+    </div>
+
+    <!-- Avatar Skeleton -->
+    <div v-else-if="type === 'avatar'" :class="avatarClasses">
+      <div class="skeleton-item w-full h-full rounded-full"></div>
+    </div>
+
+    <!-- Button Skeleton -->
+    <div v-else-if="type === 'button'" :class="buttonClasses">
+      <div class="skeleton-item w-full h-full rounded-lg"></div>
+    </div>
+
+    <!-- Image Skeleton -->
+    <div v-else-if="type === 'image'" :class="imageClasses">
+      <div class="skeleton-item w-full h-full rounded-lg flex items-center justify-center">
+        <svg class="w-8 h-8 text-gray-300" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+        </svg>
+      </div>
+    </div>
+
+    <!-- Custom Skeleton -->
+    <div v-else :class="customClasses">
+      <div class="skeleton-item w-full h-full" :class="roundedClass"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  type?: 'card' | 'text' | 'avatar' | 'button' | 'image' | 'custom'
+  lines?: number
+  width?: string | number
+  height?: string | number
+  showHeader?: boolean
+  animated?: boolean
+  rounded?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  lines: 3,
+  showHeader: true,
+  animated: true,
+  rounded: true,
+  size: 'md'
+})
+
+// Size mappings for different types
+const avatarSizes = {
+  xs: 'w-6 h-6',
+  sm: 'w-8 h-8',
+  md: 'w-12 h-12',
+  lg: 'w-16 h-16',
+  xl: 'w-20 h-20'
+}
+
+const buttonSizes = {
+  xs: 'h-6 w-16',
+  sm: 'h-8 w-20',
+  md: 'h-10 w-24',
+  lg: 'h-12 w-32',
+  xl: 'h-14 w-40'
+}
+
+const textHeights = {
+  xs: 'h-2',
+  sm: 'h-3',
+  md: 'h-4',
+  lg: 'h-5',
+  xl: 'h-6'
+}
+
+const imageSizes = {
+  xs: 'w-16 h-12',
+  sm: 'w-20 h-16',
+  md: 'w-32 h-24',
+  lg: 'w-48 h-36',
+  xl: 'w-64 h-48'
+}
+
+// Computed classes
+const containerClasses = computed(() => [
+  'relative',
+  {
+    'animate-pulse': props.animated
+  }
+])
+
+const heightClass = computed(() => textHeights[props.size])
+
+const avatarClasses = computed(() => [
+  'relative',
+  avatarSizes[props.size]
+])
+
+const buttonClasses = computed(() => [
+  'relative',
+  buttonSizes[props.size]
+])
+
+const imageClasses = computed(() => [
+  'relative bg-gray-200',
+  props.width ? `w-[${props.width}]` : imageSizes[props.size].split(' ')[0],
+  props.height ? `h-[${props.height}]` : imageSizes[props.size].split(' ')[1]
+])
+
+const customClasses = computed(() => [
+  'relative',
+  props.width ? `w-[${props.width}]` : 'w-full',
+  props.height ? `h-[${props.height}]` : 'h-4'
+])
+
+const roundedClass = computed(() => 
+  props.rounded ? 'rounded' : ''
+)
+
+// Generate random widths for text lines to make it look more natural
+const getLineWidth = (lineNumber: number) => {
+  const widths = ['w-full', 'w-5/6', 'w-4/5', 'w-3/4', 'w-2/3', 'w-1/2']
+  const lastLineWidths = ['w-1/2', 'w-2/3', 'w-3/5']
+  
+  if (lineNumber === props.lines && props.lines > 1) {
+    return lastLineWidths[lineNumber % lastLineWidths.length]
+  }
+  
+  return widths[lineNumber % widths.length]
+}
+</script>
+
+<style scoped>
+.skeleton-item {
+  @apply bg-gray-200 animate-pulse;
+  background: linear-gradient(90deg, #f0f0f0 25%, transparent 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Disable animation when user prefers reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-item {
+    animation: none;
+    background: #f0f0f0;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .skeleton-item {
+    @apply bg-gray-700;
+    background: linear-gradient(90deg, #374151 25%, transparent 50%, #374151 75%);
+    background-size: 200% 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
index ce02e8c..76cf028 100644
--- a/src/components/CodeBlock.vue
+++ b/src/components/CodeBlock.vue
@@ -1,31 +1,89 @@
 <template>
-  <div class="code-block-wrapper">
-    <div v-if="title || language" class="code-header">
-      <span v-if="title" class="code-title">{{ title }}</span>
-      <span v-if="language" class="code-language">{{ language }}</span>
-      <button 
-        @click="copyToClipboard" 
-        class="copy-button"
-        :class="{ 'copied': copied }"
-        :title="copied ? 'Copied!' : 'Copy code'"
-      >
-        <svg v-if="!copied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
-        </svg>
-        <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-        </svg>
-      </button>
+  <div class="code-block-wrapper" :class="{ 'dark-theme': isDarkMode }">
+    <!-- Header -->
+    <div v-if="title || detectedLanguage || showActions" class="code-header">
+      <div class="flex items-center space-x-3">
+        <span v-if="title" class="code-title">{{ title }}</span>
+        <BaseBadge 
+          v-if="detectedLanguage" 
+          :variant="getBadgeVariant(detectedLanguage)"
+          size="xs"
+          rounded
+        >
+          {{ formatLanguageName(detectedLanguage) }}
+        </BaseBadge>
+      </div>
+      
+      <div class="flex items-center space-x-2" v-if="showActions">
+        <!-- Theme toggle for code block -->
+        <button
+          v-if="supportsDarkMode"
+          @click="toggleCodeTheme"
+          class="action-button"
+          :title="isDarkMode ? 'Switch to light theme' : 'Switch to dark theme'"
+          :aria-label="isDarkMode ? 'Switch to light theme' : 'Switch to dark theme'"
+        >
+          <svg v-if="isDarkMode" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+          </svg>
+          <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+          </svg>
+        </button>
+        
+        <!-- Copy button -->
+        <button 
+          @click="copyToClipboard" 
+          class="copy-button"
+          :class="{ 'copied': copied }"
+          :title="copied ? 'Copied!' : 'Copy code'"
+          :aria-label="copied ? 'Code copied to clipboard' : 'Copy code to clipboard'"
+        >
+          <svg v-if="!copied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+          </svg>
+          <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+          </svg>
+          <span v-if="copied" class="sr-only">Copied!</span>
+        </button>
+      </div>
     </div>
-    <div class="code-container" :class="`language-${language}`">
-      <pre><code ref="codeElement" :class="`language-${language}`">{{ code }}</code></pre>
+    
+    <!-- Code content -->
+    <div class="code-container" :class="containerClasses">
+      <pre class="code-pre"><code 
+        ref="codeElement" 
+        :class="codeClasses"
+        :data-language="detectedLanguage"
+      >{{ code }}</code></pre>
+      
+      <!-- Line numbers (optional) -->
+      <div v-if="showLineNumbers" class="line-numbers" aria-hidden="true">
+        <span 
+          v-for="n in lineCount" 
+          :key="n" 
+          class="line-number"
+          :data-line="n"
+        >{{ n }}</span>
+      </div>
+    </div>
+    
+    <!-- Footer with additional info -->
+    <div v-if="showFooter" class="code-footer">
+      <div class="flex items-center justify-between text-xs text-gray-500">
+        <span>{{ lineCount }} lines</span>
+        <span v-if="fileSize">{{ fileSize }}</span>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
+import { useTheme } from '@/composables/useTheme'
 import Prism from 'prismjs'
+import BaseBadge from './BaseBadge.vue'
 
 // Import commonly used languages
 import 'prismjs/components/prism-bash'
@@ -34,25 +92,164 @@ import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-typescript'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-go'
-
-// Import Prism themes (we'll use a custom theme)
-import 'prismjs/themes/prism-tomorrow.css'
+import 'prismjs/components/prism-php'
+import 'prismjs/components/prism-java'
+import 'prismjs/components/prism-c'
+import 'prismjs/components/prism-cpp'
+import 'prismjs/components/prism-csharp'
+import 'prismjs/components/prism-css'
+import 'prismjs/components/prism-scss'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-yaml'
+import 'prismjs/components/prism-docker'
+import 'prismjs/components/prism-sql'
 
 interface Props {
   code: string
   language?: string
   title?: string
+  showLineNumbers?: boolean
+  showActions?: boolean
+  showFooter?: boolean
+  supportsDarkMode?: boolean
+  maxHeight?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  language: 'bash'
+  language: 'text',
+  showLineNumbers: false,
+  showActions: true,
+  showFooter: false,
+  supportsDarkMode: true
 })
 
+const { isDark } = useTheme()
 const codeElement = ref<HTMLElement>()
 const copied = ref(false)
+const isDarkMode = ref(false)
+
+// Language detection patterns
+const languagePatterns = {
+  javascript: [/console\.(log|error)/, /function\s*\(/, /const\s+\w+\s*=/, /=>\s*{/, /import\s+.+from/, /require\(/],
+  typescript: [/interface\s+\w+/, /type\s+\w+\s*=/, /:\s*(string|number|boolean)/, /export\s+(interface|type|class)/, /import\s+type/],
+  python: [/def\s+\w+\s*\(/, /import\s+\w+/, /from\s+\w+\s+import/, /if\s+__name__\s*==\s*["']__main__["']/, /print\s*\(/],
+  go: [/func\s+\w+\s*\(/, /package\s+\w+/, /import\s*\(/, /fmt\.Print/, /var\s+\w+\s+\w+/],
+  bash: [/^#!\/bin\/bash/, /echo\s+/, /\$\{?\w+\}?/, /if\s*\[\[/, /curl\s+/],
+  json: [/^\s*{/, /^\s*\[/, /"[\w-]+"\s*:/, /,\s*$/, /}\s*,?\s*$/],
+  yaml: [/^\s*\w+:\s*/, /^\s*-\s+/, /^---/, /^\s*\w+:\s*$/, /\s*\|\s*/],
+  php: [/<\?php/, /echo\s+/, /\$\w+/, /function\s+\w+\s*\(/, /class\s+\w+/],
+  css: [/\w+\s*\{/, /[\w-]+:\s*[\w-]+;/, /@media\s/, /\.[\w-]+/, /#[\w-]+/],
+  html: [/<\/?[a-zA-Z][\w-]*[^<>]*>/, /<!DOCTYPE/, /<html/, /<head/, /<body/],
+  sql: [/SELECT\s+/i, /FROM\s+/i, /WHERE\s+/i, /INSERT\s+INTO/i, /UPDATE\s+/i, /DELETE\s+FROM/i]
+}
+
+// Detect language from code content
+const detectLanguage = (code: string): string => {
+  if (props.language && props.language !== 'text') {
+    return props.language
+  }
+
+  for (const [lang, patterns] of Object.entries(languagePatterns)) {
+    const matchCount = patterns.reduce((count, pattern) => {
+      return count + (pattern.test(code) ? 1 : 0)
+    }, 0)
+
+    if (matchCount >= 2) {
+      return lang
+    }
+  }
+
+  return props.language || 'text'
+}
+
+const detectedLanguage = computed(() => detectLanguage(props.code))
+
+const lineCount = computed(() => {
+  return props.code.split('\n').length
+})
+
+const fileSize = computed(() => {
+  const bytes = new Blob([props.code]).size
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`
+  return `${Math.round(bytes / (1024 * 1024))} MB`
+})
+
+// Format language names for display
+const formatLanguageName = (lang: string): string => {
+  const formatMap: Record<string, string> = {
+    'javascript': 'JavaScript',
+    'typescript': 'TypeScript',
+    'python': 'Python',
+    'go': 'Go',
+    'bash': 'Bash',
+    'json': 'JSON',
+    'yaml': 'YAML',
+    'php': 'PHP',
+    'css': 'CSS',
+    'scss': 'SCSS',
+    'html': 'HTML',
+    'markup': 'HTML',
+    'sql': 'SQL',
+    'java': 'Java',
+    'c': 'C',
+    'cpp': 'C++',
+    'csharp': 'C#',
+    'docker': 'Docker',
+    'text': 'Text'
+  }
+  
+  return formatMap[lang] || lang.toUpperCase()
+}
+
+// Get badge variant based on language
+const getBadgeVariant = (lang: string) => {
+  const variantMap: Record<string, string> = {
+    'javascript': 'warning',
+    'typescript': 'primary',
+    'python': 'success',
+    'go': 'info',
+    'bash': 'secondary',
+    'json': 'warning',
+    'yaml': 'info',
+    'php': 'secondary',
+    'css': 'primary',
+    'html': 'danger',
+    'sql': 'success'
+  }
+  
+  return variantMap[lang] || 'default'
+}
+
+// Computed classes
+const containerClasses = computed(() => [
+  'relative overflow-x-auto',
+  `language-${detectedLanguage.value}`,
+  {
+    'with-line-numbers': props.showLineNumbers,
+    'max-height-set': props.maxHeight
+  }
+])
+
+const codeClasses = computed(() => [
+  `language-${detectedLanguage.value}`,
+  'block w-full',
+  {
+    'pl-12': props.showLineNumbers
+  }
+])
 
 const highlightCode = () => {
   if (codeElement.value) {
+    // Ensure the language is loaded
+    if (!Prism.languages[detectedLanguage.value] && detectedLanguage.value !== 'text') {
+      try {
+        require(`prismjs/components/prism-${detectedLanguage.value}`)
+      } catch (e) {
+        console.warn(`Language ${detectedLanguage.value} not available in Prism.js`)
+      }
+    }
+    
     Prism.highlightElement(codeElement.value)
   }
 }
@@ -66,68 +263,155 @@ const copyToClipboard = async () => {
     }, 2000)
   } catch (err) {
     console.error('Failed to copy:', err)
+    // Fallback for older browsers
+    const textArea = document.createElement('textarea')
+    textArea.value = props.code
+    document.body.appendChild(textArea)
+    textArea.select()
+    try {
+      document.execCommand('copy')
+      copied.value = true
+      setTimeout(() => {
+        copied.value = false
+      }, 2000)
+    } catch (fallbackErr) {
+      console.error('Fallback copy failed:', fallbackErr)
+    }
+    document.body.removeChild(textArea)
   }
 }
 
+const toggleCodeTheme = () => {
+  isDarkMode.value = !isDarkMode.value
+}
+
 onMounted(() => {
+  isDarkMode.value = isDark.value
   highlightCode()
 })
 
 watch(() => props.code, () => {
   highlightCode()
 })
+
+watch(() => detectedLanguage.value, () => {
+  highlightCode()
+})
 </script>
 
 <style scoped>
 .code-block-wrapper {
-  @apply rounded-lg overflow-hidden border border-gray-700 bg-gray-900 my-4;
+  @apply rounded-lg overflow-hidden my-4 transition-colors duration-200;
+  @apply border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900;
+}
+
+.code-block-wrapper.dark-theme {
+  @apply border-gray-700 bg-gray-900;
 }
 
 .code-header {
-  @apply flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700;
+  @apply flex items-center justify-between px-4 py-3 transition-colors duration-200;
+  @apply bg-gray-50 border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700;
+}
+
+.dark-theme .code-header {
+  @apply bg-gray-800 border-gray-700;
 }
 
 .code-title {
-  @apply text-sm font-medium text-gray-300;
+  @apply text-sm font-semibold text-gray-800 dark:text-gray-200;
+}
+
+.dark-theme .code-title {
+  @apply text-gray-200;
 }
 
-.code-language {
-  @apply text-xs font-mono text-gray-500 ml-auto mr-2;
+.action-button {
+  @apply p-2 rounded-md transition-all duration-200;
+  @apply bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800;
+  @apply dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-200;
+}
+
+.dark-theme .action-button {
+  @apply bg-gray-700 hover:bg-gray-600 text-gray-400 hover:text-gray-200;
 }
 
 .copy-button {
-  @apply p-1.5 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white transition-all duration-200;
+  @apply p-2 rounded-md transition-all duration-200;
+  @apply bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800;
+  @apply dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-200;
+}
+
+.dark-theme .copy-button {
+  @apply bg-gray-700 hover:bg-gray-600 text-gray-400 hover:text-gray-200;
 }
 
 .copy-button.copied {
-  @apply bg-green-600 text-white;
+  @apply bg-green-100 text-green-700 dark:bg-green-800 dark:text-green-200;
+}
+
+.dark-theme .copy-button.copied {
+  @apply bg-green-800 text-green-200;
 }
 
 .code-container {
   @apply relative overflow-x-auto;
+  @apply bg-white dark:bg-gray-900;
 }
 
-.code-container pre {
-  @apply m-0 p-4 text-xs sm:text-sm font-mono;
+.dark-theme .code-container {
+  @apply bg-gray-900;
+}
+
+.code-pre {
+  @apply m-0 p-4 text-xs sm:text-sm font-mono leading-relaxed;
   background: transparent !important;
+  font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
 }
 
 .code-container code {
-  @apply text-gray-300;
+  @apply text-gray-800 dark:text-gray-200;
   background: transparent !important;
-  font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
+  font-family: inherit;
+}
+
+.dark-theme .code-container code {
+  @apply text-gray-200;
+}
+
+.line-numbers {
+  @apply absolute left-0 top-0 p-4 text-xs font-mono select-none;
+  @apply text-gray-400 bg-gray-50 border-r border-gray-200;
+  @apply dark:text-gray-600 dark:bg-gray-800 dark:border-gray-700;
+  width: 3rem;
+}
+
+.dark-theme .line-numbers {
+  @apply text-gray-600 bg-gray-800 border-gray-700;
 }
 
-/* Customize syntax highlighting colors for better contrast */
+.line-number {
+  @apply block text-right;
+}
+
+.code-footer {
+  @apply px-4 py-2 bg-gray-50 border-t border-gray-200 dark:bg-gray-800 dark:border-gray-700;
+}
+
+.dark-theme .code-footer {
+  @apply bg-gray-800 border-gray-700;
+}
+
+/* Light theme syntax highlighting */
 :deep(.token.comment),
 :deep(.token.prolog),
 :deep(.token.doctype),
 :deep(.token.cdata) {
-  @apply text-gray-500;
+  @apply text-gray-500 dark:text-gray-500;
 }
 
 :deep(.token.punctuation) {
-  @apply text-gray-400;
+  @apply text-gray-600 dark:text-gray-400;
 }
 
 :deep(.token.property),
@@ -137,7 +421,7 @@ watch(() => props.code, () => {
 :deep(.token.constant),
 :deep(.token.symbol),
 :deep(.token.deleted) {
-  @apply text-red-400;
+  @apply text-red-600 dark:text-red-400;
 }
 
 :deep(.token.selector),
@@ -146,7 +430,7 @@ watch(() => props.code, () => {
 :deep(.token.char),
 :deep(.token.builtin),
 :deep(.token.inserted) {
-  @apply text-green-400;
+  @apply text-green-600 dark:text-green-400;
 }
 
 :deep(.token.operator),
@@ -154,42 +438,139 @@ watch(() => props.code, () => {
 :deep(.token.url),
 :deep(.language-css .token.string),
 :deep(.style .token.string) {
-  @apply text-blue-400;
+  @apply text-blue-600 dark:text-blue-400;
 }
 
 :deep(.token.atrule),
 :deep(.token.attr-value),
 :deep(.token.keyword) {
-  @apply text-purple-400;
+  @apply text-purple-600 dark:text-purple-400;
 }
 
 :deep(.token.function),
 :deep(.token.class-name) {
-  @apply text-yellow-400;
+  @apply text-yellow-600 dark:text-yellow-400;
 }
 
 :deep(.token.regex),
 :deep(.token.important),
 :deep(.token.variable) {
+  @apply text-orange-600 dark:text-orange-400;
+}
+
+/* Dark theme overrides for code wrapper */
+.dark-theme :deep(.token.comment),
+.dark-theme :deep(.token.prolog),
+.dark-theme :deep(.token.doctype),
+.dark-theme :deep(.token.cdata) {
+  @apply text-gray-500;
+}
+
+.dark-theme :deep(.token.punctuation) {
+  @apply text-gray-400;
+}
+
+.dark-theme :deep(.token.property),
+.dark-theme :deep(.token.tag),
+.dark-theme :deep(.token.boolean),
+.dark-theme :deep(.token.number),
+.dark-theme :deep(.token.constant),
+.dark-theme :deep(.token.symbol),
+.dark-theme :deep(.token.deleted) {
+  @apply text-red-400;
+}
+
+.dark-theme :deep(.token.selector),
+.dark-theme :deep(.token.attr-name),
+.dark-theme :deep(.token.string),
+.dark-theme :deep(.token.char),
+.dark-theme :deep(.token.builtin),
+.dark-theme :deep(.token.inserted) {
+  @apply text-green-400;
+}
+
+.dark-theme :deep(.token.operator),
+.dark-theme :deep(.token.entity),
+.dark-theme :deep(.token.url),
+.dark-theme :deep(.language-css .token.string),
+.dark-theme :deep(.style .token.string) {
+  @apply text-blue-400;
+}
+
+.dark-theme :deep(.token.atrule),
+.dark-theme :deep(.token.attr-value),
+.dark-theme :deep(.token.keyword) {
+  @apply text-purple-400;
+}
+
+.dark-theme :deep(.token.function),
+.dark-theme :deep(.token.class-name) {
+  @apply text-yellow-400;
+}
+
+.dark-theme :deep(.token.regex),
+.dark-theme :deep(.token.important),
+.dark-theme :deep(.token.variable) {
   @apply text-orange-400;
 }
 
-/* Mobile responsive adjustments */
+/* Responsive adjustments */
 @media (max-width: 640px) {
-  .code-container pre {
-    @apply text-[10px] p-3;
+  .code-pre {
+    @apply text-[11px] p-3;
   }
   
   .code-header {
-    @apply px-3 py-1.5;
+    @apply px-3 py-2 flex-col space-y-2;
+  }
+  
+  .code-header > div {
+    @apply w-full flex justify-between items-center;
   }
   
   .code-title {
     @apply text-xs;
   }
   
+  .action-button,
   .copy-button {
-    @apply p-1;
+    @apply p-1.5;
   }
+  
+  .line-numbers {
+    @apply p-3 text-[10px];
+    width: 2.5rem;
+  }
+  
+  .with-line-numbers code {
+    @apply pl-10;
+  }
+}
+
+/* Scrollbar styling for code blocks */
+.code-container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.code-container::-webkit-scrollbar-track {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.code-container::-webkit-scrollbar-thumb {
+  @apply bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 rounded;
+}
+
+.dark-theme .code-container::-webkit-scrollbar-track {
+  @apply bg-gray-800;
+}
+
+.dark-theme .code-container::-webkit-scrollbar-thumb {
+  @apply bg-gray-600 hover:bg-gray-500;
+}
+
+/* Focus styles for accessibility */
+.action-button:focus,
+.copy-button:focus {
+  @apply ring-2 ring-blue-500 ring-offset-2 outline-none;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/LazyImage.vue b/src/components/LazyImage.vue
new file mode 100644
index 0000000..2665fa9
--- /dev/null
+++ b/src/components/LazyImage.vue
@@ -0,0 +1,238 @@
+<template>
+  <div ref="containerRef" :class="containerClasses">
+    <Transition
+      name="lazy-image"
+      enter-active-class="transition-opacity duration-300 ease-in-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+    >
+      <img
+        v-if="loaded && !error"
+        :src="actualSrc"
+        :alt="alt"
+        :width="width"
+        :height="height"
+        :class="imageClasses"
+        @load="onLoad"
+        @error="onError"
+      />
+    </Transition>
+
+    <!-- Loading skeleton -->
+    <div
+      v-if="!loaded && !error"
+      :class="skeletonClasses"
+      :aria-label="loadingText"
+    >
+      <BaseSkeleton 
+        type="image" 
+        :size="skeletonSize"
+        :width="width"
+        :height="height"
+      />
+    </div>
+
+    <!-- Error state -->
+    <div
+      v-if="error"
+      :class="errorClasses"
+      :aria-label="errorText"
+    >
+      <svg class="w-8 h-8 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+      </svg>
+      <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">{{ errorText }}</p>
+    </div>
+
+    <!-- Loading indicator overlay for slow connections -->
+    <div
+      v-if="showLoadingIndicator && !loaded && !error"
+      class="absolute inset-0 flex items-center justify-center bg-gray-100/50 dark:bg-gray-800/50"
+    >
+      <div class="flex items-center space-x-2 text-gray-600 dark:text-gray-400">
+        <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <span class="text-sm">{{ loadingText }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import BaseSkeleton from './BaseSkeleton.vue'
+
+interface Props {
+  src: string
+  alt: string
+  width?: number | string
+  height?: number | string
+  placeholder?: string
+  lazy?: boolean
+  threshold?: number
+  errorText?: string
+  loadingText?: string
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'
+  rounded?: boolean
+  shadow?: boolean
+  skeletonSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lazy: true,
+  threshold: 0.1,
+  errorText: 'Failed to load image',
+  loadingText: 'Loading...',
+  objectFit: 'cover',
+  rounded: false,
+  shadow: false,
+  skeletonSize: 'md'
+})
+
+const containerRef = ref<HTMLElement>()
+const loaded = ref(false)
+const error = ref(false)
+const inView = ref(!props.lazy) // If not lazy, assume in view
+const showLoadingIndicator = ref(false)
+let observer: IntersectionObserver | null = null
+let loadingTimer: ReturnType<typeof setTimeout> | null = null
+
+// Use placeholder if provided, otherwise use actual src when in view
+const actualSrc = computed(() => {
+  if (!inView.value) return props.placeholder || ''
+  return props.src
+})
+
+const containerClasses = computed(() => [
+  'relative overflow-hidden',
+  {
+    'rounded': props.rounded,
+    'shadow-md': props.shadow
+  }
+])
+
+const imageClasses = computed(() => [
+  'w-full h-full transition-all duration-300',
+  {
+    'object-cover': props.objectFit === 'cover',
+    'object-contain': props.objectFit === 'contain',
+    'object-fill': props.objectFit === 'fill',
+    'object-scale-down': props.objectFit === 'scale-down',
+    'object-none': props.objectFit === 'none'
+  }
+])
+
+const skeletonClasses = computed(() => [
+  'w-full h-full flex items-center justify-center bg-gray-100 dark:bg-gray-800'
+])
+
+const errorClasses = computed(() => [
+  'w-full h-full flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500',
+  'min-h-[100px]' // Minimum height for error state
+])
+
+const setupIntersectionObserver = () => {
+  if (!containerRef.value || !props.lazy) return
+
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      if (entry.isIntersecting) {
+        inView.value = true
+        observer?.disconnect()
+      }
+    },
+    {
+      threshold: props.threshold,
+      rootMargin: '50px' // Start loading 50px before the image enters the viewport
+    }
+  )
+
+  observer.observe(containerRef.value)
+}
+
+const onLoad = () => {
+  loaded.value = true
+  error.value = false
+  showLoadingIndicator.value = false
+  
+  if (loadingTimer) {
+    clearTimeout(loadingTimer)
+    loadingTimer = null
+  }
+}
+
+const onError = () => {
+  error.value = true
+  loaded.value = false
+  showLoadingIndicator.value = false
+  
+  if (loadingTimer) {
+    clearTimeout(loadingTimer)
+    loadingTimer = null
+  }
+}
+
+// Show loading indicator after a delay for slow connections
+const startLoadingTimer = () => {
+  if (loadingTimer) {
+    clearTimeout(loadingTimer)
+  }
+  
+  loadingTimer = setTimeout(() => {
+    if (!loaded.value && !error.value) {
+      showLoadingIndicator.value = true
+    }
+  }, 1000) // Show loading indicator after 1 second
+}
+
+// Watch for src changes to reset state
+watch(() => props.src, () => {
+  loaded.value = false
+  error.value = false
+  showLoadingIndicator.value = false
+  
+  if (props.lazy && !inView.value) {
+    // Reset intersection observer for new src
+    setupIntersectionObserver()
+  }
+})
+
+// Watch for inView changes to start loading
+watch(inView, (isInView) => {
+  if (isInView && props.src) {
+    startLoadingTimer()
+  }
+})
+
+onMounted(() => {
+  setupIntersectionObserver()
+  
+  // If not lazy loading or already in view, start loading timer
+  if (!props.lazy || inView.value) {
+    startLoadingTimer()
+  }
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+  if (loadingTimer) {
+    clearTimeout(loadingTimer)
+  }
+})
+</script>
+
+<style scoped>
+.lazy-image-enter-active {
+  transition: opacity 0.3s ease-in-out;
+}
+
+.lazy-image-enter-from {
+  opacity: 0;
+}
+
+.lazy-image-enter-to {
+  opacity: 1;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 26d0e57..72fc1c1 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -36,16 +36,21 @@
             <a href="https://pico-api.banuacoder.com/api/v1" target="_blank" class="bg-pico-blue hover:bg-pico-deep text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
               {{ t('nav.liveApi') }}
             </a>
-            <!-- Language Toggle -->
+            <!-- Theme & Language Controls -->
             <div class="flex items-center space-x-2 ml-4">
+              <!-- Theme Toggle -->
+              <ThemeToggle />
+              
+              <!-- Language Toggle -->
               <button 
                 @click="toggleLanguage"
-                class="flex items-center space-x-2 px-3 py-2 rounded-lg border border-gray-200 hover:border-pico-sky transition-colors bg-white/80 backdrop-blur-sm"
+                class="flex items-center space-x-2 px-3 py-2 rounded-lg border border-gray-200 hover:border-pico-sky transition-colors bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 dark:border-gray-600 dark:hover:border-pico-sky"
+                :aria-label="`Switch to ${locale === 'en' ? 'Indonesian' : 'English'} language`"
               >
-                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
                 </svg>
-                <span class="text-sm font-medium text-gray-700">{{ locale === 'en' ? 'ID' : 'EN' }}</span>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-200">{{ locale === 'en' ? 'ID' : 'EN' }}</span>
               </button>
             </div>
           </div>
@@ -53,15 +58,19 @@
 
         <!-- Mobile menu button -->
         <div class="md:hidden flex items-center space-x-2">
+          <!-- Theme Toggle for Mobile -->
+          <ThemeToggle variant="compact" />
+          
           <!-- Language Toggle for Mobile -->
           <button 
             @click="toggleLanguage"
-            class="flex items-center space-x-1 px-2 py-1.5 rounded-lg border border-gray-200 hover:border-pico-sky transition-colors bg-white/80 backdrop-blur-sm"
+            class="flex items-center space-x-1 px-2 py-1.5 rounded-lg border border-gray-200 hover:border-pico-sky transition-colors bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 dark:border-gray-600"
+            :aria-label="`Switch to ${locale === 'en' ? 'Indonesian' : 'English'} language`"
           >
-            <svg class="w-3 h-3 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-3 h-3 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
             </svg>
-            <span class="text-xs font-medium text-gray-700">{{ locale === 'en' ? 'ID' : 'EN' }}</span>
+            <span class="text-xs font-medium text-gray-700 dark:text-gray-200">{{ locale === 'en' ? 'ID' : 'EN' }}</span>
           </button>
           
           <!-- Hamburger button -->
@@ -70,6 +79,8 @@
             type="button"
             class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-pico-blue hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pico-blue transition-colors"
             :aria-expanded="mobileMenuOpen"
+            aria-label="Toggle mobile navigation menu"
+            :aria-controls="mobileMenuOpen ? 'mobile-menu' : undefined"
           >
             <span class="sr-only">Open main menu</span>
             <!-- Hamburger icon -->
@@ -101,8 +112,11 @@
 
     <!-- Mobile menu -->
     <div 
+      id="mobile-menu"
       class="fixed top-0 right-0 z-50 w-64 h-full bg-white shadow-lg transform transition-transform duration-300 ease-in-out md:hidden"
       :class="mobileMenuOpen ? 'translate-x-0' : 'translate-x-full'"
+      role="navigation"
+      :aria-hidden="!mobileMenuOpen"
     >
       <div class="p-6 pt-20">
         <div class="space-y-4">
@@ -147,6 +161,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import ThemeToggle from './ThemeToggle.vue'
 
 const { t, locale } = useI18n()
 
diff --git a/src/components/PageTransition.vue b/src/components/PageTransition.vue
new file mode 100644
index 0000000..96d315c
--- /dev/null
+++ b/src/components/PageTransition.vue
@@ -0,0 +1,230 @@
+<template>
+  <Transition 
+    :name="transitionName" 
+    mode="out-in"
+    :appear="appear"
+    @before-enter="onBeforeEnter"
+    @enter="onEnter"
+    @after-enter="onAfterEnter"
+    @before-leave="onBeforeLeave"
+    @leave="onLeave"
+    @after-leave="onAfterLeave"
+  >
+    <slot />
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+interface Props {
+  type?: 'fade' | 'slide' | 'scale' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right'
+  duration?: number
+  appear?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'fade',
+  duration: 300,
+  appear: true,
+  disabled: false
+})
+
+const emit = defineEmits<{
+  beforeEnter: [el: Element]
+  enter: [el: Element, done: () => void]
+  afterEnter: [el: Element]
+  beforeLeave: [el: Element]
+  leave: [el: Element, done: () => void]
+  afterLeave: [el: Element]
+}>()
+
+const route = useRoute()
+
+// Determine transition type based on route changes
+const transitionName = computed(() => {
+  if (props.disabled) return ''
+  
+  // You can customize this logic based on your routing needs
+  const currentPath = route.path
+  const transitionMap: Record<string, string> = {
+    '/': 'slide-right',
+    '/docs': 'slide-left',
+    '/api': 'slide-left'
+  }
+  
+  return transitionMap[currentPath] || props.type
+})
+
+// Transition event handlers
+const onBeforeEnter = (el: Element) => {
+  emit('beforeEnter', el)
+}
+
+const onEnter = (el: Element, done: () => void) => {
+  emit('enter', el, done)
+}
+
+const onAfterEnter = (el: Element) => {
+  emit('afterEnter', el)
+}
+
+const onBeforeLeave = (el: Element) => {
+  emit('beforeLeave', el)
+}
+
+const onLeave = (el: Element, done: () => void) => {
+  emit('leave', el, done)
+}
+
+const onAfterLeave = (el: Element) => {
+  emit('afterLeave', el)
+}
+</script>
+
+<style scoped>
+/* Fade transition */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Slide transitions */
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.slide-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+/* Slide up/down */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.slide-down-enter-from {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+/* Slide left/right */
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* Scale transition */
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.scale-enter-from {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(1.05);
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .fade-enter-active,
+  .fade-leave-active,
+  .slide-enter-active,
+  .slide-leave-active,
+  .slide-up-enter-active,
+  .slide-up-leave-active,
+  .slide-down-enter-active,
+  .slide-down-leave-active,
+  .slide-left-enter-active,
+  .slide-left-leave-active,
+  .slide-right-enter-active,
+  .slide-right-leave-active,
+  .scale-enter-active,
+  .scale-leave-active {
+    transition: none;
+  }
+  
+  .fade-enter-from,
+  .fade-leave-to,
+  .slide-enter-from,
+  .slide-leave-to,
+  .slide-up-enter-from,
+  .slide-up-leave-to,
+  .slide-down-enter-from,
+  .slide-down-leave-to,
+  .slide-left-enter-from,
+  .slide-left-leave-to,
+  .slide-right-enter-from,
+  .slide-right-leave-to,
+  .scale-enter-from,
+  .scale-leave-to {
+    opacity: 1;
+    transform: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ThemeToggle.vue b/src/components/ThemeToggle.vue
new file mode 100644
index 0000000..b92ab53
--- /dev/null
+++ b/src/components/ThemeToggle.vue
@@ -0,0 +1,264 @@
+<template>
+  <div class="relative">
+    <button
+      @click="toggleDropdown"
+      :class="buttonClasses"
+      :aria-label="`Current theme: ${theme}. Click to change theme.`"
+      :aria-expanded="dropdownOpen"
+      aria-haspopup="true"
+      ref="toggleButton"
+    >
+      <!-- Sun icon for light theme -->
+      <svg 
+        v-if="theme === 'light'" 
+        class="w-4 h-4 transition-transform duration-200" 
+        fill="none" 
+        stroke="currentColor" 
+        viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+      </svg>
+
+      <!-- Moon icon for dark theme -->
+      <svg 
+        v-else-if="theme === 'dark'" 
+        class="w-4 h-4 transition-transform duration-200" 
+        fill="none" 
+        stroke="currentColor" 
+        viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+      </svg>
+
+      <!-- Monitor icon for system theme -->
+      <svg 
+        v-else 
+        class="w-4 h-4 transition-transform duration-200" 
+        fill="none" 
+        stroke="currentColor" 
+        viewBox="0 0 24 24"
+      >
+        <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <line x1="8" y1="21" x2="16" y2="21" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <line x1="12" y1="17" x2="12" y2="21" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      </svg>
+
+      <!-- Dropdown arrow -->
+      <svg 
+        class="w-3 h-3 ml-1 transition-transform duration-200" 
+        :class="{ 'rotate-180': dropdownOpen }"
+        fill="none" 
+        stroke="currentColor" 
+        viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+      </svg>
+    </button>
+
+    <!-- Dropdown menu -->
+    <Transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div 
+        v-if="dropdownOpen"
+        :class="dropdownClasses"
+        role="menu"
+        aria-orientation="vertical"
+        ref="dropdown"
+      >
+        <button
+          v-for="option in themeOptions"
+          :key="option.value"
+          @click="selectTheme(option.value)"
+          :class="getOptionClasses(option.value)"
+          role="menuitem"
+        >
+          <component :is="option.icon" class="w-4 h-4" />
+          <span>{{ option.label }}</span>
+          <svg 
+            v-if="theme === option.value"
+            class="w-4 h-4 text-blue-600 ml-auto" 
+            fill="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+          </svg>
+        </button>
+      </div>
+    </Transition>
+
+    <!-- Backdrop -->
+    <div
+      v-if="dropdownOpen"
+      class="fixed inset-0 z-10"
+      @click="closeDropdown"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed, h } from 'vue'
+import { useTheme } from '@/composables/useTheme'
+
+interface Props {
+  variant?: 'default' | 'compact'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default'
+})
+
+const { theme, setTheme } = useTheme()
+
+const dropdownOpen = ref(false)
+const toggleButton = ref<HTMLElement>()
+const dropdown = ref<HTMLElement>()
+
+const themeOptions = [
+  {
+    value: 'light' as const,
+    label: 'Light',
+    icon: h('svg', {
+      class: 'w-4 h-4',
+      fill: 'none',
+      stroke: 'currentColor',
+      viewBox: '0 0 24 24'
+    }, [
+      h('path', {
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': '2',
+        d: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z'
+      })
+    ])
+  },
+  {
+    value: 'dark' as const,
+    label: 'Dark',
+    icon: h('svg', {
+      class: 'w-4 h-4',
+      fill: 'none',
+      stroke: 'currentColor',
+      viewBox: '0 0 24 24'
+    }, [
+      h('path', {
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': '2',
+        d: 'M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'
+      })
+    ])
+  },
+  {
+    value: 'system' as const,
+    label: 'System',
+    icon: h('svg', {
+      class: 'w-4 h-4',
+      fill: 'none',
+      stroke: 'currentColor',
+      viewBox: '0 0 24 24'
+    }, [
+      h('rect', {
+        x: '2',
+        y: '3',
+        width: '20',
+        height: '14',
+        rx: '2',
+        ry: '2',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': '2'
+      }),
+      h('line', {
+        x1: '8',
+        y1: '21',
+        x2: '16',
+        y2: '21',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': '2'
+      }),
+      h('line', {
+        x1: '12',
+        y1: '17',
+        x2: '12',
+        y2: '21',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': '2'
+      })
+    ])
+  }
+]
+
+const buttonClasses = computed(() => [
+  'flex items-center px-3 py-2 rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1',
+  {
+    'border-gray-200 hover:border-pico-sky bg-white/80 backdrop-blur-sm text-gray-700 hover:text-gray-900': props.variant === 'default',
+    'border-gray-200 hover:border-pico-sky bg-white text-gray-700 hover:text-gray-900 min-w-0': props.variant === 'compact'
+  }
+])
+
+const dropdownClasses = computed(() => [
+  'absolute right-0 mt-2 w-32 bg-white border border-gray-200 rounded-lg shadow-lg z-20 py-1',
+  'dark:bg-gray-800 dark:border-gray-700'
+])
+
+const toggleDropdown = () => {
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+const closeDropdown = () => {
+  dropdownOpen.value = false
+}
+
+const selectTheme = (selectedTheme: 'light' | 'dark' | 'system') => {
+  setTheme(selectedTheme)
+  closeDropdown()
+}
+
+const getOptionClasses = (optionValue: string) => [
+  'flex items-center w-full px-3 py-2 text-sm text-left hover:bg-gray-100 transition-colors duration-150 space-x-2',
+  'dark:hover:bg-gray-700 dark:text-gray-200',
+  {
+    'text-blue-600 bg-blue-50 hover:bg-blue-100': theme.value === optionValue,
+    'text-gray-700': theme.value !== optionValue
+  }
+]
+
+// Handle clicks outside the dropdown
+const handleClickOutside = (event: MouseEvent) => {
+  if (
+    dropdownOpen.value &&
+    toggleButton.value &&
+    dropdown.value &&
+    !toggleButton.value.contains(event.target as Node) &&
+    !dropdown.value.contains(event.target as Node)
+  ) {
+    closeDropdown()
+  }
+}
+
+// Handle escape key
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && dropdownOpen.value) {
+    closeDropdown()
+    toggleButton.value?.focus()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keydown', handleKeyDown)
+})
+</script>
\ No newline at end of file
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
new file mode 100644
index 0000000..36c8157
--- /dev/null
+++ b/src/composables/useTheme.ts
@@ -0,0 +1,66 @@
+import { ref, watch, onMounted } from 'vue'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+const theme = ref<Theme>('system')
+const isDark = ref(false)
+
+export function useTheme() {
+  const setTheme = (newTheme: Theme) => {
+    theme.value = newTheme
+    localStorage.setItem('pico-theme', newTheme)
+    updateTheme()
+  }
+
+  const updateTheme = () => {
+    const root = document.documentElement
+    
+    if (theme.value === 'dark' || 
+        (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      root.classList.add('dark')
+      isDark.value = true
+    } else {
+      root.classList.remove('dark')
+      isDark.value = false
+    }
+  }
+
+  const toggleTheme = () => {
+    if (theme.value === 'light') {
+      setTheme('dark')
+    } else if (theme.value === 'dark') {
+      setTheme('system')
+    } else {
+      setTheme('light')
+    }
+  }
+
+  const initTheme = () => {
+    // Load theme from localStorage
+    const savedTheme = localStorage.getItem('pico-theme') as Theme
+    if (savedTheme && ['light', 'dark', 'system'].includes(savedTheme)) {
+      theme.value = savedTheme
+    }
+
+    updateTheme()
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    mediaQuery.addEventListener('change', updateTheme)
+  }
+
+  // Watch for theme changes
+  watch(theme, updateTheme)
+
+  onMounted(() => {
+    initTheme()
+  })
+
+  return {
+    theme,
+    isDark,
+    setTheme,
+    toggleTheme,
+    initTheme
+  }
+}
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index ec14363..9abf7b5 100644
--- a/src/style.css
+++ b/src/style.css
@@ -16,6 +16,115 @@ body {
   font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
 }
 
+/* Accessibility improvements */
+.focus-visible:focus {
+  outline: 2px solid #3498db;
+  outline-offset: 2px;
+}
+
+/* Skip link for keyboard navigation */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: #000;
+  color: #fff;
+  padding: 8px;
+  text-decoration: none;
+  border-radius: 4px;
+  z-index: 100;
+}
+
+.skip-link:focus {
+  top: 6px;
+}
+
+/* Improved high contrast mode support */
+@media (prefers-contrast: high) {
+  .gradient-text {
+    background: #000;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .animate-fade-in-up,
+  .animate-pulse,
+  .animate-bounce,
+  .animate-spin {
+    animation: none;
+  }
+  
+  .typing-animation,
+  .response-animation,
+  .typing-cursor {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+/* Touch target improvements for mobile */
+@media (max-width: 768px) {
+  button, a, [role="button"] {
+    min-height: 44px;
+    min-width: 44px;
+    position: relative;
+  }
+  
+  /* Larger tap areas for small buttons */
+  button:before, a:before, [role="button"]:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 44px;
+    min-height: 44px;
+    background: transparent;
+  }
+}
+
+/* Better mobile scrolling */
+@media (max-width: 640px) {
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  /* Prevent horizontal scroll */
+  body {
+    overflow-x: hidden;
+  }
+  
+  /* Better touch scrolling on mobile */
+  .overflow-x-auto, .overflow-y-auto {
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+  }
+}
+
+/* Mobile-first responsive text */
+.responsive-text {
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.25rem; /* 20px */
+}
+
+@media (min-width: 640px) {
+  .responsive-text {
+    font-size: 1rem; /* 16px */
+    line-height: 1.5rem; /* 24px */
+  }
+}
+
+@media (min-width: 768px) {
+  .responsive-text {
+    font-size: 1.125rem; /* 18px */
+    line-height: 1.75rem; /* 28px */
+  }
+}
+
 .gradient-bg {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5c85f11..ae89228 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="min-h-screen bg-white">
+    <!-- Skip Navigation -->
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+    
     <!-- Navigation -->
     <Navigation />
 
@@ -38,7 +41,7 @@
         <div class="absolute bottom-20 left-20 w-10 h-10 bg-cyan-500/20 rounded-lg rotate-45 animate-bounce animation-delay-3000"></div>
       </div>
       
-      <div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 relative z-10">
+      <div id="main-content" class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 relative z-10">
         <div class="grid lg:grid-cols-2 gap-6 md:gap-12 lg:gap-16 items-center">
           <!-- Left Content -->
           <div class="text-center lg:text-left">
diff --git a/tailwind.config.js b/tailwind.config.js
index 29ee842..95cf866 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ export default {
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {