feat: UI redesign

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Abhijeet Kumar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

client/src/Components/Footer.tsx

@@ -0,0 +1,49 @@
+import { FooterLogo } from '@/icons/FooterLogo'
+import Link from 'next/link'
+
+const Footer = () => {
+    return (
+        <footer className="flex flex-start md:flex-start w-full bg-[#ebebeb]">
+            <div className=" flex flex-col md:pr-10 lg:pr-40 items-left ps-5">
+                <FooterLogo className="w-full h-auto"/> 
+                <p className="text-[#7c91af] text-xl md:text-xl mb-4">© 2024 All rights reserved</p>
+            </div>
+            <div className="hidden md:flex text-lg  w-2/3  md:mt-10 leading-10 md:justify-end md:items-start md:gap-10 lg:gap-20">
+                <div>
+                    <div className="text-2xl text-[#7c91af]">Engagement</div>
+                    <Link href="/auth/signup">
+                        <div>QR Codes</div>
+                    </Link>
+                    <Link href="/auth/signup">
+                        <div>Dynamic Links</div>
+                    </Link>
+                    <Link href="/auth/signup">
+                        <div>Customised Laing Pages</div>
+                    </Link>
+                </div>
+                <div>
+                    <div className="text-2xl text-[#7c91af]">Analytics</div>
+                    <Link href="/auth/signup">
+                        <div>Link Analytics</div>
+                    </Link>
+                    <Link href="/auth/signup">
+                        <div>Geolocation Tracking</div>
+                    </Link>
+                </div>
+                <div>
+                    <div className="text-2xl text-[#7c91af]">About</div>
+                    <Link href="/about">
+                        <div>About this project</div>
+                    </Link>
+                    <div>Terms & Conditions</div>
+                    <div>Privacy Policy</div>
+                    <Link href="/contact">
+                        <div>Contact</div>
+                    </Link>
+                </div>
+            </div>
+        </footer>
+    )
+}
+
+export default Footer

client/src/Components/Navbar.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import {UrlLogo} from '@/icons/UrlLogo';
+import {Hamburger} from '@/icons/Hamburger';
+
+const Navbar = () => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return (
+    <nav className="flex w-full border-b-2 p-5 justify-between items-center">
+      <div className="flex items-center">
+        <Link href="/home">
+          <div className="imgCnt w-[60%] md:w-[90%]">
+            <UrlLogo  height="" width="" className="w-[60%] h-auto"/>
+          </div>
+        </Link>
+      </div>
+
+      {isClient && (
+        <>
+          <div className="hidden lg:flex lg:space-x-20 xxl:gap-10 justify-center items-center  text-lg flex-grow">
+            <Link href="/home">
+              <div className="relative inline-block before:block before:absolute before:w-full before:h-[2px] before:bottom-0 before:left-0 before:bg-current before:scale-x-0 before:origin-bottom-right before:transition-transform before:duration-300 hover:before:scale-x-100 hover:before:origin-bottom-left">Home</div>
+            </Link>
+            <Link href="">
+              <div className="relative inline-block before:block before:absolute before:w-full before:h-[2px] before:bottom-0 before:left-0 before:bg-current before:scale-x-0 before:origin-bottom-right before:transition-transform before:duration-300 hover:before:scale-x-100 hover:before:origin-bottom-left">Pricing</div>
+            </Link>
+            <Link href="/about">
+              <div className="relative inline-block before:block before:absolute before:w-full before:h-[2px] before:bottom-0 before:left-0 before:bg-current before:scale-x-0 before:origin-bottom-right before:transition-transform before:duration-300 hover:before:scale-x-100 hover:before:origin-bottom-left">About</div>
+            </Link>
+            <Link href="/contact">
+              <div className="relative inline-block before:block before:absolute before:w-full before:h-[2px] before:bottom-0 before:left-0 before:bg-current before:scale-x-0 before:origin-bottom-right before:transition-transform before:duration-300 hover:before:scale-x-100 hover:before:origin-bottom-left">Contact</div>
+            </Link>
+          </div>
+
+          <div className="hidden lg:flex space-x-4 items-center text-lg">
+            <Link href="/auth/login">
+              <div className="authOption px-4 py-2 text-blue-900 rounded-[20px] hover:bg-blue-900 hover:text-white">Sign in</div>
+            </Link>
+            <Link href="/auth/signup">
+              <div className="authOption bg-[#2C4E80] px-4 py-2 rounded-[20px] text-white">Sign Up</div>
+            </Link>
+          </div>
+
+          <div className='w-[10%] lg:hidden'>
+            <button className="flex justify-end items-center group lg:hidden">
+              <Hamburger className="w-[65%] h-auto"/>
+              <div className="w-screen pb-10 bg-white absolute -top-full group-focus:top-0 right-0 duration-150 flex flex-col space-y-3 justify-end">
+                <button className="px-10 py-8 relative ml-auto">
+                  <div className="w-6 h-1 rotate-45 absolute bg-black"></div>
+                  <div className="w-6 h-1 -rotate-45 absolute bg-black"></div>
+                </button>
+                <Link href="/home">
+                  <div className="flex justify-center w-full py-2 hover:bg-[#8d8888]">Home</div>
+                </Link>
+
+                <div className="flex justify-center w-full py-2 hover:bg-[#8d8888]">Pricing</div>
+
+                <Link href="/about">
+                  <div className="flex justify-center w-full py-2 hover:bg-[#8d8888]">About</div>
+                </Link>
+
+                <Link href="/contact">
+                  <div className="flex justify-center w-full py-2 hover:bg-[#8d8888]">Contact</div>
+                </Link>
+
+                <Link href="/auth/login">
+                  <div className="flex justify-center w-full py-2 hover:bg-[#8d8888]">Sign in</div>
+                </Link>
+
+                <Link href="/auth/signup">
+                <div className="flex justify-center w-max mx-auto p-[50px] py-2 hover:bg-[#8d8888] bg-[#2C4E80] rounded-[20px] text-white">Sign Up</div>
+                </Link>
+              </div>
+            </button>
+          </div>
+        </>
+      )}
+    </nav>
+  );
+};
+
+export default Navbar;

