Implementation of the Navbar and Herosection(Website)

dapp/src/app/view-listed-asset/component/FilterBar.tsx

@@ -0,0 +1,16 @@
+export default function FilterBar() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <p>filter:</p>
+      <div className="flex gap-1">
+        <button className="bg-[#080A1F] w-[89px] h-[32px] px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white "> 8%  ✖</button>
+        <button className="bg-[#080A1F] w-[89px] h-[32px] px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white">30days  </button>
+        <button className="bg-[#080A1F] w-[89px] h-[32px] px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white">USDC</button>
+      </div>
+      <div className="ml-auto flex gap-2">
+        <button className="bg-[#191919] px-3 py-1 rounded text-white text-sm">📊 Grid</button>
+        <button className="bg-[#0D0D0D] px-3 py-1 rounded text-white text-sm">📋 List</button>
+      </div>
+    </div>
+  );
+}

dapp/src/app/view-listed-asset/component/ListingInfo.tsx

@@ -0,0 +1,70 @@
+import Image from "next/image";
+import Punk from "@/assets/punk.png";
+import Net from "@/assets/net.png";
+import Reload from "@/assets/reload.png";
+import Angle from "@/assets/angle.png";
+
+export default function ListingInfo() {
+  return (
+    <div className="bg-[#1a1a2e] rounded-xl p-4 w-full md:flex-1 text-white font-sans flex flex-col">
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="text-sm font-semibold">Listing Information</h3>
+        <div className="flex gap-2">
+          <Image src={Net} alt="network" width={22} height={22} />
+          <Image src={Angle} alt="angle" width={22} height={22} />
+          <Image src={Reload} alt="reload" width={22} height={22} />
+        </div>
+      </div>
+
+      <div className="relative w-full aspect-[4/3] overflow-hidden rounded-lg mb-4">
+        <Image
+          src={Punk}
+          alt="CryptoPunk"
+          fill
+          className="object-cover rounded-lg"
+        />
+        <div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/80 to-transparent p-4 flex justify-between items-end">
+          <div>
+            <h2 className="text-base font-semibold">Cryptopunk #1232</h2>
+            <p className="text-sm text-gray-300">Cryptopunk VQ (STRK)</p>
+          </div>
+          <span className="bg-[#182A32] text-[#42CC7E] text-xs px-3 py-1 rounded-full">
+            Listed
+          </span>
+        </div>
+      </div>
+
+      <div className="bg-[#1c1c2b] p-3 rounded-lg text-sm space-y-2">
+        <div className="flex justify-between">
+          <span className="text-gray-400">Currency</span>
+          <span className="text-white">All</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-400">Acceptable Amount</span>
+          <span className="font-medium">0.001 STRK</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-400">Loan Duration</span>
+          <span className="font-medium">14 days</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-400">APR</span>
+          <span className="font-medium">8%</span>
+        </div>
+      </div>
+
+      <p className="text-center text-gray-400 text-xs mt-3">
+        You can unlist your item at any time.
+      </p>
+
+      <div className="flex gap-2 mt-4">
+        <button className="flex-1 bg-[#343456] hover:bg-red-600 transition-all px-4 py-2 rounded-lg text-sm border border-[#8358FF] text-[#8358FF]">
+          Remove Listing
+        </button>
+        <button className="flex-1 bg-[#8a4dff] hover:bg-purple-700 transition-all px-4 py-2 rounded-lg text-sm text-white">
+          Update Listing
+        </button>
+      </div>
+    </div>
+  );
+}

dapp/src/app/view-listed-asset/component/LoanRow.tsx

@@ -0,0 +1,17 @@
+export default function LoanRow() {
+  return (
+    <tr className="border-b border-gray-700 hover:bg-[#2a2a3d] transition">
+      <td className="py-2 px-4">2,856.41</td>
+      <td className="py-2 px-4">0D673a4...2</td>
+      <td className="py-2 px-4">1.17%</td>
+      <td className="py-2 px-4">14.19%</td>
+      <td className="py-2 px-4">30 days</td>
+      <td className="py-2 px-4">2,891.75</td>
+      <td className="py-2 px-4">
+        <button className="bg-[#8b5cf6] hover:bg-[#7c3aed] text-white px-4 py-1 rounded-full text-xs font-medium">
+          Accept
+        </button>
+      </td>
+    </tr>
+  );
+}

dapp/src/app/view-listed-asset/component/LoanTable.tsx

@@ -0,0 +1,33 @@
+import FilterBar from './FilterBar';
+import LoanRow from './LoanRow';
+
+export default function LoanTable() {
+  return (
+    <div className="bg-[#1a1a2e] rounded-xl px-10 py-12 w-full md:flex-1 h-full flex flex-col">
+      <FilterBar />
+      <div className="overflow-x-auto mt-6 flex-1">
+        <table className="min-w-full text-sm text-left text-white">
+          <thead className="text-gray-400 border-b border-gray-600">
+            <tr className="uppercase text-xs">
+              <th className="py-8 px-4">Loan value</th>
+              <th className="py-8 px-4">Lender</th>
+              <th className="py-8 px-4">Interest</th>
+              <th className="py-8 px-4">APR</th>
+              <th className="py-8 px-4">Duration</th>
+              <th className="py-8 px-4">Repayment</th>
+              <th className="py-8 px-4">Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {[...Array(6)].map((_, i) => (
+              <LoanRow key={i} />
+            ))}
+          </tbody>
+        </table>
+        <div className="text-center text-gray-500 text-xs mt-6">
+          Showing 1 to 6 of 13 items
+        </div>
+      </div>
+    </div>
+  );
+}

