<!DOCTYPE html>
< html lang = "en" class = "bg-white" >
< head >
< meta charset = "UTF-8" >
< title > Home< / title >
< link rel = "stylesheet" href = "output.css" >
< / head >
< body class = "mx-[10%] bg-white" >
< main class = "m-10 h-auto w-auto dark:bg-white" >
<?php include 'header.php'; ?>
< div class = "flex lg:flex-row flex-col w-full mb-24 justify-center items-center" >
< div class = "h-96 lg:w-auto sm:w-full flex flex-col flex-grow" >
< div class = "w-full flex items-center justify-center mb-6 border-8 border-black" >
< h1 class = "text-4xl md:text-5xl lg:text-6xl" > Create and share geo-restricted links< / h1 >
< / div >
< div class = "h-72 w-full flex items-center justify-center text-2xl border-8 border-black" >
< p >
GLinkZip enables you to generate and distribute geo-restricted shortened URLs for private, secure access.
< / p >
< / div >
< / div >
< video autoplay >
< source src = "homepagevideo.mp4" type = "video/mp4" >
< / video >
< / div >
< div class = "flex lg:flex-col h-auto flex-col w-full mb-24 border-8 border-black" >
< div class = "w-full justify-center items-center flex border-8 border-black" >
< p class = "text-4xl md:text-5xl lg:text-6xl" >
How it works
< / p >
< / div >
< div class = "flex lg:flex-row flex-col justify-between items-center h-auto w-auto mx-5 mb-5" >
< div class = "flex flex-col items-center h-full lg:w-1/3 w-full" >
< img src = "step1.png" alt = "Picture of link creation" class = "bg-black flex-grow m-5 w-full rounded" >
< p class = "text-xl" >
Step 1
< / p >
< p class = "text-xl" >
Create the GLink. You can either create a regular link, or a geo-restricted one.
< / p >
< / div >
< div class = "flex flex-col items-center h-full lg:w-1/3 w-full" >
< img src = "step2.png" alt = "Picture of link distribution" class = "bg-black flex-grow m-5 w-full rounded" >
< p class = "text-xl" >
Step 2
< / p >
< p class = "text-xl" >
Distribute the GLink. If you created a regular link, then no additional configuration is needed.
< / p >
< / div >
< div class = "flex flex-col items-center h-full lg:w-1/3 w-full" >
< img src = "step3.png" alt = "Picture of link access (authorized and unauthorized)" class = "bg-black flex-grow m-5 w-full rounded" >
< p class = "text-xl" >
Step 3
< / p >
< p class = "text-xl" >
If the link is geo-restricted, then location co-ordinates will be used to determine access.
< / p >
< / div >
< / div >
< / div >
< div class = "w-full border-8 border-black flex flex-col items-center justify-center" >
< div class = "border-4 border-black w-auto h-auto mt-8 text-4xl md:text-5xl lg:text-6xl flex flex-wrap" >
Why?
< / div >
< div class = "border-4 border-black h-auto mt-4 lg:mx-8 max-w-md sm:flex-grow-0 mb-4 " >
< p class = "text-lg md:text-xl lg:text-2xl" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab delectus dolor, dolorem dolorum et facilis, illum ipsam, natus nobis nulla quam repellat saepe! Aperiam doloremque harum laudantium repellendus tempora!
< / p >
< / div >
< / div >
< / main >
< / body >
< / html >