client/src/app/about/page.tsx

@@ -0,0 +1,80 @@
+import { About1 } from '@/icons/Person';
+import { About2 } from '@/icons/ColorfulRocket'
+import { About3 } from '@/icons/ThinkingGirl';
+import { About4 } from '@/icons/TeamWork';
+import { About5 } from '@/icons/Robot';
+
+
+const About = () => {
+    return (
+        <div>
+            <div className='flex flex-col md:flex-row w-full justify-center items-center'>
+                <div className=' md:flex md:justify-center'>
+                    <About1 className= "w-full h-auto"/>
+                </div>
+                <div className='w-3/4 p-[5vw]'>
+                    <p className='text-4xl md:text-6xl text-[#2C4E80] mb-3 md:mb-12'>About Us</p>
+                    <p className='text-lg md:text-2xl'>Welcome to Short.URL, an open-source URL shortener designed to provide fast, reliable, and customizable link shortening services. Whether you're sharing links on social media, in emails, or in chat messages, our service makes it easy to transform those lengthy URLs into sleek and manageable short links.</p>
+                </div>
+            </div>
+
+            <div className='flex flex-col-reverse md:flex-row w-full justify-center items-center'>
+                <div className='w-3/4 p-[5vw]'>
+                    <p className='text-4xl md:text-6xl text-[#2C4E80] mb-3 md:mb-12'>Our Mission</p>
+                    <p className='text-lg md:text-2xl'>Our mission is to provide a powerful yet easy-to-use tool that empowers users to take control of their links. We believe in the power of open source and the community-driven development process. By making [Project Name] open source, we invite developers from around the world to contribute, improve, and innovate, ensuring that our tool remains cutting-edge and accessible to everyone.</p>
+                </div>
+                <div className='md:flex md:justify-center'>
+                    <About2 className="w-full h-auto"/>
+                </div>
+            </div>
+
+            <div className='flex flex-col md:flex-row w-full justify-center items-center'>
+                <div className='w-[80%] md:w-1/4 flex justify-center items-center'>
+                    <div className='md:flex md:justify-center'>
+                        <About3 className="w-full h-auto"/>
+                    </div>
+                </div>
+                <div className='w-3/4 p-[5vw]'>
+                    <p className='text-4xl md:text-6xl text-[#2C4E80] mb-3 md:mb-12'>Why Choose Short.URL?</p>
+                    <ul style={{ listStyleType: 'disc' }} className='text-lg md:text-2xl md:ps-12'>
+                        <li className='ps-1 mb-3 md:p-3'>Open Source and Free: Our project is fully open source, which means it's free to use, and anyone can contribute to its development.</li>
+                        <li className='ps-1 mb-3 md:p-3'>Community-Driven: Join a vibrant community of developers and users who are dedicated to improving the project.</li>
+                        <li className='ps-1 mb-3 md:p-3'>Secure and Reliable: Built with security in mind, ensuring your data is protected.</li>
+                    </ul>
+                </div>
+            </div>
+
+            <div className=' flex flex-col-reverse md:flex-row w-full justify-center items-center'>
+                <div className='w-3/4 p-[4vw]'>
+                    <p className='text-4xl md:text-6xl text-[#2C4E80] mb-3 md:mb-12'>How It Works</p>
+                    <p className='text-lg md:text-2xl'>Using Short.URL is straightforward:</p>
+                    <ul style={{ listStyleType: 'disc' }} className='text-lg md:text-2xl md:ps-12'>
+                        <li className='p-1'>Enter Your URL: Paste your long URL into the input field on the homepage.</li>
+                        <li className='p-1'>Shorten: Click the "Shorten" button to generate your short link.</li>
+                        <li className='p-1'>Share: Copy and share your new short URL anywhere.</li>
+                    </ul>
+                </div>
+                <div className=' md:flex md:justify-center'>
+                    <About4 className="w-full h-auto"/>
+                </div>
+            </div>
+
+            <div className='flex flex-col md:flex-row w-full justify-center items-center'>
+                <div className='md:flex md:justify-center'>
+                    <About5 className="w-full h-auto"/>
+                </div>
+                <div className='w-3/4 p-[5vw]'>
+                    <p className='text-4xl md:text-6xl text-[#2C4E80] mb-3 md:mb-12'>Contribute  </p>
+                    <p className='text-lg md:text-2xl'>We welcome contributions from the community! Whether you're a seasoned developer or new to coding, there are many ways you can help:</p>
+                    <ul style={{ listStyleType: 'disc' }} className='text-lg md:text-2xl md:ps-12'>
+                        <li className='p-2'>Report Bugs: Found a bug? Let us know by opening an issue on our GitHub.</li>
+                        <li className='p-2'>Submit Pull Requests: If you've made improvements or added new features, submit a pull request.</li>
+                        <li className='p-2'>Spread the Word: Share Short.URL with your network to help us grow our community.</li>
+                    </ul>
+                </div>
+            </div>
+        </div>  
+    )
+}
+
+export default About;