dapp/src/app/view-listed-asset/page.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ListingInfo from './component/ListingInfo';
+import LoanTable from './component/LoanTable';
+
+const Page = () => {
+  return (
+    <div className="min-h-screen bg-[#0f0f20] text-white font-sans p-6">
+      <button className="text-[#6c63ff] text-sm font-medium mb-6 hover:underline">
+        {'<'} Go Back
+      </button>
+
+      <div className="flex flex-col lg:flex-row gap-6">
+          <ListingInfo />
+
+        <div className="w-full lg:w-2/3 bg-[#1a1a2e] rounded-2xl p-5 shadow-lg">
+          <LoanTable />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;

website/src/app/components/hero.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import Image from "next/image";
+import Monkey from "../../../public/images/Monkey.png";
+
+export default function Hero() {
+  return (
+    <div className="bg-[#080a1f] h-screen flex items-center justify-center relative overflow-hidden">
+      {/* Add these gradient elements */}
+      <div className="absolute bottom-1 left-1 w-72 h-72 bg-blue-700 rounded-full mix-blend-screen filter blur-[80px] opacity-20"></div>
+      <div className="absolute top-60 right-10 w-[40rem] h-[40rem] bg-blue-400 rounded-full mix-blend-screen filter blur-[80px] opacity-20"></div>
+      <div className="px-4 sm:px-6 lg:px-8 pt-20 pb-16 w-full">
+        <div className="flex flex-col md:flex-row items-center justify-between">
+          {/* Left side - Text content */}
+          <div className="w-full md:w-1/2 text-white space-y-4 mb-10 md:mb-0">
+            <h1 className="text-4xl md:text-[63px] font-semibold tracking-wide leading-tight md:text-left text-center">
+              Need Funds?
+              <br />
+              Use Your NFTs as
+              <br />
+              Collateral
+            </h1>
+            <p className="text-gray-300 mt-4 max-w-[30rem] pb-8 md:text-left text-center text-sm md:text-lg">
+              Use your NFT as collateral to borrow crypto. Repay the loan and
+              reclaim your NFT.
+            </p>
+
+            {/* Call to action buttons */}
+            <div className="flex md:flex-row gap-4 flex-col mt-8">
+              <button className="px-6 py-3 bg-[#8358FF] hover:bg-purple-700 rounded-md text-white font-medium transition-colors">
+                Get A Loan
+              </button>
+              <button className="px-6 py-3 border border-white hover:bg-white hover:bg-opacity-10 rounded-md text-white font-medium transition-colors">
+                I Want to Lend
+              </button>
+            </div>
+
+            {/* Statistics */}
+            <div className="flex md:flex-wrap gap-8 mt-12 md:p-0 py-4 ">
+              <div className="flex flex-col items-center">
+                <span className="text-2xl font-bold">$100M+</span>
+                <span className="text-xs w-[70%] md:w-full md:text-sm text-center text-gray-400">Total Loan Volume</span>
+              </div>
+              <div className="flex flex-col items-center">
+                <span className="text-2xl font-bold">25K+</span>
+                <span className="text-xs w-[70%] md:w-full md:text-sm text-center text-gray-400">
+                  Total Number of Loans
+                </span>
+              </div>
+              <div className="flex flex-col items-center">
+                <span className="text-2xl font-bold">$5k+</span>
+                <span className="text-xs w-[70%] md:w-full md:text-sm text-center text-gray-400">Average Loan Size</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Right side - NFT showcase */}
+          <div className="">
+            <div className="">
+              {/* Main NFT Card */}
+              <div className="">
+                <Image
+                  src={Monkey}
+                  width={700}
+                  height={700}
+                  alt="Cryptopunk NFT"
+                  className="rounded-xl z-50  transition-transform duration-300 ease-in-out transform"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

website/src/app/components/navbar.tsx

@@ -0,0 +1,103 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Menu, X } from "lucide-react";
+import Image from "next/image";
+import Logo from "../../../public/images/trajectifi-logo.png";
+import Logotext from "../../../public/images/trajectifi-logo-text.png";
+
+export default function Navbar() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 10) {
+        setScrolled(true);
+      } else {
+        setScrolled(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <nav className={` py-2 fixed w-full z-50 transition-all duration-300 border-b border-[#003162] ${scrolled ? 'bg-opacity-90 backdrop-blur-sm' : 'bg-opacity-0'} bg-gray-900`}>
+      <div className="sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <div className="flex-shrink-0 flex items-center">
+            <div className="flex items-center">
+              <Image src={Logo} width={40} height={40} alt="logo" />
+              <Image src={Logotext} width={80} height={40} alt="logo" />
+            </div>
+          </div>
+
+          <div className="hidden md:flex items-center justify-between gap-16 w-full md:w-auto">
+          <a href="#" className="text-white hover:text-purple-300 py-2 text-sm font-medium">Home</a>
+            <a href="#" className="text-white hover:text-purple-300 py-2 text-sm font-medium">How It Works</a>
+            <a href="#" className="text-white hover:text-purple-300 py-2 text-sm font-medium">Get a Loan</a>
+            <a href="#" className="text-white hover:text-purple-300 py-2 text-sm font-medium">Give a Loan</a>
+            <a href="#" className="text-white hover:text-purple-300 py-2 text-sm font-medium">Rewards</a>
+            <a href="#" className="text-white hover:text-purple-300 py-2 text-sm font-medium">Community</a>
+            <a href="#" className="text-white hover:text-purple-300 py-2 text-sm font-medium">Resources</a>
+          </div>
+
+          {/* Desktop menu */}
+          <div className="hidden md:flex">
+            <a href="#" className="ml-4 px-4 py-2 rounded-md text-white bg-[#8358FF] hover:bg-purple-700 transition-colors">Open DApp</a>
+          </div>
+
+          {/* Mobile menu button */}
+          <div className="md:hidden">
+            <button 
+              onClick={toggleMenu}
+              className="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-purple-300 focus:outline-none"
+            >
+              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile menu, show/hide based on menu state */}
+      <div 
+        className={`md:hidden fixed top-0 right-0 h-full w-full bg-[#080a1f] shadow-lg transform transition-transform duration-300 ease-in-out ${isMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}
+      >
+        <div className="px-4 pt-6 pb-4 flex justify-end">
+          <button 
+            onClick={toggleMenu}
+            className="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-purple-300 focus:outline-none"
+          >
+            <X size={24} />
+          </button>
+        </div>
+        <div className="px-2 pt-2 pb-3 space-y-1 flex flex-col">
+          <a href="#" className="text-white hover:text-purple-300 px-3 py-2 text-base font-medium">Home</a>
+          <a href="#" className="text-white hover:text-purple-300 px-3 py-2 text-base font-medium">How It Works</a>
+          <a href="#" className="text-white hover:text-purple-300 px-3 py-2 text-base font-medium">Get a Loan</a>
+          <a href="#" className="text-white hover:text-purple-300 px-3 py-2 text-base font-medium">Give a Loan</a>
+          <a href="#" className="text-white hover:text-purple-300 px-3 py-2 text-base font-medium">Rewards</a>
+          <a href="#" className="text-white hover:text-purple-300 px-3 py-2 text-base font-medium">Community</a>
+          <a href="#" className="text-white hover:text-purple-300 px-3 py-2 text-base font-medium">Resources</a>
+          <a href="#" className="mt-4 mx-3 px-4 py-2 flex justify-center rounded-md text-white bg-[#8358FF] hover:bg-purple-700 transition-colors">Open DApp</a>
+        </div>
+      </div>
+
+      {/* Overlay when mobile menu is open */}
+      {isMenuOpen && (
+        <div 
+          className="md:hidden fixed inset-0 bg-[#080A1F] bg-opacity-50 z-40"
+          onClick={toggleMenu}
+        />
+      )}
+    </nav>
+  );
+}

website/src/app/page.tsx

@@ -1,20 +1,23 @@
 import FAQ from "./components/faq";
 import Participants from "./components/participants";
 import Footer from "./components/footer";
+import Navbar from "./components/navbar";
+import Hero from "./components/hero";
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50 text-gray-800">
+    <div className="flex flex-col bg-gray-50 text-gray-800">
+      <div>
+        <Navbar />
+        <Hero />
+      </div>
       <main className="flex-grow ">
         <section className=" mx-auto ">
           <Participants />
           <FAQ />
         </section>
       </main>
-
-      {/* <footer className="bg-gray-900 text-white">
-      </footer> */}
       <Footer />
     </div>
   );
-}
+}

website/src/app/view-listed-asset/component/FilterBar.tsx

@@ -0,0 +1,16 @@
+export default function FilterBar() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <p>filter:</p>
+      <div className="flex gap-1">
+        <button className="bg-[#080A1F] w-[89px] h-[32px] px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white "> 8%  ✖</button>
+        <button className="bg-[#080A1F] w-[89px] h-[32px] px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white">30days  </button>
+        <button className="bg-[#080A1F] w-[89px] h-[32px] px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white">USDC</button>
+      </div>
+      <div className="ml-auto flex gap-2">
+        <button className="bg-[#191919] px-3 py-1 rounded text-white text-sm">📊 Grid</button>
+        <button className="bg-[#0D0D0D] px-3 py-1 rounded text-white text-sm">📋 List</button>
+      </div>
+    </div>
+  );
+}