index page matrix design
parent
11eb64b5e5
commit
cbb4a92899
|
|
@ -19,5 +19,6 @@
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.3",
|
||||||
"tailwind-merge": "^3.0.2",
|
"tailwind-merge": "^3.0.2",
|
||||||
"tailwindcss": "^3.4.17"
|
"tailwindcss": "^3.4.17"
|
||||||
}
|
},
|
||||||
|
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,23 +12,28 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
||||||
description={pageDescription}
|
description={pageDescription}
|
||||||
image={pageImage}
|
image={pageImage}
|
||||||
>
|
>
|
||||||
<section class="py-16 sm:py-20 px-6" aria-labelledby="hero-heading">
|
<!-- Canvas background animation -->
|
||||||
|
<div class="fixed inset-0 z-0 opacity-20 pointer-events-none">
|
||||||
|
<canvas id="matrix-animation" class="w-full h-full"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="py-16 sm:py-20 px-6 relative z-10" aria-labelledby="hero-heading">
|
||||||
<div class="container mx-auto text-center">
|
<div class="container mx-auto text-center">
|
||||||
<h1 id="hero-heading" class="text-4xl sm:text-5xl font-bold mb-4 sm:mb-6 text-[#6d9e37]">SiliconPin</h1>
|
<h1 id="hero-heading" class="text-4xl sm:text-5xl font-bold mb-4 sm:mb-6 text-[#6d9e37] glow-text">SiliconPin</h1>
|
||||||
<p class="text-xl sm:text-2xl mb-8 sm:mb-10 max-w-3xl mx-auto text-neutral-300">
|
<p class="text-xl sm:text-2xl mb-8 sm:mb-10 max-w-3xl mx-auto text-neutral-300">
|
||||||
High-performance hosting solutions for modern applications
|
High-performance hosting solutions for modern applications
|
||||||
</p>
|
</p>
|
||||||
<div class="flex gap-4 justify-center flex-wrap">
|
<div class="flex gap-4 justify-center flex-wrap">
|
||||||
<a
|
<a
|
||||||
href="/get-started"
|
href="/get-started"
|
||||||
class="inline-flex items-center justify-center rounded-md bg-[#6d9e37] px-6 py-3 text-base font-medium text-white hover:bg-[#598035] transition-colors"
|
class="inline-flex items-center justify-center rounded-md bg-[#6d9e37] px-6 py-3 text-base font-medium text-white hover:bg-[#598035] transition-colors hover:shadow-glow"
|
||||||
rel="prefetch"
|
rel="prefetch"
|
||||||
>
|
>
|
||||||
Get Started
|
Get Started
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="/services"
|
href="/services"
|
||||||
class="inline-flex items-center justify-center rounded-md border border-[#6d9e37] px-6 py-3 text-base font-medium text-[#6d9e37] hover:bg-[#6d9e37] hover:text-white transition-colors"
|
class="inline-flex items-center justify-center rounded-md border border-[#6d9e37] px-6 py-3 text-base font-medium text-[#6d9e37] hover:bg-[#6d9e37] hover:text-white transition-colors hover:shadow-glow"
|
||||||
rel="prefetch"
|
rel="prefetch"
|
||||||
>
|
>
|
||||||
Explore Our Services
|
Explore Our Services
|
||||||
|
|
@ -44,17 +49,17 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="bg-neutral-800 py-16 sm:py-20 px-6" aria-labelledby="features-heading">
|
<section class="bg-neutral-800/70 backdrop-blur-sm py-16 sm:py-20 px-6 relative z-10" aria-labelledby="features-heading">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<div class="text-center mb-10 sm:mb-12">
|
<div class="text-center mb-10 sm:mb-12">
|
||||||
<h2 id="features-heading" class="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4 text-white">Why Choose SiliconPin?</h2>
|
<h2 id="features-heading" class="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4 text-white glow-text">Why Choose SiliconPin?</h2>
|
||||||
<p class="text-lg sm:text-xl max-w-3xl mx-auto text-neutral-300">
|
<p class="text-lg sm:text-xl max-w-3xl mx-auto text-neutral-300">
|
||||||
We provide reliable and scalable hosting solutions for businesses of all sizes
|
We provide reliable and scalable hosting solutions for businesses of all sizes
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
|
||||||
<article class="bg-neutral-700/30 p-6 rounded-lg border border-neutral-700">
|
<article class="bg-neutral-700/30 p-6 rounded-lg border border-neutral-700 backdrop-blur-sm hover:border-[#6d9e37] transition-all hover:transform hover:scale-105">
|
||||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-[#6d9e37] text-white mb-4">
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-[#6d9e37] text-white mb-4">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -62,7 +67,7 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
||||||
<p class="text-neutral-300">Our infrastructure is designed for high availability and optimal performance with 99.9% uptime guarantee.</p>
|
<p class="text-neutral-300">Our infrastructure is designed for high availability and optimal performance with 99.9% uptime guarantee.</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="bg-neutral-700/30 p-6 rounded-lg border border-neutral-700">
|
<article class="bg-neutral-700/30 p-6 rounded-lg border border-neutral-700 backdrop-blur-sm hover:border-[#6d9e37] transition-all hover:transform hover:scale-105">
|
||||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-[#6d9e37] text-white mb-4">
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-[#6d9e37] text-white mb-4">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -70,7 +75,7 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
||||||
<p class="text-neutral-300">Enterprise-grade security measures with automated backups, SSL certificates, and DDoS protection.</p>
|
<p class="text-neutral-300">Enterprise-grade security measures with automated backups, SSL certificates, and DDoS protection.</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="bg-neutral-700/30 p-6 rounded-lg border border-neutral-700">
|
<article class="bg-neutral-700/30 p-6 rounded-lg border border-neutral-700 backdrop-blur-sm hover:border-[#6d9e37] transition-all hover:transform hover:scale-105">
|
||||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-[#6d9e37] text-white mb-4">
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-[#6d9e37] text-white mb-4">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -79,22 +84,151 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center mt-10 sm:mt-12">
|
<div class="mt-10 sm:mt-12 text-center">
|
||||||
<a
|
<a href="/services"
|
||||||
href="/services"
|
class="inline-flex items-center justify-center gap-2 rounded-md bg-neutral-800 border border-neutral-700 px-6 py-3 text-base font-medium text-neutral-300 hover:bg-neutral-700 hover:border-neutral-600 transition-colors hover:text-white group relative overflow-hidden"
|
||||||
class="inline-flex items-center justify-center rounded-md bg-[#6d9e37] px-6 py-3 text-base font-medium text-white hover:bg-[#598035] transition-colors"
|
rel="prefetch">
|
||||||
rel="prefetch"
|
<span class="absolute inset-0 w-3 bg-gradient-to-r from-[#6d9e37] to-[#92e736] transition-all duration-700 ease-in-out group-hover:w-full opacity-30"></span>
|
||||||
>
|
<span class="relative">More All Services </span>
|
||||||
View All Services
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="relative">
|
||||||
|
<path d="M5 12h14"></path>
|
||||||
|
<path d="m12 5 7 7-7 7"></path>
|
||||||
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- When NOT to Choose SiliconPin Section -->
|
||||||
|
<section class="py-16 sm:py-20 px-6 relative z-10" aria-labelledby="not-for-you-heading">
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<div class="text-center mb-10 sm:mb-12">
|
||||||
|
<h2 id="not-for-you-heading" class="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4 text-white glow-text">When Not to Choose SiliconPin</h2>
|
||||||
|
<p class="text-lg sm:text-xl max-w-3xl mx-auto text-neutral-300">
|
||||||
|
We believe in transparency. Here are situations where we might not be the best fit for your needs
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
|
||||||
|
<!-- Card 1 -->
|
||||||
|
<article class="bg-neutral-800/70 p-6 rounded-lg border-l-4 border-l-red-500 border-t border-r border-b border-neutral-700 backdrop-blur-sm hover:shadow-lg transition-all">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-red-500/20 text-red-400 mr-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-medium mb-3 text-white">Closed Source Dependency</h3>
|
||||||
|
<ul class="space-y-2 text-neutral-300">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-red-500/20 text-red-400 mr-2 flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</span>
|
||||||
|
<span>Proprietary software dependencies</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-red-500/20 text-red-400 mr-2 flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</span>
|
||||||
|
<span>Closed-source tool requirements</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-red-500/20 text-red-400 mr-2 flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</span>
|
||||||
|
<span>Non-transparent service integrations</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Card 2 -->
|
||||||
|
<article class="bg-neutral-800/70 p-6 rounded-lg border-l-4 border-l-amber-500 border-t border-r border-b border-neutral-700 backdrop-blur-sm hover:shadow-lg transition-all">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-amber-500/20 text-amber-400 mr-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-medium mb-3 text-white">Specific Technology Stack</h3>
|
||||||
|
<ul class="space-y-2 text-neutral-300">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-amber-500/20 text-amber-400 mr-2 flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</span>
|
||||||
|
<span>CUDA-dependent applications</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-amber-500/20 text-amber-400 mr-2 flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</span>
|
||||||
|
<span>MATLAB-based workloads</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-amber-500/20 text-amber-400 mr-2 flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</span>
|
||||||
|
<span>C# and .NET Framework projects</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Card 3 -->
|
||||||
|
<article class="bg-neutral-800/70 p-6 rounded-lg border-l-4 border-l-blue-500 border-t border-r border-b border-neutral-700 backdrop-blur-sm hover:shadow-lg transition-all">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-blue-500/20 text-blue-400 mr-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2"></path><path d="M10.5 5.5L18 5.5L18 13"></path><path d="M10.5 13L18 5.5"></path></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-medium mb-3 text-white">Java-Centric Applications</h3>
|
||||||
|
<ul class="space-y-2 text-neutral-300">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-blue-500/20 text-blue-400 mr-2 flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</span>
|
||||||
|
<span>Traditional Java EE applications</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-blue-500/20 text-blue-400 mr-2 flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</span>
|
||||||
|
<span>Legacy Java frameworks</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-blue-500/20 text-blue-400 mr-2 flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</span>
|
||||||
|
<span>Non-Kotlin JVM applications</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<!-- More Use Cases Button -->
|
||||||
|
<div class="mt-10 sm:mt-12 text-center">
|
||||||
|
<a
|
||||||
|
href="/use-cases"
|
||||||
|
class="inline-flex items-center justify-center gap-2 rounded-md bg-neutral-800 border border-neutral-700 px-6 py-3 text-base font-medium text-neutral-300 hover:bg-neutral-700 hover:border-neutral-600 transition-colors hover:text-white group relative overflow-hidden"
|
||||||
|
rel="prefetch"
|
||||||
|
>
|
||||||
|
<span class="absolute inset-0 w-3 bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-700 ease-in-out group-hover:w-full opacity-30"></span>
|
||||||
|
<span class="relative">More Use Cases</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="relative">
|
||||||
|
<path d="M5 12h14"></path>
|
||||||
|
<path d="m12 5 7 7-7 7"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Contact CTA Section with improved mobile responsiveness -->
|
<!-- Contact CTA Section with improved mobile responsiveness -->
|
||||||
<section class="py-16 sm:py-20 px-6" aria-labelledby="cta-heading">
|
<section class="py-16 sm:py-20 px-6 relative z-10" aria-labelledby="cta-heading">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<div class="bg-neutral-800 rounded-lg p-6 sm:p-8 lg:p-10 border border-neutral-700 relative overflow-hidden">
|
<div class="bg-neutral-800/80 backdrop-blur-sm rounded-lg p-6 sm:p-8 lg:p-10 border border-neutral-700 relative overflow-hidden hover:border-[#6d9e37] transition-all">
|
||||||
<!-- Decorative background element -->
|
<!-- Decorative background element -->
|
||||||
<div class="absolute inset-0 opacity-10" aria-hidden="true">
|
<div class="absolute inset-0 opacity-10" aria-hidden="true">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
|
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||||
|
|
@ -112,7 +246,7 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
||||||
<div class="relative z-10 flex flex-col lg:flex-row lg:justify-between lg:items-center">
|
<div class="relative z-10 flex flex-col lg:flex-row lg:justify-between lg:items-center">
|
||||||
<!-- Text content - full width on mobile, partial on desktop -->
|
<!-- Text content - full width on mobile, partial on desktop -->
|
||||||
<div class="mb-8 lg:mb-0 lg:max-w-xl">
|
<div class="mb-8 lg:mb-0 lg:max-w-xl">
|
||||||
<h2 id="cta-heading" class="text-2xl sm:text-3xl font-bold text-white mb-3 sm:mb-4">Ready to Get Started?</h2>
|
<h2 id="cta-heading" class="text-2xl sm:text-3xl font-bold text-white mb-3 sm:mb-4 glow-text">Ready to Get Started?</h2>
|
||||||
<p class="text-base sm:text-lg text-neutral-300">
|
<p class="text-base sm:text-lg text-neutral-300">
|
||||||
Contact our team today to discuss your hosting needs and find the perfect solution for your business.
|
Contact our team today to discuss your hosting needs and find the perfect solution for your business.
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -122,14 +256,14 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
||||||
<div class="flex flex-col sm:flex-row gap-4 w-full lg:w-auto">
|
<div class="flex flex-col sm:flex-row gap-4 w-full lg:w-auto">
|
||||||
<a
|
<a
|
||||||
href="/get-started"
|
href="/get-started"
|
||||||
class="inline-flex items-center justify-center rounded-md bg-[#6d9e37] px-6 py-3 text-base font-medium text-white hover:bg-[#598035] transition-colors w-full sm:w-auto"
|
class="inline-flex items-center justify-center rounded-md bg-[#6d9e37] px-6 py-3 text-base font-medium text-white hover:bg-[#598035] transition-colors hover:shadow-glow w-full sm:w-auto"
|
||||||
rel="prefetch"
|
rel="prefetch"
|
||||||
>
|
>
|
||||||
Get Started
|
Get Started
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="/contact"
|
href="/contact"
|
||||||
class="inline-flex items-center justify-center rounded-md border border-[#6d9e37] px-6 py-3 text-base font-medium text-[#6d9e37] hover:bg-[#6d9e37] hover:text-white transition-colors w-full sm:w-auto"
|
class="inline-flex items-center justify-center rounded-md border border-[#6d9e37] px-6 py-3 text-base font-medium text-[#6d9e37] hover:bg-[#6d9e37] hover:text-white transition-colors hover:shadow-glow w-full sm:w-auto"
|
||||||
rel="prefetch"
|
rel="prefetch"
|
||||||
>
|
>
|
||||||
Contact Us
|
Contact Us
|
||||||
|
|
@ -139,4 +273,93 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Script for the matrix animation -->
|
||||||
|
<script>
|
||||||
|
// Set up the canvas when the DOM loads
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const canvas = document.getElementById('matrix-animation');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
// Set canvas dimensions to match the viewport
|
||||||
|
function resizeCanvas() {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeCanvas();
|
||||||
|
window.addEventListener('resize', resizeCanvas);
|
||||||
|
|
||||||
|
// Characters to display
|
||||||
|
const chars = "SILICONPIN HOSTINNG";
|
||||||
|
const charSize = 14;
|
||||||
|
const columns = canvas.width / charSize;
|
||||||
|
|
||||||
|
// Array to track the y position of each column
|
||||||
|
const drops = [];
|
||||||
|
for (let i = 0; i < columns; i++) {
|
||||||
|
drops[i] = Math.random() * -100;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw function
|
||||||
|
function draw() {
|
||||||
|
// Semi-transparent black to create trail effect
|
||||||
|
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Set text color
|
||||||
|
ctx.fillStyle = "#6d9e37";
|
||||||
|
ctx.font = `${charSize}px monospace`;
|
||||||
|
|
||||||
|
// Draw characters
|
||||||
|
for (let i = 0; i < drops.length; i++) {
|
||||||
|
// Random character
|
||||||
|
const text = chars.charAt(Math.floor(Math.random() * chars.length));
|
||||||
|
|
||||||
|
// x coordinate of the character
|
||||||
|
const x = i * charSize;
|
||||||
|
|
||||||
|
// y coordinate of the character
|
||||||
|
const y = drops[i] * charSize;
|
||||||
|
|
||||||
|
// Draw the character
|
||||||
|
ctx.fillText(text, x, y);
|
||||||
|
|
||||||
|
// Move the drop down after drawing
|
||||||
|
drops[i]++;
|
||||||
|
|
||||||
|
// Randomly reset a column when it's past the screen
|
||||||
|
if (drops[i] * charSize > canvas.height && Math.random() > 0.975) {
|
||||||
|
drops[i] = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Run the animation
|
||||||
|
setInterval(draw, 35);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- CSS for glow effects -->
|
||||||
|
<style>
|
||||||
|
.glow-text {
|
||||||
|
text-shadow: 0 0 10px rgba(109, 158, 55, 0.5), 0 0 20px rgba(109, 158, 55, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:shadow-glow:hover {
|
||||||
|
box-shadow: 0 0 15px rgba(109, 158, 55, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add subtle animations */
|
||||||
|
@keyframes pulse {
|
||||||
|
0% { transform: scale(1); }
|
||||||
|
50% { transform: scale(1.02); }
|
||||||
|
100% { transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apply subtle animations to headings */
|
||||||
|
h1, h2 {
|
||||||
|
animation: pulse 5s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</Layout>
|
</Layout>
|
||||||
Loading…
Reference in New Issue