Merge pull request #5 from KasarLabs/feat/more_plugins

docs(plugin): updated home page with better logos, texts and placement.
KasarLabs · Feb 12, 2025 · b5a2889 · b5a2889
2 parents cd7a3aa + 34e8c92
commit b5a2889
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 48 deletions.
diff --git a/public/plugins.gif b/public/plugins.gif
diff --git a/public/starknetbrand.png b/public/starknetbrand.png
diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
@@ -6,6 +6,11 @@ import Link from "next/link";
 import { Menu, X, Search } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { useSearch } from "../plugins/context/SearchContext";
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+});
 
 const Header = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -23,18 +28,32 @@ const Header = () => {
 
   return (
     <header className="w-full fixed top-0 z-50 ">
-      <nav className="h-20 px-4 bg-black/50 backdrop-blur-sm md:px-6">
+      <nav className="h-20 px-4 bg-black/100 md:bg-black/80 backdrop-blur-sm md:px-6">
         <div className="flex items-center justify-between h-full">
           {/* Logo */}
           <div className="flex items-center">
-            <Link href="/" className="flex items-center">
+            <Link href="/" className="flex items-center gap-3">
+              <Image
+                src="/starknetbrand.png"
+                alt="Logo"
+                width={200}
+                height={46}
+                className="hidden sm:block object-contain -mt-1	" // Negative margin top to move up
+              />
               <Image
-                src="https://kasar.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FkasarLogo.0513044c.png&w=640&q=75"
+                src="/starknet.png"
                 alt="Logo"
-                className="w-11 h-11 rounded-full"
                 width={44}
                 height={44}
+                className="block sm:hidden object-contain" // Hide on mobile, show on desktop
               />
+              <span className="hidden sm:block object-contain text-white hidden sm:flex items-center text-xl md:text-2xl gap-1">
+                <span
+                  className={`${inter.className} text-gray-200 font-medium`}
+                >
+                  Agent Kit
+                </span>
+              </span>
             </Link>
           </div>
 
@@ -88,7 +107,7 @@ const Header = () => {
 
         {/* Mobile Navigation */}
         {isMenuOpen && (
-          <div className="md:hidden absolute top-20 left-0 right-0 bg-black/50 backdrop-blur-sm border-b border-neutral-800 py-4 px-6 space-y-4">
+          <div className="md:hidden absolute top-20 left-0 right-0 bg-black/100 backdrop-blur-sm border-b border-neutral-800 py-4 px-6 space-y-4">
             <Link
               href="/plugins"
               className="block text-gray-300 hover:text-white font-medium text-lg hover:bg-black py-2 px-4 rounded-lg transition-all"

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,57 +1,40 @@
+"use client";
+
 import Terminal from "./components/Terminal";
-import { Github, Package, Twitter } from "lucide-react";
 import Image from "next/image";
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+});
 
 export default function Home() {
   return (
     <div className="min-h-screen bg-black text-white flex items-center justify-center p-4 py-24 md:py-4">
-      <div className="max-w-6xl w-full grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
+      <div className="max-w-7xl w-full grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
         {/* Left side - Title and Description */}
         <div className="text-center md:text-left">
           <div className="flex items-center gap-4 mb-6 justify-center md:justify-start">
-            <Image
-              src="/starknet.png"
-              alt="Starknet Logo"
-              width={48}
-              height={48}
-              className="object-contain sm:w-[62px] sm:h-[62px]"
-            />
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white">
-              Starknet Agent Kit
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-medium text-white/90">
+              <span className={`${inter.className} text-gray-100 font-light`}>
+                Build powerful and secure AI Agents on Starknet.
+              </span>
             </h1>
           </div>
-          <p className="text-lg sm:text-xl text-gray-300 mb-8 max-w-xl mx-auto md:mx-0">
-            A powerful and simple toolkit for creating AI agents that can
-            interact with the Starknet blockchain.
-          </p>
-          <div className="flex space-x-6 justify-center md:justify-start">
-            <a
-              href="https://github.com/kasarlabs/starknet-agent-kit"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-white hover:text-gray-300 transition-colors"
-              aria-label="GitHub Repository"
-            >
-              <Github size={28} className="sm:w-8 sm:h-8" />
-            </a>
-            <a
-              href="https://www.npmjs.com/package/starknet-agent-kit"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-white hover:text-gray-300 transition-colors"
-              aria-label="NPM Package"
-            >
-              <Package size={28} className="sm:w-8 sm:h-8" />
-            </a>
-            <a
-              href="https://twitter.com/kasarlabs"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-white hover:text-gray-300 transition-colors"
-              aria-label="Twitter Profile"
-            >
-              <Twitter size={28} className="sm:w-8 sm:h-8" />
-            </a>
+          <div className="flex flex-col space-y-8">
+            <div className="flex gap-2 items-center justify-center md:justify-start">
+              <p className="font-ppsans text-sm md:text-lg text-[#787B7E]">
+                powered by
+              </p>
+
+              <Image
+                src="https://github.com/KasarLabs/brand/blob/main/kasar/logo/KasarWhiteLogo.png?raw=true"
+                alt="Kasarlabs"
+                width={84}
+                height={0}
+                className="w-28"
+              />
+            </div>
           </div>
         </div>