Merge pull request #21 from ivalshamkya/feat/footer

feat(footer): adding footer to landing page

src/app/page.tsx

@@ -5,16 +5,17 @@ import Image from 'next/image'
 import { IoLogoGithub } from 'react-icons/io'
 import { motion } from 'framer-motion'
 import Link from 'next/link'
+import Footer from '@/components/Footer'
 
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center">
-      <div className='relative flex flex-col justify-center items-center w-full min-h-screen square-pattern bg-gradient-to-br from-green-500 to-red-300 p-20 md:p-24'>
+      <div className='relative flex flex-col justify-center items-center w-full min-h-screen square-pattern bg-gradient-to-br from-green-500 to-red-300 p-10 md:p-24'>
         <div className='w-full max-w-2xl grid place-items-center gap-5'>
           <div className="relative">
-            <h1 className='text-lg md:text-6xl text-center text-white font-black bg-[#4b42ff] py-2 px-5 shadow-[7px_7px_0px_0px_rgba(0,0,0,1)]'>Neo-Brutalism UI</h1>
+            <h1 className='text-2xl md:text-6xl text-center text-white font-black bg-[#4b42ff] py-2 px-5 shadow-[7px_7px_0px_0px_rgba(0,0,0,1)]'>Neo-Brutalism UI</h1>
           </div>
-          <p className='text-sm md:text-lg text-center tracking-tighter'>
+          <p className='font-medium text-sm md:text-lg text-center tracking-tighter'>
             Discover bold and raw aesthetics components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
           </p>
           <div className='flex flex-wrap justify-center gap-2.5 md:gap-5'>
@@ -59,6 +60,7 @@ export default function Home() {
           </div>
         </motion.div>
       </div>
+      <Footer></Footer>
     </main>
   )
 }

src/components/Footer.tsx

@@ -0,0 +1,29 @@
+export default function Footer() {
+    return (
+        <footer className="bg-[#121212] w-full py-6 md:px-8 md:py-0">
+            <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+                <p className="font-thin text-white text-balance text-center text-sm leading-loose md:text-left">
+                    Built by{" "}
+                    <a
+                        href="https://github.com/ivalshamkya"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="underline underline-offset-4"
+                    >
+                        Ival Shamkya
+                    </a>
+                    . The source code is available on{" "}
+                    <a
+                        href="https://github.com/ivalshamkya/neobruu"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="underline underline-offset-4"
+                    >
+                        GitHub
+                    </a>
+                    .
+                </p>
+            </div>
+        </footer>
+    );
+}

src/components/MobileSidebar.tsx

@@ -47,7 +47,7 @@ export default function MobileSidebar() {
                                 {item.name}
                             </span>
                             {item.isNew && (
-                                <Badge text='New' rounded='md' variant='secondary' />
+                                <Badge text='New' rounded='md' variant='green' />
                             )}
                         </Link>
                     ))}

src/components/Navbar.tsx

@@ -7,7 +7,7 @@ import MobileSidebar from "@/components/MobileSidebar";
 
 function Navbar() {
   return (
-    <nav className="fixed left-0 top-0 z-10 mx-auto flex h-16 md:h-20 w-full items-center border-b border-black bg-white px-3 md:px-5 dark:bg-zinc-900">
+    <nav className="fixed left-0 top-0 z-10 mx-auto flex h-16 md:h-20 w-full items-center border-b border-black bg-white px-3 md:px-12 dark:bg-zinc-900">
       <div className="mx-auto flex w-full max-w-full items-center justify-between">
         <div className="flex gap-3 items-center">
           <div className="block md:hidden">

src/components/SearchBar.tsx

@@ -6,9 +6,7 @@ import { CgClose, CgSearch } from 'react-icons/cg';
 import { MdAdd, MdKeyboardCommandKey } from "react-icons/md";
 import { RxComponent1 } from "react-icons/rx";
 
-type SearchBarProps = {};
-
-export default function SearchBar({ }: SearchBarProps) {
+export default function SearchBar() {
   const [isSearchBarOpen, setIsSearchBarOpen] = useState(false);
   const [searchValue, setSearchValue] = useState<string>('');
   const [searchResults, setSearchResults] = useState<typeof components>([]);
@@ -17,7 +15,6 @@ export default function SearchBar({ }: SearchBarProps) {
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
-        setSearchResults(components);
         setIsSearchBarOpen((prev) => !prev);
       }
     };
@@ -32,6 +29,7 @@ export default function SearchBar({ }: SearchBarProps) {
   useEffect(() => {
     if (isSearchBarOpen && inputRef.current) {
       inputRef.current.focus();
+      setSearchResults(components);
     }
   }, [isSearchBarOpen]);
 
@@ -56,16 +54,16 @@ export default function SearchBar({ }: SearchBarProps) {
     <div className="relative">
       <button
         onClick={() => setIsSearchBarOpen(true)}
-        className="flex items-center gap-2 rounded-md border border-black p-[5px] md:p-[10px] text-zinc-700 text-sm shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] outline-none transition-all focus:translate-x-[3px] focus:translate-y-[3px] focus:shadow-none"
+        className="flex items-center gap-2 md:gap-10 rounded-md border border-black p-[5px] md:p-[10px] text-zinc-700 text-sm shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] outline-none transition-all focus:translate-x-[3px] focus:translate-y-[3px] focus:shadow-none"
       >
         Search doc...
-        <span className='flex items-center md:gap-0.5 bg-zinc-200 p-0.5 md:p-1 rounded text-xs text-primary'>
+        <span className='flex items-center gap-0.5 md:gap-1 bg-zinc-200 p-0.5 md:p-1 rounded text-xs text-primary'>
           <MdKeyboardCommandKey /> <MdAdd /> K
         </span>
       </button>
       {isSearchBarOpen && (
-        <div className='fixed top-0 left-0 w-screen h-screen bg-black/50 z-50 grid place-items-center'>
-          <div className="max-w-xl w-full bg-white border border-primary rounded-lg shadow-md dark:bg-zinc-900">
+        <div className='fixed top-0 left-0 w-screen h-screen bg-black/80 z-50 grid place-items-center'>
+          <div className="max-w-[345px] md:max-w-xl w-full bg-white border-2 border-primary rounded-lg shadow-md dark:bg-zinc-900">
             <div className='relative w-full h-fit flex items-center rounded-lg overflow-hidden'>
               <CgSearch className="text-lg text-zinc-500 absolute left-2 top-1/4" />
               <input

src/components/Sidebar.tsx

@@ -31,7 +31,7 @@ export default function Sidebar() {
           {item.name} 
           </span>
           {item.isNew && (
-            <Badge text='New' rounded='md' variant='secondary' />
+            <Badge text='New' rounded='md' variant='green' />
           )}
         </Link>
       ))}