Add user profile page with Vue Router navigation

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package.json

@@ -9,16 +9,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-vue-next": "^0.344.0",
     "vue": "^3.4.21",
-    "lucide-vue-next": "^0.344.0"
+    "vue-router": "^4.6.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.1.6",
-    "vue-tsc": "^2.0.6",
-    "tailwindcss": "^3.4.1",
-    "autoprefixer": "^10.4.18",
-    "postcss": "^8.4.35"
+    "vue-tsc": "^2.0.6"
   }
 }

src/App.vue

@@ -1,35 +1,12 @@
 <script setup lang="ts">
 import Navbar from '@/components/Navbar.vue'
-import HeroSection from '@/components/HeroSection.vue'
-import SupportedIDEs from '@/components/SupportedIDEs.vue'
-import ProblemSection from '@/components/ProblemSection.vue'
-import SolutionSection from '@/components/SolutionSection.vue'
-import UseCasesSection from '@/components/UseCasesSection.vue'
-import TechLogicSection from '@/components/TechLogicSection.vue'
-import HowItWorks from '@/components/HowItWorks.vue'
-// import PricingSection from '@/components/PricingSection.vue'
-// import CTASection from '@/components/CTASection.vue'
-import FAQSection from '@/components/FAQSection.vue'
 import Footer from '@/components/Footer.vue'
-
-
 </script>
 
 <template>
   <div class="min-h-screen">
     <Navbar />
-    <main>
-      <HeroSection />
-      <SupportedIDEs />
-      <ProblemSection />
-      <SolutionSection />
-      <UseCasesSection />
-      <TechLogicSection />
-      <HowItWorks />
-      <!-- <PricingSection /> -->
-      <!-- <CTASection /> -->
-      <FAQSection />
-    </main>
+    <router-view />
     <Footer/>
   </div>
 </template>

src/components/Navbar.vue

@@ -7,11 +7,11 @@
     <div class="max-w-7xl mx-auto px-6 lg:px-8">
       <div class="flex items-center justify-between h-16">
         <!-- Logo -->
-        <div class="flex items-center space-x-2">
+        <router-link to="/" class="flex items-center space-x-2">
           <img src="/assets/image/codestyle-logo.png" alt="CodeStyle Logo" class="w-8 h-8" />
           <span class="text-xl font-bold text-gray-900">CodeStyle</span>
           <span class="text-sm text-gray-500 font-normal">码蜂</span>
-        </div>
+        </router-link>
 
         <!-- Navigation Links -->
         <div class="hidden md:flex items-center space-x-8">
@@ -34,9 +34,9 @@
 
         <!-- User Button -->
         <div class="flex items-center">
-          <a href="#cta" class="bg-primary-blue text-white px-6 py-2.5 rounded-lg hover:bg-blue-700 transition-colors font-bold text-sm shadow-lg hover:shadow-xl">
-            立即开始
-          </a>
+          <router-link to="/profile" class="bg-primary-blue text-white px-6 py-2.5 rounded-lg hover:bg-blue-700 transition-colors font-bold text-sm shadow-lg hover:shadow-xl">
+            个人中心
+          </router-link>
         </div>
       </div>
     </div>