From ccbb5f465ba50b854f5a7ef104a7d833a1d7478c Mon Sep 17 00:00:00 2001 From: Tamanna Date: Mon, 7 Oct 2024 22:13:15 +0530 Subject: [PATCH] Added Home Page Conataining basic Setup of the Landing Page --- Components/Home.jsx | 84 +++++++++++++++++++++++++++++++++++++ public/github-filled.svg | 4 ++ src/app/[username]/page.jsx | 21 ++++++++++ src/app/globals.css | 16 ++++++- src/app/page.jsx | 9 ++-- tailwind.config.js | 2 +- 6 files changed, 130 insertions(+), 6 deletions(-) create mode 100644 Components/Home.jsx create mode 100644 public/github-filled.svg create mode 100644 src/app/[username]/page.jsx diff --git a/Components/Home.jsx b/Components/Home.jsx new file mode 100644 index 0000000..04724f7 --- /dev/null +++ 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 ( + <> +
+ {/* Header */} +
+ + + +

Gityzer

+
+ + {/* Main Content */} +
+

+ Let's, Begin... +

+
+
+ {/* GitHub Logo inside search bar */} +
+ + + +
+ + {/* Search input */} + setUsername(e.target.value)} + /> + + {/* Submit button */} + +
+
+
+ {/* Footer */} + +
+ + ); + } + + export default Home; + \ No newline at end of file diff --git a/public/github-filled.svg b/public/github-filled.svg new file mode 100644 index 0000000..9d42581 --- /dev/null +++ b/public/github-filled.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/[username]/page.jsx b/src/app/[username]/page.jsx new file mode 100644 index 0000000..16667db --- /dev/null +++ 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 ( +
+

Welcome, {username}!

+
+ ); +} + +export default UserPage; \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index 13d40b8..d061749 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -11,12 +11,24 @@ :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; } @@ -24,4 +36,4 @@ body { .text-balance { text-wrap: balance; } -} +} \ No newline at end of file diff --git a/src/app/page.jsx b/src/app/page.jsx index a8d6edd..eec5000 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -1,10 +1,13 @@ -export default function Home() { +import Home from "../../components/Home"; + +export default function Page() { return ( -
+ +/*

GITYZER

Take UI inspiration from GitHub Socialify

-
+
*/ ); } diff --git a/tailwind.config.js b/tailwind.config.js index b60c60e..5d7920c 100644 --- 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',