< ?php
session_start();
?>
<!DOCTYPE html>
< html id = "html-tag" lang = "en" class = "py-[0%] my-[0%]" >
< head class = "py-0 my-0 h-0" >
< meta charset = "UTF-8" >
< title > GLink - A Geo-Restricted Link Shortener< / title >
< link rel = "stylesheet" href = "output.css" >
< / head >
< body class = "w-full my-[0%] py-[0%] px-[10%] h-full bg-gray-300 dark:bg-black" >
< main class = "h-auto w-auto py-[5%]" >
<?php include 'header.php'; ?>
< div class = "hero py-16 h-auto bg-[#5EDC70] dark:bg-gray-800 dark:brightness-60 brightness-125 rounded-lg my-8 shadow-lg shadow-gray-800" >
< div class = "hero-content flex-col-reverse lg:flex-row-reverse" >
< div class = "relative items-center w-auto h-auto sm:w-full flex-grow-0 mt-8 lg:mt-0 justify-center mx-auto" >
< video autoplay muted class = "p-2 rounded-lg bg-yellow-500" >
< source src = "homepagevideo.mp4" type = "video/mp4" >
< / video >
< / div >
< div >
< h1 class = "text-5xl font-bold text-[#C21EC0] dark:text-[#BF991D] brightness-125 font-serif tracking-wider leading-tight pl-8" > Create and share geo-restricted links< / h1 >
< p class = "py-6 text-black dark:text-gray-300 pl-8 text-lg" > GLinkZip enables you to generate and distribute geo-restricted URLs for private, secure access.< / p >
< div class = "flex justify-center items-center" >
< a href = "<?php if(!isset($_SESSION['user'])) { echo(" signup . html " ) ; } else { echo ( " form . html " ) ; } ? > ">< button class = "btn btn-success text-black bg-[#C21EC0] border-[#5A1475] border-4 hover:bg-[#C21EC0] hover:border-[#C21EC0] hover:border-none hover:shadow-black/50 dark:bg-[#BF991D] dark:border-black dark:border-4 dark:hover:bg-[#C2B100] dark:hover:border-black dark:hover:border-none text-xl hover:shadow-lg dark:hover:shadow-[#C2B100]/50" > Get Started< / button > < / a >
< / div >
< / div >
< / div >
< / div >
<!-- New hero end -->
<!-- 3 column start -->
< div class = "flex lg:flex-col flex-col w-full mb-24 bg-[#761ffe] brightness-125 dark:brightness-60 dark:bg-gray-800 rounded-lg shadow-lg shadow-gray-800" >
< div class = "w-full my-12 justify-center items-center flex" >
< p class = "text-4xl md:text-5xl lg:text-6xl text-emerald-400 font-bold font-serif brightness-125" >
How it works
< / p >
< / div >
< div class = "flex lg:flex-row flex-col items-start h-auto w-auto mx-5 mb-5" >
< div class = "flex flex-col items-center h-full lg:w-1/3 w-full pt-0 px-4" >
< img src = "step1.png" alt = "pic2" class = "bg-black flex-grow m-5 w-full rounded" >
< h1 class = "text-5xl text-success" >
Step 1
< / h1 >
< p class = "py-6 text-gray-300" > Create the GLink. You can either create a regular shortened URL, or a geo-restricted one, in which case you can restrict it to a specific radius around your current location.< / p >
< / div >
< div class = "flex flex-col items-center h-full lg:w-1/3 w-full pt-0 px-4" >
< img src = "step2.png" alt = "pic2" class = "bg-black flex-grow m-5 w-full rounded" >
< h1 class = "text-5xl text-success" >
Step 2
< / h1 >
< p class = "py-6 text-gray-300" >
Distribute the GLink. If you created a regular link i.e. with no restrictions, then the service works similar to other link shorteners, like TinyURL or Bitly.
< / p >
< / div >
< div class = "flex flex-col items-center h-full lg:w-1/3 w-full pt-0 px-4 flex-grow flex-shrink-0" >
< img src = "step3.png" alt = "pic2" class = "bg-black flex-grow m-5 w-full rounded" >
< h1 class = "text-5xl text-success " >
Step 3
< / h1 >
< p class = "py-6 text-gray-300" >
If the link is geo-restricted, then anyone who accesses it will have to provide their location co-ordinates for authorization.
< / p >
< / div >
< / div >
< / div >
<!-- 3 column end -->
<!-- why start -->
< div class = "w-full flex bg-[#eab30e] flex-col justify-center rounded-lg shadow-lg shadow-gray-800" >
< div class = " h-auto mt-8 text-4xl md:text-5xl lg:text-6xl w-full pl-8" >
< h1 class = "font-serif font-bold underline" >
Why GLink?
< / h1 >
< / div >
< div class = "py-8 sm:flex-grow-0 flex pl-8 flex-wrap px-2" >
< p class = "text-2xl md:text-2xl lg:text-3xl fg-black" >
If you're looking to create a < b > shortened URL< / b > for a < u > signup form< / u > , an < u > event invitation< / u > , or < u > anything else< / u > , then this service is for you!
< / p >
< / div >
< / div >
<!-- Why end -->
< / main >
< / body >
< / html >
