diff --git a/dapp/public/images/bg-image.png b/dapp/public/images/bg-image.png new file mode 100644 index 0000000..1f0f999 Binary files /dev/null and b/dapp/public/images/bg-image.png differ diff --git a/dapp/public/images/trajectifi-logo-text.png b/dapp/public/images/trajectifi-logo-text.png new file mode 100644 index 0000000..378b4b1 Binary files /dev/null and b/dapp/public/images/trajectifi-logo-text.png differ diff --git a/dapp/public/images/trajectifi-logo.png b/dapp/public/images/trajectifi-logo.png new file mode 100644 index 0000000..0411f86 Binary files /dev/null and b/dapp/public/images/trajectifi-logo.png differ diff --git a/dapp/src/app/components/navbar.tsx b/dapp/src/app/components/navbar.tsx new file mode 100644 index 0000000..1b50b5f --- /dev/null +++ b/dapp/src/app/components/navbar.tsx @@ -0,0 +1,44 @@ +"use client"; + +import { useState } from "react"; +import Link from "next/link"; +import { + Search as SearchIcon, + Bell as BellIcon, + HelpCircle as HelpIcon +} from "lucide-react"; + +export default function Navbar() { + const [searchQuery, setSearchQuery] = useState(""); + + return ( + + ); +} \ No newline at end of file diff --git a/dapp/src/app/components/sidebar.tsx b/dapp/src/app/components/sidebar.tsx new file mode 100644 index 0000000..156f6fb --- /dev/null +++ b/dapp/src/app/components/sidebar.tsx @@ -0,0 +1,163 @@ +"use client"; +import Image from "next/image"; +import trajectifylogo from "../../../public/images/trajectifi-logo.png"; +import trajectword from "../../../public/images/trajectifi-logo-text.png"; + +import { useState, useEffect } from "react"; +import Link from "next/link"; +import { + LayoutGrid as AssetsIcon, + CreditCard as LoanIcon, + Search as SearchIcon, +} from "lucide-react"; + +export default function Sidebar() { + const [isCollapsed, setIsCollapsed] = useState(true); // Default to collapsed + const [isHovered, setIsHovered] = useState(false); + + // Auto-collapse on mobile, maintain collapsed state on larger screens + useEffect(() => { + const handleResize = () => { + if (window.innerWidth < 768) { + setIsCollapsed(true); + } + }; + + // Set initial state + handleResize(); + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + + // Toggle sidebar expanded/collapsed state + const toggleSidebar = () => { + setIsCollapsed(!isCollapsed); + }; + + // Determine if sidebar should be expanded + const expanded = !isCollapsed || isHovered; + + return ( + + ); +} + +interface SidebarItemProps { + href: string; + icon: React.ReactNode; + text: string; + expanded: boolean; + active?: boolean; +} + +interface SidebarItemProps { + href: string; + icon: React.ReactNode; + text: string; + expanded: boolean; + active?: boolean; +} + +function SidebarItem({ + href, + icon, + text, + expanded, + active = false, +}: SidebarItemProps) { + return ( + e.stopPropagation()} + > + {expanded ? ( +
+ {icon} + {text} +
+ ) : ( + {icon} + )} + + ); +} diff --git a/dapp/src/app/globals.css b/dapp/src/app/globals.css index 6b717ad..74eea95 100644 --- a/dapp/src/app/globals.css +++ b/dapp/src/app/globals.css @@ -9,13 +9,18 @@ @media (prefers-color-scheme: dark) { :root { - --background: #0a0a0a; + --background: #080a1f; --foreground: #ededed; } } body { - color: var(--foreground); - background: var(--background); - font-family: Arial, Helvetica, sans-serif; + color: rgb(var(--foreground-rgb)); + background-color: #b56203; +} + +@layer utilities { + .text-balance { + text-wrap: balance; + } } diff --git a/dapp/src/app/layout.tsx b/dapp/src/app/layout.tsx index f7fa87e..0011196 100644 --- a/dapp/src/app/layout.tsx +++ b/dapp/src/app/layout.tsx @@ -1,6 +1,8 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import Navbar from "../app/components/navbar"; +import Sidebar from "../app/components/sidebar"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -13,8 +15,8 @@ const geistMono = Geist_Mono({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Trajectifi", + description: "Trajectifi DApp", }; export default function RootLayout({ @@ -25,10 +27,16 @@ export default function RootLayout({ return ( - {children} +
+ +
+ +
{children}
+
+
); -} +} \ No newline at end of file diff --git a/dapp/src/app/page.tsx b/dapp/src/app/page.tsx index 205f025..e96a3c4 100644 --- a/dapp/src/app/page.tsx +++ b/dapp/src/app/page.tsx @@ -1,7 +1,35 @@ -const Home = () => { - return ( -
- ); -} - -export default Home; \ No newline at end of file +import Link from "next/link"; +import { ArrowRight } from "lucide-react"; + +export default function Home() { + return ( +
+

My Assets

+ +
+
+
+

Connect Your Wallet

+

To view your assets, please connect your wallet.

+ + + +
+ + {/* Dark overlay */} +
+
+
+
+ ); +} \ No newline at end of file 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/dapp/tailwind.config.ts b/dapp/tailwind.config.ts index 109807b..95de64d 100644 --- a/dapp/tailwind.config.ts +++ b/dapp/tailwind.config.ts @@ -11,6 +11,17 @@ export default { colors: { background: "var(--background)", foreground: "var(--foreground)", + purple: { + 500: "#8855FF", + 600: "#7040E0", + 700: "#5C30C0", + }, + gray: { + 800: "#1A1A2E", + }, + }, + backgroundImage: { + 'page-bg': "url('/images/bg-image.png')", }, }, }, diff --git a/website/public/Herosection.png b/website/public/Herosection.png new file mode 100644 index 0000000..d25d38b Binary files /dev/null and b/website/public/Herosection.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..22864a9 --- /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 +
+
+
+
+
+
+ ); +} 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..a9d57a1 100644 --- a/website/src/app/page.tsx +++ b/website/src/app/page.tsx @@ -1,19 +1,22 @@ 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 ( -
+
+
+ + +
- - {/*
-
*/}
); 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 diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts index 266c06d..82551ad 100644 --- a/website/tailwind.config.ts +++ b/website/tailwind.config.ts @@ -51,6 +51,10 @@ export default { '5': 'hsl(var(--chart-5))' } }, + backgroundImage: { + 'gradientbg': "url('/Herosection.png')", // Add url() and use root path + }, + borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', @@ -58,5 +62,5 @@ export default { } } }, - plugins: [require("tailwindcss-animate")], +// plugins: [require("tailwindcss-animate")], } satisfies Config;