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

light theme

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

72
index.html
View File

@ -15,23 +15,23 @@
.hover-accent:hover {
background-color: #e69318;
}
.bg-dark {
background-color: #292929;
}
.logo {
height: 50px;
width: auto;
}
</style>
</head>
<body class="bg-dark text-white">
<body class="bg-white text-gray-800">
<!-- Header -->
<header class="bg-gray-900 shadow-sm">
<header class="bg-white 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 class="flex flex-col items-center">
<img src="images/logo.png" alt="SAR Link Logo" class="logo">
<span class="font-semibold mt-1">SAR Link</span>
<span class="text-gray-500 text-sm">by Baraveli Dev</span>
</div>
</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
@ -58,40 +58,38 @@
<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">
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">
<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>
<p class="text-gray-600">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">
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">
<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>
<p class="text-gray-600">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">
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">
<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>
<p class="text-gray-600">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="bg-gray-50 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>
<p class="text-xl text-gray-600">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">
<div class="text-center p-6 bg-white rounded-lg shadow-md border border-accent">
<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>
<p class="text-gray-600">of Faafu Dharanboodhoo</p>
</div>
<div class="text-center p-6 border border-accent rounded-lg">
<div class="text-center p-6 bg-white rounded-lg shadow-md border border-accent">
<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>
<p class="text-gray-600">of populated areas</p>
</div>
</div>
</div>
@ -101,35 +99,35 @@
<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">
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 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>
<p class="text-gray-600">per month</p>
</div>
<div class="bg-dark p-6 rounded-lg shadow-md text-center">
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 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>
<p class="text-gray-600">per month</p>
</div>
<div class="bg-dark p-6 rounded-lg shadow-md text-center">
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 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>
<p class="text-gray-600">per month</p>
</div>
<div class="bg-dark p-6 rounded-lg shadow-md text-center">
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 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>
<p class="text-gray-600">per month</p>
</div>
<div class="bg-dark p-6 rounded-lg shadow-md text-center">
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 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>
<p class="text-gray-600">per month</p>
</div>
<div class="bg-dark p-6 rounded-lg shadow-md text-center">
<div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 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>
<p class="text-gray-600">per month</p>
</div>
</div>
</div>
@ -144,16 +142,16 @@
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<footer class="bg-gray-50 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>
<p class="text-gray-600">A Baraveli Dev Service</p>
<p class="text-gray-600">Serving Faafu Dharanboodhoo</p>
</div>
<div>
<p class="text-gray-400">100+ Satisfied Customers and Growing</p>
<p class="text-gray-600">100+ Satisfied Customers and Growing</p>
</div>
</div>
</div>