转换为vue的代码

src/App.vue

@@ -0,0 +1,22 @@
+```vue
+<template>
+  <div id="app">
+    <custom-navbar />
+    <router-view />
+    <custom-footer />
+  </div>
+</template>
+
+<script>
+import CustomNavbar from './components/CustomNavbar.vue'
+import CustomFooter from './components/CustomFooter.vue'
+
+export default {
+  name: 'App',
+  components: {
+    CustomNavbar,
+    CustomFooter
+  }
+}
+</script>
+```

src/components/CustomFooter.vue

@@ -0,0 +1,120 @@
+```vue
+<template>
+  <footer class="bg-gray-900 text-white py-16">
+    <div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8">
+      <div class="footer-about">
+        <div class="flex items-center gap-2 mb-4">
+          <i data-feather="shield" class="text-blue-500"></i>
+          <span class="font-serif font-bold text-lg">SolStrategies</span>
+        </div>
+        <p class="text-gray-400 mb-6">
+          Singapore-headquartered leader in integrated PR strategies, secure investments, and comprehensive security solutions.
+        </p>
+        <div class="flex gap-4">
+          <a href="#" class="social-link">
+            <i data-feather="linkedin"></i>
+          </a>
+          <a href="#" class="social-link">
+            <i data-feather="twitter"></i>
+          </a>
+          <a href="#" class="social-link">
+            <i data-feather="facebook"></i>
+          </a>
+        </div>
+      </div>
+
+      <div>
+        <h3 class="footer-heading">Services</h3>
+        <ul class="space-y-3">
+          <li v-for="service in services" :key="service">
+            <a href="#" class="footer-link">{{ service }}</a>
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="footer-heading">Quick Links</h3>
+        <ul class="space-y-3">
+          <li v-for="link in quickLinks" :key="link.name">
+            <router-link :to="link.path" class="footer-link">{{ link.name }}</router-link>
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="footer-heading">Contact</h3>
+        <div class="space-y-4">
+          <div class="flex items-start gap-3">
+            <i data-feather="map-pin" class="text-blue-500 mt-1"></i>
+            <span class="text-gray-400">200 Park Avenue, New York, NY 10166</span>
+          </div>
+          <div class="flex items-center gap-3">
+            <i data-feather="mail" class="text-blue-500"></i>
+            <span class="text-gray-400">contact@solstrategies.com</span>
+          </div>
+          <div class="flex items-center gap-3">
+            <i data-feather="phone" class="text-blue-500"></i>
+            <span class="text-gray-400">+1 (212) 555-0100</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container mx-auto px-4 border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
+      &copy; {{ new Date().getFullYear() }} SolStrategies. All rights reserved.
+    </div>
+  </footer>
+</template>
+
+<script>
+import { ref } from 'vue'
+import feather from 'feather-icons'
+
+export default {
+  setup() {
+    const services = ref([
+      'Strategic Communications',
+      'Crisis Management',
+      'Investment Security',
+      'Cyber Protection',
+      'Executive Protection'
+    ])
+
+    const quickLinks = ref([
+      { name: 'About Us', path: '/about' },
+      { name: 'Insights', path: '/insights' },
+      { name: 'Careers', path: '#' },
+      { name: 'Contact', path: '/contact' },
+      { name: 'Privacy Policy', path: '#' }
+    ])
+
+    return {
+      services,
+      quickLinks
+    }
+  },
+  mounted() {
+    feather.replace()
+  }
+}
+</script>
+
+<style scoped>
+.footer-heading {
+  @apply text-lg font-bold mb-4 pb-2 relative;
+}
+
+.footer-heading::after {
+  content: '';
+  @apply absolute bottom-0 left-0 w-10 h-0.5 bg-blue-500;
+}
+
+.footer-link {
+  @apply text-gray-400 hover:text-white transition-colors duration-200;
+}
+
+.social-link {
+  @apply bg-gray-800 hover:bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200;
+}
+</style>
+```

src/components/CustomNavbar.vue

