diff --git a/dapp/src/app/view-listed-asset/component/FilterBar.tsx b/dapp/src/app/view-listed-asset/component/FilterBar.tsx new file mode 100644 index 0000000..edea660 --- /dev/null +++ b/dapp/src/app/view-listed-asset/component/FilterBar.tsx @@ -0,0 +1,16 @@ +export default function FilterBar() { + return ( +
+

filter:

+
+ + + +
+
+ + +
+
+ ); +} diff --git a/dapp/src/app/view-listed-asset/component/ListingInfo.tsx b/dapp/src/app/view-listed-asset/component/ListingInfo.tsx new file mode 100644 index 0000000..105fda1 --- /dev/null +++ b/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 ( +
+
+

Listing Information

+
+ network + angle + reload +
+
+ +
+ CryptoPunk +
+
+

Cryptopunk #1232

+

Cryptopunk VQ (STRK)

+
+ + Listed + +
+
+ +
+
+ Currency + All +
+
+ Acceptable Amount + 0.001 STRK +
+
+ Loan Duration + 14 days +
+
+ APR + 8% +
+
+ +

+ You can unlist your item at any time. +

+ +
+ + +
+
+ ); +} diff --git a/dapp/src/app/view-listed-asset/component/LoanRow.tsx b/dapp/src/app/view-listed-asset/component/LoanRow.tsx new file mode 100644 index 0000000..9eb829b --- /dev/null +++ b/dapp/src/app/view-listed-asset/component/LoanRow.tsx @@ -0,0 +1,17 @@ +export default function LoanRow() { + return ( + + 2,856.41 + 0D673a4...2 + 1.17% + 14.19% + 30 days + 2,891.75 + + + + + ); +} diff --git a/dapp/src/app/view-listed-asset/component/LoanTable.tsx b/dapp/src/app/view-listed-asset/component/LoanTable.tsx new file mode 100644 index 0000000..045a31d --- /dev/null +++ b/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 ( +
+ +
+ + + + + + + + + + + + + + {[...Array(6)].map((_, i) => ( + + ))} + +
Loan valueLenderInterestAPRDurationRepaymentAction
+
+ Showing 1 to 6 of 13 items +
+
+
+ ); +} diff --git a/dapp/src/app/view-listed-asset/page.tsx b/dapp/src/app/view-listed-asset/page.tsx new file mode 100644 index 0000000..0a40202 --- /dev/null +++ b/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 ( +
+ + +
+ + +
+ +
+
+
+ ); +}; + +export default Page; diff --git a/dapp/src/assets/angle.png b/dapp/src/assets/angle.png new file mode 100644 index 0000000..6f890b2 Binary files /dev/null and b/dapp/src/assets/angle.png differ diff --git a/dapp/src/assets/back.png b/dapp/src/assets/back.png new file mode 100644 index 0000000..f2c8807 Binary files /dev/null and b/dapp/src/assets/back.png differ diff --git a/dapp/src/assets/net.png b/dapp/src/assets/net.png new file mode 100644 index 0000000..4e7f0ed Binary files /dev/null and b/dapp/src/assets/net.png differ diff --git a/dapp/src/assets/punk.png b/dapp/src/assets/punk.png new file mode 100644 index 0000000..de31d20 Binary files /dev/null and b/dapp/src/assets/punk.png differ diff --git a/dapp/src/assets/reload.png b/dapp/src/assets/reload.png new file mode 100644 index 0000000..58c7da0 Binary files /dev/null and b/dapp/src/assets/reload.png differ diff --git a/website/public/images/Monkey.png b/website/public/images/Monkey.png new file mode 100644 index 0000000..62067dd Binary files /dev/null and b/website/public/images/Monkey.png differ diff --git a/website/public/images/trajectifi-logo-text.png b/website/public/images/trajectifi-logo-text.png new file mode 100644 index 0000000..378b4b1 Binary files /dev/null and b/website/public/images/trajectifi-logo-text.png differ diff --git a/website/public/images/trajectifi-logo.png b/website/public/images/trajectifi-logo.png new file mode 100644 index 0000000..0411f86 Binary files /dev/null and b/website/public/images/trajectifi-logo.png differ diff --git a/website/src/app/components/hero.tsx b/website/src/app/components/hero.tsx new file mode 100644 index 0000000..7e33985 --- /dev/null +++ b/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 ( +
+ {/* Add these gradient elements */} +
+
+
+
+ {/* Left side - Text content */} +
+

+ Need Funds? +
+ Use Your NFTs as +
+ Collateral +

+

+ Use your NFT as collateral to borrow crypto. Repay the loan and + reclaim your NFT. +

+ + {/* Call to action buttons */} +
+ + +
+ + {/* Statistics */} +
+
+ $100M+ + Total Loan Volume +
+
+ 25K+ + + Total Number of Loans + +
+
+ $5k+ + Average Loan Size +
+
+
+ + {/* Right side - NFT showcase */} +
+
+ {/* Main NFT Card */} +
+ Cryptopunk NFT +
+
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/website/src/app/components/navbar.tsx b/website/src/app/components/navbar.tsx new file mode 100644 index 0000000..8014451 --- /dev/null +++ b/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 ( + + ); +} \ No newline at end of file diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx index 96dbf28..4c70e11 100644 --- a/website/src/app/page.tsx +++ b/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 ( -
+
+
+ + +
- - {/*
-
*/}
); -} +} \ No newline at end of file diff --git a/website/src/app/view-listed-asset/component/FilterBar.tsx b/website/src/app/view-listed-asset/component/FilterBar.tsx new file mode 100644 index 0000000..edea660 --- /dev/null +++ b/website/src/app/view-listed-asset/component/FilterBar.tsx @@ -0,0 +1,16 @@ +export default function FilterBar() { + return ( +
+

filter:

+
+ + + +
+
+ + +
+
+ ); +} diff --git a/website/src/app/view-listed-asset/component/ListingInfo.tsx b/website/src/app/view-listed-asset/component/ListingInfo.tsx new file mode 100644 index 0000000..105fda1 --- /dev/null +++ b/website/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 ( +
+
+

Listing Information

+
+ network + angle + reload +
+
+ +
+ CryptoPunk +
+
+

Cryptopunk #1232

+

Cryptopunk VQ (STRK)

+
+ + Listed + +
+
+ +
+
+ Currency + All +
+
+ Acceptable Amount + 0.001 STRK +
+
+ Loan Duration + 14 days +
+
+ APR + 8% +
+
+ +

+ You can unlist your item at any time. +

+ +
+ + +
+
+ ); +} diff --git a/website/src/app/view-listed-asset/component/LoanRow.tsx b/website/src/app/view-listed-asset/component/LoanRow.tsx new file mode 100644 index 0000000..9eb829b --- /dev/null +++ b/website/src/app/view-listed-asset/component/LoanRow.tsx @@ -0,0 +1,17 @@ +export default function LoanRow() { + return ( + + 2,856.41 + 0D673a4...2 + 1.17% + 14.19% + 30 days + 2,891.75 + + + + + ); +} diff --git a/website/src/app/view-listed-asset/component/LoanTable.tsx b/website/src/app/view-listed-asset/component/LoanTable.tsx new file mode 100644 index 0000000..045a31d --- /dev/null +++ b/website/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 ( +
+ +
+ + + + + + + + + + + + + + {[...Array(6)].map((_, i) => ( + + ))} + +
Loan valueLenderInterestAPRDurationRepaymentAction
+
+ Showing 1 to 6 of 13 items +
+
+
+ ); +} diff --git a/website/src/app/view-listed-asset/page.tsx b/website/src/app/view-listed-asset/page.tsx new file mode 100644 index 0000000..0a40202 --- /dev/null +++ b/website/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 ( +
+ + +
+ + +
+ +
+
+
+ ); +}; + +export default Page; diff --git a/website/src/assets/angle.png b/website/src/assets/angle.png new file mode 100644 index 0000000..6f890b2 Binary files /dev/null and b/website/src/assets/angle.png differ diff --git a/website/src/assets/back.png b/website/src/assets/back.png new file mode 100644 index 0000000..f2c8807 Binary files /dev/null and b/website/src/assets/back.png differ diff --git a/website/src/assets/net.png b/website/src/assets/net.png new file mode 100644 index 0000000..4e7f0ed Binary files /dev/null and b/website/src/assets/net.png differ diff --git a/website/src/assets/punk.png b/website/src/assets/punk.png new file mode 100644 index 0000000..de31d20 Binary files /dev/null and b/website/src/assets/punk.png differ diff --git a/website/src/assets/reload.png b/website/src/assets/reload.png new file mode 100644 index 0000000..58c7da0 Binary files /dev/null and b/website/src/assets/reload.png differ