sarlink/sarlink.net
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fresh site

Browse Source
This commit is contained in:
Shihaam Abdul Rahman 2024-12-09 01:34:03 +05:00
commit 0e5ac12480
Signed by: shihaam
GPG Key ID: 6DA2E87EBC227636
2 changed files with 162 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 313 KiB

162
index.html Normal file
View File

@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAR Link - High Speed Wireless Internet Service</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<style>
.bg-accent {
background-color: #ffa31a;
}
.text-accent {
color: #ffa31a;
}
.hover-accent:hover {
background-color: #e69318;
}
.bg-dark {
background-color: #292929;
}
.logo {
height: 50px;
width: auto;
}
</style>
</head>
<body class="bg-dark text-white">
<!-- Header -->
<header class="bg-gray-900 shadow-sm">
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="images/logo.png" alt="SAR Link Logo" class="logo mr-3">
<span class="text-gray-400 ml-2">by Baraveli Dev</span>
</div>
<a href="https://portal.sarlink.net" class="bg-accent text-white px-6 py-2 rounded-lg hover-accent transition-colors">
Go to Portal
</a>
</div>
</nav>
</header>
<!-- Hero Section -->
<div class="bg-accent text-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-4xl font-bold mb-4">High-Speed Wireless Internet for Faafu Dharanboodhoo</h1>
<p class="text-xl mb-6">Experience 100+ Mbps Unlimited Internet with Smart Features</p>
<div class="inline-block bg-white/10 rounded-lg p-4 backdrop-blur-sm">
<p class="text-lg">Currently serving 40% of the island with seamless roaming coverage</p>
<p class="text-sm mt-2">Expanding to cover 100% of populated areas by 2025</p>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<h2 class="text-3xl font-bold text-center mb-12">Smart Features for Modern Families</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-900 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold mb-4 text-accent">Wireless Freedom</h3>
<p class="text-gray-300">Stay connected anywhere within our coverage area with seamless roaming capabilities. Perfect for moving around the island.</p>
</div>
<div class="bg-gray-900 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold mb-4 text-accent">Parental Controls</h3>
<p class="text-gray-300">Set time limits for your children's devices and maintain healthy digital habits. Perfect for managing screen time and online activities.</p>
</div>
<div class="bg-gray-900 p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold mb-4 text-accent">Enhanced Security & Family Safety</h3>
<p class="text-gray-300">Built-in protection includes ad blocking, inappropriate content filtering, and malware protection for a safer online experience.</p>
</div>
</div>
</div>
<!-- Coverage Section -->
<div class="bg-gray-900 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Expanding Coverage</h2>
<p class="text-xl text-gray-300">Our wireless network is growing to serve you better</p>
</div>
<div class="bg-dark p-8 rounded-lg shadow-md">
<div class="grid md:grid-cols-2 gap-8">
<div class="text-center p-6 border border-accent rounded-lg">
<h3 class="text-2xl font-bold text-accent mb-2">Current Coverage</h3>
<p class="text-4xl font-bold mb-2">40%</p>
<p class="text-gray-400">of Faafu Dharanboodhoo</p>
</div>
<div class="text-center p-6 border border-accent rounded-lg">
<h3 class="text-2xl font-bold text-accent mb-2">2025 Target</h3>
<p class="text-4xl font-bold mb-2">100%</p>
<p class="text-gray-400">of populated areas</p>
</div>
</div>
</div>
</div>
</div>
<!-- Pricing Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<h2 class="text-3xl font-bold text-center mb-12">Simple, Flexible Pricing</h2>
<div class="grid md:grid-cols-3 lg:grid-cols-6 gap-4">
<div class="bg-dark p-6 rounded-lg shadow-md text-center">
<h3 class="font-semibold mb-2">1 Device</h3>
<p class="text-2xl font-bold text-accent mb-2">MVR 100</p>
<p class="text-gray-400">per month</p>
</div>
<div class="bg-dark p-6 rounded-lg shadow-md text-center">
<h3 class="font-semibold mb-2">2 Devices</h3>
<p class="text-2xl font-bold text-accent mb-2">MVR 175</p>
<p class="text-gray-400">per month</p>
</div>
<div class="bg-dark p-6 rounded-lg shadow-md text-center">
<h3 class="font-semibold mb-2">3 Devices</h3>
<p class="text-2xl font-bold text-accent mb-2">MVR 250</p>
<p class="text-gray-400">per month</p>
</div>
<div class="bg-dark p-6 rounded-lg shadow-md text-center">
<h3 class="font-semibold mb-2">4 Devices</h3>
<p class="text-2xl font-bold text-accent mb-2">MVR 325</p>
<p class="text-gray-400">per month</p>
</div>
<div class="bg-dark p-6 rounded-lg shadow-md text-center">
<h3 class="font-semibold mb-2">5 Devices</h3>
<p class="text-2xl font-bold text-accent mb-2">MVR 400</p>
<p class="text-gray-400">per month</p>
</div>
<div class="bg-dark p-6 rounded-lg shadow-md text-center">
<h3 class="font-semibold mb-2">6 Devices</h3>
<p class="text-2xl font-bold text-accent mb-2">MVR 475</p>
<p class="text-gray-400">per month</p>
</div>
</div>
</div>
<!-- Contact Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="text-center">
<h2 class="text-3xl font-bold mb-4">Need Support?</h2>
<p class="text-xl mb-4">We're here to help!</p>
<p class="text-2xl text-accent">Call: +960 9198026</p>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex md:justify-between">
<div class="mb-8 md:mb-0">
<h3 class="text-xl font-bold text-accent mb-2">SAR Link</h3>
<p class="text-gray-400">A Baraveli Dev Service</p>
<p class="text-gray-400">Serving Faafu Dharanboodhoo</p>
</div>
<div>
<p class="text-gray-400">100+ Satisfied Customers and Growing</p>
</div>
</div>
</div>
</footer>
</body>
</html>