init
This commit is contained in:
142
src/pages/index.astro
Normal file
142
src/pages/index.astro
Normal file
@@ -0,0 +1,142 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
// Page-specific SEO metadata
|
||||
const pageTitle = "SiliconPin - High-Performance Hosting Solutions";
|
||||
const pageDescription = "SiliconPin offers reliable, high-performance hosting solutions for PHP, Node.js, Python, Kubernetes (K8s), and K3s with 24/7 technical support.";
|
||||
const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=80&w=2000&auto=format&fit=crop";
|
||||
---
|
||||
|
||||
<Layout
|
||||
title={pageTitle}
|
||||
description={pageDescription}
|
||||
image={pageImage}
|
||||
>
|
||||
<section class="py-16 sm:py-20 px-6" aria-labelledby="hero-heading">
|
||||
<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>
|
||||
<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
|
||||
</p>
|
||||
<div class="flex gap-4 justify-center flex-wrap">
|
||||
<a
|
||||
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"
|
||||
rel="prefetch"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
<a
|
||||
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"
|
||||
rel="prefetch"
|
||||
>
|
||||
Explore Our Services
|
||||
</a>
|
||||
<a
|
||||
href="/contact"
|
||||
class="inline-flex items-center justify-center rounded-md border border-neutral-600 px-6 py-3 text-base font-medium text-neutral-300 hover:bg-neutral-700 hover:border-neutral-500 transition-colors"
|
||||
rel="prefetch"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-neutral-800 py-16 sm:py-20 px-6" aria-labelledby="features-heading">
|
||||
<div class="container mx-auto">
|
||||
<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>
|
||||
<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
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
<h3 class="text-xl font-medium mb-2 text-white">Reliable Performance</h3>
|
||||
<p class="text-neutral-300">Our infrastructure is designed for high availability and optimal performance with 99.9% uptime guarantee.</p>
|
||||
</article>
|
||||
|
||||
<article class="bg-neutral-700/30 p-6 rounded-lg border border-neutral-700">
|
||||
<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>
|
||||
</div>
|
||||
<h3 class="text-xl font-medium mb-2 text-white">Advanced Security</h3>
|
||||
<p class="text-neutral-300">Enterprise-grade security measures with automated backups, SSL certificates, and DDoS protection.</p>
|
||||
</article>
|
||||
|
||||
<article class="bg-neutral-700/30 p-6 rounded-lg border border-neutral-700">
|
||||
<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>
|
||||
</div>
|
||||
<h3 class="text-xl font-medium mb-2 text-white">24/7 Support</h3>
|
||||
<p class="text-neutral-300">Our expert team is always ready to help with any technical questions with average response time under 30 minutes.</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-10 sm:mt-12">
|
||||
<a
|
||||
href="/services"
|
||||
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"
|
||||
>
|
||||
View All Services
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact CTA Section with improved mobile responsiveness -->
|
||||
<section class="py-16 sm:py-20 px-6" aria-labelledby="cta-heading">
|
||||
<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">
|
||||
<!-- Decorative background element -->
|
||||
<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">
|
||||
<path d="M0,0 L100,0 L100,100 L0,100 Z" fill="url(#grad)" />
|
||||
</svg>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#6d9e37" />
|
||||
<stop offset="100%" stop-color="#2b323b" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</div>
|
||||
|
||||
<!-- Two-column layout that stacks on mobile -->
|
||||
<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 -->
|
||||
<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>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Buttons - stacked on mobile, side-by-side on tablet -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 w-full lg:w-auto">
|
||||
<a
|
||||
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"
|
||||
rel="prefetch"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
<a
|
||||
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"
|
||||
rel="prefetch"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user