@@ -0,0 +1,117 @@
+```vue
+<template>
+  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-300" :class="{ 'scrolled': isScrolled }">
+    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+      <router-link to="/" class="logo flex items-center gap-2">
+        <i data-feather="shield" class="text-blue-500"></i>
+        <span class="font-serif font-bold text-white">SolStrategies</span>
+      </router-link>
+
+      <ul class="hidden md:flex gap-8 items-center">
+        <li v-for="item in navItems" :key="item.name">
+          <router-link :to="item.path" class="nav-link text-white hover:text-white transition-colors duration-200">
+            {{ item.name }}
+          </router-link>
+        </li>
+        <li>
+          <router-link to="/contact" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-all duration-200">
+            Contact
+          </router-link>
+        </li>
+      </ul>
+
+      <button @click="toggleMobileMenu" class="md:hidden text-white">
+        <i :data-feather="mobileMenuOpen ? 'x' : 'menu'"></i>
+      </button>
+    </div>
+
+    <div v-if="mobileMenuOpen" class="md:hidden bg-gray-900 py-4 px-4">
+      <ul class="flex flex-col gap-4">
+        <li v-for="item in navItems" :key="item.name">
+          <router-link 
+            :to="item.path" 
+            class="block text-white py-2 border-b border-gray-800 hover:text-blue-400 transition-colors duration-200"
+            @click="mobileMenuOpen = false"
+          >
+            {{ item.name }}
+          </router-link>
+        </li>
+        <li>
+          <router-link 
+            to="/contact" 
+            class="block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-center mt-2 transition-all duration-200"
+            @click="mobileMenuOpen = false"
+          >
+            Contact
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted } from 'vue'
+import feather from 'feather-icons'
+
+export default {
+  setup() {
+    const isScrolled = ref(false)
+    const mobileMenuOpen = ref(false)
+    const navItems = [
+      { name: 'Home', path: '/' },
+      { name: 'Services', path: '/services' },
+      { name: 'About', path: '/about' },
+      { name: 'Insights', path: '/insights' }
+    ]
+
+    const handleScroll = () => {
+      isScrolled.value = window.scrollY > 50
+    }
+
+    const toggleMobileMenu = () => {
+      mobileMenuOpen.value = !mobileMenuOpen.value
+    }
+
+    onMounted(() => {
+      window.addEventListener('scroll', handleScroll)
+      feather.replace()
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('scroll', handleScroll)
+    })
+
+    return {
+      isScrolled,
+      mobileMenuOpen,
+      navItems,
+      toggleMobileMenu
+    }
+  }
+}
+</script>
+
+<style scoped>
+.scrolled {
+  @apply bg-gray-900 py-2 shadow-md;
+}
+
+.nav-link {
+  @apply relative;
+}
+
+.nav-link::after {
+  content: '';
+  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-blue-500 transition-all duration-300;
+}
+
+.nav-link:hover::after {
+  @apply w-full;
+}
+
+.router-link-active::after {
+  @apply w-full;
+}
+</style>
+```

src/components/home/AboutSection.vue

@@ -0,0 +1,32 @@
+```vue
+<template>
+  <section class="py-20 bg-gray-100">
+    <div class="max-w-7xl mx-auto px-4">
+      <div class="flex flex-col md:flex-row items-center gap-12">
+        <div class="md:w-1/2">
+          <img 
+            src="http://static.photos/office/1024x576/22" 
+            alt="SolStrategies boardroom" 
+            class="rounded-lg shadow-xl w-full h-auto"
+          >
+        </div>
+        <div class="md:w-1/2">
+          <h2 class="text-3xl font-bold mb-6 font-serif">About SolStrategies</h2>
+          <p class="text-gray-700 mb-4 leading-relaxed">
+            SolStrategies Capital Shield is a premier global consultancy specializing in the intersection of strategic communications, capital deployment, and enterprise security. Founded in 2012 by former intelligence and financial professionals, we bring unparalleled expertise to complex challenges.
+          </p>
+          <p class="text-gray-700 mb-6 leading-relaxed">
+            Our multidisciplinary approach integrates cutting-edge security protocols with market-moving investment strategies and reputation management, serving Fortune 500 companies, governments, and high-net-worth individuals.
+          </p>
+          <router-link 
+            to="/about" 
+            class="inline-block bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-md font-medium transition duration-300"
+          >
+            Learn More
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+```

