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

84
index.html
View File

@ -15,23 +15,23 @@
.hover-accent:hover { .hover-accent:hover {
background-color: #e69318; background-color: #e69318;
} }
.bg-dark {
background-color: #292929;
}
.logo { .logo {
height: 50px; height: 50px;
width: auto; width: auto;
} }
</style> </style>
</head> </head>
<body class="bg-dark text-white"> <body class="bg-white text-gray-800">
<!-- Header --> <!-- 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"> <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 justify-between items-center">
<div class="flex items-center"> <div class="flex items-center">
<img src="images/logo.png" alt="SAR Link Logo" class="logo mr-3"> <div class="flex flex-col items-center">
<span class="text-gray-400 ml-2">by Baraveli Dev</span> <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> </div>
<a href="https://portal.sarlink.net" class="bg-accent text-white px-6 py-2 rounded-lg hover-accent transition-colors"> <a href="https://portal.sarlink.net" class="bg-accent text-white px-6 py-2 rounded-lg hover-accent transition-colors">
Go to Portal Go to Portal
@ -58,40 +58,38 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> <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> <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="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> <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>
<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> <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>
<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> <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> </div>
</div> </div>
<!-- Coverage Section --> <!-- 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12"> <div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Expanding Coverage</h2> <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>
<div class="bg-dark p-8 rounded-lg shadow-md"> <div class="grid md:grid-cols-2 gap-8">
<div class="grid md:grid-cols-2 gap-8"> <div class="text-center p-6 bg-white rounded-lg shadow-md border border-accent">
<div class="text-center p-6 border border-accent rounded-lg"> <h3 class="text-2xl font-bold text-accent mb-2">Current Coverage</h3>
<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-4xl font-bold mb-2">40%</p> <p class="text-gray-600">of Faafu Dharanboodhoo</p>
<p class="text-gray-400">of Faafu Dharanboodhoo</p> </div>
</div> <div class="text-center p-6 bg-white rounded-lg shadow-md border border-accent">
<div class="text-center p-6 border border-accent rounded-lg"> <h3 class="text-2xl font-bold text-accent mb-2">2025 Target</h3>
<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-4xl font-bold mb-2">100%</p> <p class="text-gray-600">of populated areas</p>
<p class="text-gray-400">of populated areas</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -101,35 +99,35 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> <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> <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="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> <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-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>
<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> <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-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>
<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> <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-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>
<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> <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-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>
<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> <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-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>
<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> <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-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> </div>
</div> </div>
@ -144,16 +142,16 @@
</div> </div>
<!-- Footer --> <!-- 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex md:justify-between"> <div class="md:flex md:justify-between">
<div class="mb-8 md:mb-0"> <div class="mb-8 md:mb-0">
<h3 class="text-xl font-bold text-accent mb-2">SAR Link</h3> <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-600">A Baraveli Dev Service</p>
<p class="text-gray-400">Serving Faafu Dharanboodhoo</p> <p class="text-gray-600">Serving Faafu Dharanboodhoo</p>
</div> </div>
<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> </div>
</div> </div>