File size: 3,080 Bytes
4de3816 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 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>
``` |