client/src/app/auth/login/page.tsx

@@ -1,5 +1,5 @@
-"use client";
-import React, { useState } from "react";
+"use client"
+import { useState } from "react";
 import Link from "next/link";
 import { GoogleIcon } from "@/icons/GoogleIcon";
 
@@ -44,8 +44,8 @@ const LoginPage = () => {
 
   return (
     <div>
-      <div className="relative h-dvh mt-4 bg-gray-100 flex flex-col justify-start py-4 sm:px-6 lg:px-8">
-        <div className="sm:mx-auto sm:w-full sm:max-w-md">
+      <div className="relative h-dvh bg-gray-100 flex flex-col justify-start py-4 sm:px-6 lg:px-8">
+        <div className="sm:mx-auto mt-4 sm:w-full sm:max-w-md">
           <h2 className="mt-2 text-center md:text-3xl text-xl font-extrabold text-gray-900">
             Welcome back
           </h2>

client/src/app/auth/signup/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import { useState } from "react";
 import Link from "next/link";
 
 type FormValues = {
@@ -71,8 +71,8 @@ const SignUpPage = () => {
   };
 
   return (
-    <div className="relative h-dvh mt-4 bg-gray-100 flex flex-col justify-start py-4 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+    <div className="relative h-dvh bg-gray-100 flex flex-col justify-start py-4 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full mt-4 sm:max-w-md">
         <h2 className="mt-2 text-center md:text-3xl text-xl font-extrabold text-gray-900">
           Sign up for an account
         </h2>

client/src/app/contact/page.tsx

@@ -0,0 +1,39 @@
+import {ContactImg} from '@/icons/ContactImg';
+
+const Contact = () => {
+    return (
+        <div className="flex flex-col  w-full md:flex-row">
+            <div className="flex md:flex-row flex-col-reverse md:w-screen">
+                <div className="md:w-2/3 p-5 md:p-10 leading-7 md:leading-10">
+                    <p className="text-4xl md:text-6xl text-[#2e4e82] mb-3">Let&apos;s Connect</p>
+                    <p className='text-lg'>We are an open source project, our community of developers is here to help you</p>
+                    <div>
+                        <input type="text" className="w-full h-[4%] mt-5 p-5 border-2 border-[#2e4e82] rounded-[20px]" placeholder="Email Address" />
+
+                        <div className='flex gap-3'>
+                            <input type="text" className="w-full h-[4%] border-2 p-5 rounded-[20px] mt-5 border-[#2e4e82]" placeholder='First Name' />
+                            <input type="text" className="w-full h-[4%] border-2 p-5 rounded-[20px] mt-5 border-[#2e4e82]" placeholder='Last Name' />
+                        </div>
+
+                        <textarea name="message" id="message" placeholder='What do you want to tabl about...' className='w-full border-2 p-5 rounded-[20px] mt-5 border-[#2e4e82] h-[30%]'></textarea>
+                    </div>
+                    <div className='flex gap-2'>
+                        <button type="submit" className='w-full text-white p-5 rounded-[20px] h-[4%] bg-[#2e4e82] border-2 text-2xl'>
+                            Let&apos;s chat
+                        </button>
+                        <div className='w-full md:p-5 p-2 text-[#2e4e82] h-[4%] text-lg'>
+                            Raise an issue on GitHub
+                        </div>
+                    </div>
+
+
+                </div>
+
+                <div className="md:w-5/12 pt-10 md:p-0 flex justify-center items-center">
+                    <ContactImg className="w-full h-auto"/>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default Contact;

client/src/app/globals.css

@@ -2,26 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
-.light {
-  --background: 245, 245, 245;
-  --nt: 245, 245, 245;
-  --inv: 0, 0, 0;
-  --ninv: 245, 245, 245;
-  --tog: 156, 163, 175;
-  --togb: 229, 231, 235;
-  --notf: 75, 85, 99;
 
-  background: rgba(var(--background));
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
 }
 
-.dark {
-  --background: 15, 23, 42;
-  --nt: 30, 41, 59;
-  --inv: 245, 245, 245;
-  --ninv: 0, 0, 0;
-  --tog: 29, 78, 216;
-  --togb: 55, 65, 81;
-  --notf: 0, 0, 0;
 
-  background: rgba(var(--background));
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
 }