Merge pull request #12 from Tamanna225/Feature/LandingPage

Added Home Page Containing basic Setup of the Landing Page and User Page welcoming the entered User
vansh-codes · Oct 7, 2024 · efe0773 · efe0773
2 parents 257200a + eddb803
commit efe0773
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 10 deletions.
diff --git a/components/Home.jsx b/components/Home.jsx
@@ -0,0 +1,84 @@
+'use client';
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+function Home() {
+    const [username, setUsername] = useState("");
+    const router = useRouter();
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (username.trim()) {
+          router.push(`/${username.trim()}`);
+        }
+      };
+
+    return (
+      <>
+        <div className="flex flex-col justify-between min-h-screen">
+          {/* Header */}
+          <header className="p-4 flex flex-row items-center">
+            <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9.35003 16.88C9.35003 16.95 9.28003 17 9.18003 17C9.08003 17 9.00003 17 9.00003 16.88C9.00003 16.76 9.08003 16.76 9.17003 16.76C9.26003 16.76 9.35003 16.81 9.35003 16.88ZM8.35003 16.73C8.35003 16.8 8.35003 16.88 8.49003 16.9C8.52584 16.9172 8.56701 16.9195 8.6045 16.9064C8.642 16.8933 8.67275 16.8658 8.69003 16.83C8.69003 16.76 8.69003 16.69 8.55003 16.66C8.41003 16.63 8.37003 16.66 8.35003 16.73ZM9.77003 16.68C9.68003 16.68 9.62003 16.76 9.63003 16.84C9.64003 16.92 9.72003 16.95 9.82003 16.93C9.92003 16.91 9.97003 16.84 9.96003 16.77C9.95003 16.7 9.87003 16.67 9.77003 16.68ZM11.9 4.00002C10.8454 3.99009 9.79962 4.19333 8.82547 4.59754C7.85132 5.00175 6.96887 5.5986 6.23107 6.35227C5.49328 7.10594 4.91535 8.0009 4.53197 8.98343C4.14859 9.96597 3.96765 11.0158 4.00003 12.07C3.97211 13.7969 4.48426 15.4894 5.46493 16.9111C6.4456 18.3328 7.84582 19.4127 9.47003 20C9.88003 20.07 10.03 19.81 10.03 19.6C10.03 19.39 10.03 18.26 10.03 17.6C10.03 17.6 7.77003 18.1 7.29003 16.6C7.29003 16.6 6.93003 15.6 6.40003 15.39C6.40003 15.39 5.66003 14.87 6.45003 14.88C6.70877 14.9149 6.95573 15.01 7.17108 15.1576C7.38643 15.3052 7.56417 15.5013 7.69003 15.73C7.79466 15.9351 7.9401 16.1167 8.11742 16.2635C8.29473 16.4104 8.50019 16.5195 8.72118 16.5841C8.94218 16.6487 9.17404 16.6675 9.40255 16.6393C9.63106 16.6111 9.85139 16.5364 10.05 16.42C10.0879 16.0025 10.2679 15.6107 10.56 15.31C8.76003 15.1 6.94003 14.84 6.94003 11.65C6.92091 11.2896 6.97881 10.9293 7.10985 10.5931C7.2409 10.2569 7.44209 9.95241 7.70003 9.70002C7.45667 8.96799 7.48507 8.17282 7.78003 7.46002C8.46003 7.24002 10.01 8.35002 10.01 8.35002C11.3342 7.97655 12.7359 7.97655 14.06 8.35002C14.06 8.35002 15.61 7.24002 16.29 7.46002C16.5914 8.17142 16.6198 8.96894 16.37 9.70002C16.6371 9.94893 16.8489 10.2511 16.9919 10.587C17.1348 10.9229 17.2057 11.285 17.2 11.65C17.2 14.85 15.3 15.1 13.5 15.31C13.6809 15.5129 13.8186 15.7506 13.9046 16.0085C13.9905 16.2664 14.023 16.5391 14 16.81C14 17.93 14 19.31 14 19.58C13.9994 19.6475 14.015 19.7142 14.0456 19.7744C14.0763 19.8346 14.1209 19.8866 14.1759 19.9258C14.2308 19.9651 14.2945 19.9905 14.3613 19.9999C14.4282 20.0094 14.4964 20.0025 14.56 19.98C16.1813 19.3978 17.5786 18.321 18.5547 16.9017C19.5309 15.4824 20.0364 13.7922 20 12.07C20.0094 11.0051 19.8061 9.94902 19.402 8.96371C18.9979 7.9784 18.4011 7.08369 17.6467 6.33205C16.8923 5.58041 15.9953 4.98696 15.0085 4.58651C14.0217 4.18606 12.9649 3.98667 11.9 4.00002ZM7.14003 15.41C7.14003 15.41 7.14003 15.52 7.14003 15.58C7.15118 15.5912 7.16442 15.6001 7.17901 15.6061C7.1936 15.6122 7.20923 15.6153 7.22503 15.6153C7.24082 15.6153 7.25646 15.6122 7.27105 15.6061C7.28563 15.6001 7.29888 15.5912 7.31003 15.58C7.31003 15.58 7.31003 15.47 7.31003 15.4C7.31003 15.33 7.18003 15.37 7.14003 15.41ZM6.79003 15.14C6.79003 15.14 6.79003 15.24 6.86003 15.27C6.86846 15.2805 6.87913 15.2889 6.89124 15.2947C6.90335 15.3004 6.91661 15.3035 6.93003 15.3035C6.94345 15.3035 6.9567 15.3004 6.96881 15.2947C6.98093 15.2889 6.99159 15.2805 7.00003 15.27C7.00003 15.27 7.00003 15.17 6.93003 15.14C6.86003 15.11 6.81003 15.11 6.79003 15.14ZM7.79003 16.32C7.79003 16.32 7.79003 16.46 7.79003 16.53C7.79003 16.6 7.96003 16.61 8.00003 16.53C8.04003 16.45 8.00003 16.39 8.00003 16.32C8.00003 16.25 7.87003 16.27 7.83003 16.32H7.79003ZM7.42003 15.83C7.42003 15.83 7.42003 15.95 7.42003 16.03C7.42003 16.11 7.56003 16.14 7.61003 16.11C7.63535 16.0809 7.6493 16.0436 7.6493 16.005C7.6493 15.9664 7.63535 15.9291 7.61003 15.9C7.56003 15.82 7.48003 15.79 7.42003 15.83Z" fill="#fff"/>
+            </svg>
+            <h1 className="text-xl font-bold text-white">Gityzer</h1>
+          </header>
+
+          {/* Main Content */}
+          <main className="flex flex-col justify-center items-center flex-grow">
+            <h1 className="text-4xl font-light text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 tracking-widest mb-8">
+              Let's, Begin...
+            </h1>
+            <form className="flex items-center w-1/3 h-1/3" onSubmit={handleSubmit}>
+              <div className="flex items-center bg-white rounded-full shadow-md p-2 w-full">
+                {/* GitHub Logo inside search bar */}
+                <div className="px-3">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-6 w-6 text-gray-600"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                  >
+                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387.6.113.82-.258.82-.577v-2.172c-3.338.726-4.042-1.416-4.042-1.416-.546-1.387-1.333-1.757-1.333-1.757-1.089-.744.083-.729.083-.729 1.205.084 1.838 1.238 1.838 1.238 1.07 1.834 2.807 1.304 3.492.997.108-.775.418-1.304.762-1.604-2.665-.305-5.467-1.332-5.467-5.93 0-1.31.469-2.381 1.236-3.221-.123-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.399 3-.405 1.02.006 2.043.139 3 .405 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.241 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.61-2.807 5.624-5.479 5.921.43.371.823 1.102.823 2.222v3.293c0 .322.218.694.825.576 4.765-1.588 8.199-6.084 8.199-11.385 0-6.627-5.373-12-12-12z"/>
+                  </svg>
+                </div>
+
+                {/* Search input */}
+                <input
+                  type="text"
+                  placeholder=""
+                  className="w-full px-4 py-2 text-gray-700 bg-white focus:outline-none rounded-full"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                />
+
+                {/* Submit button */}
+                <button
+                  type="submit"
+                  className="bg-purple-500 text-white p-3 rounded-full hover:bg-purple-600 focus:outline-none flex items-center justify-center"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+              </div>
+            </form>
+          </main>
+          {/* Footer */}
+          <footer className="p-4 text-center text-gray-600">
+            Open source ❤️ | <a href="https://github.com/vansh-codes/Gityzer" target="_blank" rel="noreferrer noopener">Gityzer</a>
+          </footer>
+        </div>
+      </>
+    );
+  }
+
+  export default Home;
+
diff --git a/public/github-filled.svg b/public/github-filled.svg
diff --git a/src/app/[username]/page.jsx b/src/app/[username]/page.jsx
@@ -0,0 +1,21 @@
+'use client';
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+function UserPage({ params }) {
+  const { username } = params;
+
+  useEffect(() => {
+    // Perform some action based on the username
+    console.log("Username from URL:", username);
+    // You can fetch data or handle other tasks here using the username
+  }, [username]);
+
+  return (
+    <div className="flex justify-center items-center h-screen">
+      <h1 className="text-2xl font-bold">Welcome, {username}!</h1>
+    </div>
+  );
+}
+
+export default UserPage;
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -11,17 +11,29 @@
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
+    --background-gradient: linear-gradient(
+      145deg,      
+      #021a42 0%,     
+      #012c41 15%,          
+      #013855 30%,     
+      #022f49 45%,   
+      #011c48 55%,       
+      #021d47 65%,      
+      #0b023b 80%,            
+      #3a1336 100%            
+  );
+
   }
 }
 
 body {
   color: var(--foreground);
-  background: var(--background);
+  background: var(--background-gradient);
   font-family: Arial, Helvetica, sans-serif;
 }
 
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
-}
+}
diff --git a/src/app/page.jsx b/src/app/page.jsx
@@ -1,10 +1,7 @@
-export default function Home() {
+import Home from "../../components/Home";
+
+export default function Page() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <h1 className="text-6xl text-center">GITYZER</h1>
-        <p className="text-center -ml-4 ">Take UI inspiration from <a className="text-center text-blue-500 cursor-pointer hover:underline" href="https://socialify.git.ci/">GitHub Socialify</a></p>
-      </main>
-    </div>
+    <Home />
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,7 @@
 module.exports = {
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   darkMode: 'class',