ui changes

Author: esosaoh

frontend/src/app/components/Banner.tsx

@@ -0,0 +1,33 @@
+"use client";
+import { motion } from "framer-motion";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+
+export default function Banner() {
+  const router = useRouter();
+
+  const redirectToHome = () => {
+    router.push("/");
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="fixed top-0 left-0 right-0 bg-gray-800/50 backdrop-blur-md p-4 flex items-center justify-center cursor-pointer hover:bg-gray-800/70 transition-colors"
+      onClick={redirectToHome}
+    >
+      <div className="flex items-center space-x-2">
+        <Image
+          src="/branch.svg"
+          alt="GitMentor Logo"
+          width={24}
+          height={24}
+          className="h-6 w-6"
+        />
+        <span className="text-lg font-semibold text-blue-400">gitmentor.co</span>
+      </div>
+    </motion.div>
+  );
+}

frontend/src/app/components/Header.tsx

@@ -2,7 +2,8 @@
 import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import { ArrowRight, Star } from "lucide-react"; // Import icons
+import { ArrowRight, Star } from "lucide-react";
+import Banner from "./components/Banner";
 
 export default function Home() {
   const [isMounted, setIsMounted] = useState(false);
@@ -15,7 +16,7 @@ export default function Home() {
   if (!isMounted) return null;
 
   const redirectToGitHub = () => {
-    window.location.href = "https://github.com/esosaoh/gitmentor";
+    window.open("https://github.com/esosaoh/gitmentor", "_blank");
   };
 
   const redirectToSearchPage = () => {
@@ -24,7 +25,7 @@ export default function Home() {
 
   return (
     <div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center">
-      {/* Content */}
+      <Banner />
       <motion.h1
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
@@ -39,31 +40,27 @@ export default function Home() {
         transition={{ duration: 0.8, delay: 0.2 }}
         className="text-lg text-blue-400/80 mb-8 text-center max-w-lg"
       >
-        Effortlessly contribute to open source repositories with AI-driven guidance.
+        Get started with contributing to open source effortlessly.
       </motion.p>
-
-      {/* Start Contributing Button */}
       <motion.button
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.8, delay: 0.4 }}
         whileHover={{ scale: 1.05 }}
         whileTap={{ scale: 0.95 }}
-        className="flex items-center justify-center px-6 py-3 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition-colors"
+        className="flex items-center justify-center px-6 py-3 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition-colors cursor-pointer"
         onClick={redirectToSearchPage}
       >
         Start Contributing
         <ArrowRight className="ml-2 h-5 w-5" />
       </motion.button>
-
-      {/* Star Us on GitHub Button */}
       <motion.button
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.8, delay: 0.6 }}
         whileHover={{ scale: 1.05 }}
         whileTap={{ scale: 0.95 }}
-        className="fixed bottom-8 flex items-center justify-center px-6 py-3 bg-gray-700 text-white rounded-lg shadow-lg hover:bg-gray-800 transition-colors"
+        className="fixed bottom-8 flex items-center justify-center px-6 py-3 bg-gray-700 text-white rounded-lg shadow-lg hover:bg-gray-800 transition-colors cursor-pointer"
         onClick={redirectToGitHub}
       >
         Star Us on GitHub