src/main.js

@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import './assets/style.css'
+import { createHead } from '@vueuse/head'
+import feather from 'feather-icons'
+
+const head = createHead()
+const app = createApp(App)
+
+app.use(router)
+app.use(head)
+app.mount('#app')
+
+feather.replace()

src/router/index.js

@@ -0,0 +1,44 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+import About from '../views/About.vue'
+import Services from '../views/Services.vue'
+import Insights from '../views/Insights.vue'
+import Contact from '../views/Contact.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: About
+  },
+  {
+    path: '/services',
+    name: 'Services',
+    component: Services
+  },
+  {
+    path: '/insights',
+    name: 'Insights',
+    component: Insights
+  },
+  {
+    path: '/contact',
+    name: 'Contact',
+    component: Contact
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+  scrollBehavior() {
+    return { top: 0 }
+  }
+})
+
+export default router

src/views/Home.vue

@@ -0,0 +1,102 @@
+```vue
+<template>
+  <main>
+    <!-- Hero Section -->
+    <section class="relative h-screen flex items-center justify-center text-center px-4 bg-gradient-to-b from-gray-900 to-gray-800 text-white">
+      <div class="absolute inset-0 bg-black opacity-50"></div>
+      <div class="relative z-10 max-w-4xl mx-auto">
+        <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">SolStrategies</h1>
+        <p class="text-xl md:text-2xl mb-8 leading-relaxed">
+          Headquartered in Singapore - Integrating strategic communications, capital intelligence, and security fortification for global enterprises
+        </p>
+        <div class="flex gap-4 justify-center">
+          <router-link 
+            to="/services" 
+            class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition duration-300"
+          >
+            Our Services
+          </router-link>
+          <router-link 
+            to="/contact" 
+            class="border-2 border-white hover:bg-white hover:text-gray-900 text-white px-8 py-3 rounded-md font-medium transition duration-300"
+          >
+            Contact Us
+          </router-link>
+        </div>
+      </div>
+    </section>
+
+    <!-- Trust Indicators -->
+    <section class="py-12 bg-white">
+      <div class="max-w-7xl mx-auto px-4">
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+          <div v-for="indicator in trustIndicators" :key="indicator.title" class="p-6">
+            <div class="text-blue-600 mb-4">
+              <i :data-feather="indicator.icon" class="w-12 h-12 mx-auto"></i>
+            </div>
+            <h3 class="text-xl font-bold mb-2">{{ indicator.title }}</h3>
+            <p class="text-gray-600">{{ indicator.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- About Section -->
+    <AboutSection />
+
+    <!-- Case Studies -->
+    <CaseStudies />
+
+    <!-- CTA Section -->
+    <CTASection />
+  </main>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue'
+import feather from 'feather-icons'
+import AboutSection from '@/components/home/AboutSection.vue'
+import CaseStudies from '@/components/home/CaseStudies.vue'
+import CTASection from '@/components/home/CTASection.vue'
+
+export default {
+  components: {
+    AboutSection,
+    CaseStudies,
+    CTASection
+  },
+  setup() {
+    const trustIndicators = ref([
+      {
+        icon: 'shield',
+        title: 'Enterprise Security',
+        description: 'Fortified solutions for digital and physical assets'
+      },
+      {
+        icon: 'trending-up',
+        title: 'Capital Growth',
+        description: 'Strategic investment opportunities with risk mitigation'
+      },
+      {
+        icon: 'globe',
+        title: 'Global PR',
+        description: 'Crisis management and reputation enhancement'
+      },
+      {
+        icon: 'lock',
+        title: 'Compliance',
+        description: 'Regulatory adherence across jurisdictions'
+      }
+    ])
+
+    onMounted(() => {
+      feather.replace()
+    })
+
+    return {
+      trustIndicators
+    }
+  }
+}
+</script>
+```