chore/code cleanup

.github/ISSUE_TEMPLATE.md

@@ -1,9 +1,4 @@
-# 📘 Issue Description
--
-
----
-
-## 🔍 Steps to Reproduce
+## 📘 Description
 -
 
 ## ✅ Acceptance Criteria
@@ -15,3 +10,6 @@
 ## 📜 Additional Notes
 - 
 
+⚠ Do not apply until the ODHack begins.
+
+⚠ Read our guidelines before applying.

frontend/app/components/home/feature-section.tsx

@@ -0,0 +1,92 @@
+import { BarChart3, Coins, Lock, Shield, Users, Zap } from "lucide-react";
+
+export function FeatureSection() {
+	const features = [
+		{
+			icon: <Shield className="h-8 w-8" />,
+			title: "Smart Contract Escrow",
+			description: (
+				<>
+					Automated protection with Stellar smart contracts. Trustless Work API
+					abstracts the complexities of smart contract configuration. It
+					leverages the blockchain to ensure transactions are secure and
+					transparent, providing fairness without bias in the marketplace. Read
+					more on
+					<a
+						href="https://www.trustlesswork.com/"
+						target="_blank"
+						className="text-blue-500 hover:underline"
+					>
+						<span></span> Trustless Work
+					</a>
+				</>
+			),
+			gradient: "from-blue-500 to-cyan-500",
+		},
+		{
+			icon: <Zap className="h-8 w-8" />,
+			title: "Lightning Settlement",
+			description: "3-5 second finality on Stellar network",
+			gradient: "from-yellow-500 to-orange-500",
+		},
+		{
+			icon: <Lock className="h-8 w-8" />,
+			title: "Non-Custodial Trading",
+			description: "Keep full control of your assets",
+			gradient: "from-purple-500 to-pink-500",
+		},
+		{
+			icon: <Coins className="h-8 w-8" />,
+			title: "Multi-Asset Support",
+			description: "Trade any Stellar-based token",
+			gradient: "from-green-500 to-emerald-500",
+		},
+		{
+			icon: <Users className="h-8 w-8" />,
+			title: "DAO Governance",
+			description: "Community-driven protocol decisions",
+			gradient: "from-red-500 to-pink-500",
+		},
+		{
+			icon: <BarChart3 className="h-8 w-8" />,
+			title: "Real-Time Analytics",
+			description: "Advanced trading metrics & insights",
+			gradient: "from-indigo-500 to-purple-500",
+		},
+	];
+
+	return (
+		<div className="relative bg-black/5 dark:bg-white/5 py-24">
+			<div className="max-w-6xl mx-auto px-4">
+				<h2 className="text-3xl font-bold text-center mb-4">
+					Built for the Future of Finance
+				</h2>
+				<p className="text-center text-muted-foreground mb-16 max-w-[600px] mx-auto">
+					Leveraging the power of Stellar blockchain to provide a secure,
+					efficient, and truly decentralized trading experience.
+				</p>
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+					{features.map((feature) => (
+						<div
+							key={feature.title}
+							className="group relative p-6 rounded-xl bg-card hover:bg-card/50 transition-all duration-300"
+						>
+							<div
+								className={`absolute inset-0 opacity-0 group-hover:opacity-10 bg-gradient-to-br ${feature.gradient} rounded-xl transition-opacity duration-300`}
+							/>
+							<div className="relative">
+								<div
+									className={`mb-4 bg-gradient-to-br ${feature.gradient} text-white p-3 rounded-lg inline-block`}
+								>
+									{feature.icon}
+								</div>
+								<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
+								<p className="text-muted-foreground">{feature.description}</p>
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/app/components/ui/hero-section.tsx → frontend/app/components/home/hero-section.tsx

@@ -1,8 +1,8 @@
-import { Button } from "@/app/components/ui/button";
 import { ArrowRight } from "lucide-react";
 import Link from "next/link";
-import * as React from "react";
-import { SafeSwapLogo } from "./SafeSwapLogo";
+
+import { SafeSwapLogo } from "@/app/components/shared/safe-swap-logo";
+import { Button } from "@/app/components/ui/button";
 
 export function HeroSection() {
 	return (

frontend/app/components/ui/stats-section.tsx → frontend/app/components/home/stats-section.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 export function StatsSection() {
 	return (
 		<div className="relative py-20 overflow-hidden">

frontend/app/components/ui/add-product-modal.tsx → frontend/app/components/marketplace/add-product-modal.tsx

@@ -1,15 +1,16 @@
 import React from "react";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Label } from "./label";
+
+import { Button } from "@/app/components/ui/button";
+import { Input } from "@/app/components/ui/input";
+import { Label } from "@/app/components/ui/label";
 import {
 	Select,
 	SelectContent,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "./select";
-import { Textarea } from "./textarea";
+} from "@/app/components/ui/select";
+import { Textarea } from "@/app/components/ui/textarea";
 
 interface AddProductModalProps {
 	isOpen: boolean;
@@ -24,8 +25,8 @@ const AddProductModal: React.FC<AddProductModalProps> = ({
 
 	return (
 		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-			<div className="bg-white rounded-lg shadow-lg w-[90%] max-w-xl p-6">
-				<h2 className="text-2xl font-bold mb-4">Add New Product</h2>
+			<div className="bg-white rounded-lg shadow-lg w-[90%] max-w-xl p-6 dark:bg-neutral-950">
+				<h2 className="text-2xl text-center font-bold mb-4">Add New Product</h2>
 				<form className="space-y-4">
 					{/* Product Name */}
 					<div>
@@ -91,12 +92,7 @@ const AddProductModal: React.FC<AddProductModalProps> = ({
 					<Button variant="secondary" onClick={onClose}>
 						Close
 					</Button>
-					<Button
-						variant="default"
-						className="bg-black text-white hover:bg-black/80"
-					>
-						Save
-					</Button>
+					<Button>Save</Button>
 				</div>
 			</div>
 		</div>

frontend/app/components/marketplace/breadcrumb-navigation.tsx

@@ -0,0 +1,24 @@
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/app/components/ui/breadcrumb";
+
+export default function BreadcrumbNavigation() {
+	return (
+		<Breadcrumb>
+			<BreadcrumbList className="text-base">
+				<BreadcrumbItem>
+					<BreadcrumbLink href="/">Home</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem>
+					<BreadcrumbPage>Marketplace</BreadcrumbPage>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+	);
+}

frontend/app/components/marketplace/filters.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Checkbox, Slider } from "@radix-ui/themes";
+import { useState } from "react";
+
+import { SidebarContent, SidebarHeader } from "@/app/components/ui/sidebar";
+
+const Filters = () => {
+	const [priceRange, setPriceRange] = useState<[number, number]>([0, 1500]);
+	const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+
+	const handleCategoryChange = (category: string) => {
+		setSelectedCategories((prev) =>
+			prev.includes(category)
+				? prev.filter((c) => c !== category)
+				: [...prev, category],
+		);
+	};
+
+	return (
+		<>
+			<SidebarHeader className="p-6 border-b">
+				<h2 className="text-xl font-semibold">Filters</h2>
+			</SidebarHeader>
+			<SidebarContent className="p-6">
+				<div className="space-y-8">
+					<div>
+						<h3 className="mb-2 text-lg font-medium">Price range</h3>
+						<Slider
+							min={0}
+							max={1500}
+							step={10}
+							value={priceRange}
+							onValueChange={(value) =>
+								setPriceRange(value as [number, number])
+							}
+							className="mb-3"
+						/>
+						<div className="flex justify-between text-lg">
+							<span>${priceRange[0]}</span>
+							<span>${priceRange[1]}</span>
+						</div>
+					</div>
+					<div>
+						<h3 className="mb-2 text-lg font-medium">Categories</h3>
+						<div className="space-y-3">
+							{["Electronics", "Furniture", "Appliances", "Sports"].map(
+								(category) => (
+									<div key={category} className="flex items-center">
+										<Checkbox
+											id={category}
+											checked={selectedCategories.includes(category)}
+											onCheckedChange={() => handleCategoryChange(category)}
+										/>
+										<label htmlFor={category} className="ml-3 text-lg">
+											{category}
+										</label>
+									</div>
+								),
+							)}
+						</div>
+					</div>
+				</div>
+			</SidebarContent>
+		</>
+	);
+};
+
+export default Filters;

frontend/app/components/marketplace/products-pagination.tsx

@@ -6,23 +6,20 @@ import {
 	PaginationLink,
 	PaginationNext,
 	PaginationPrevious,
-} from "../ui/pagination";
+} from "@/app/components/ui/pagination";
 import {
 	Select,
 	SelectContent,
 	SelectGroup,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "../ui/select";
+} from "@/app/components/ui/select";
 
 export const ProductsPagination = () => {
 	return (
-		<section
-			className="w-full pb-10 mt-2 flex flex-col justify-center items-start gap-5 
-    md:flex-row md:items-center md:gap-0 md:max-w-2xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl"
-		>
-			<div className="w-full gap-2 flex justify-center items-center md:w-[50%] md:justify-start">
+		<section className="w-full pt-5 mt-2 flex flex-col gap-5 md:flex-row md:gap-0">
+			<div className="w-full gap-2 flex items-center justify-center md:justify-start md:w-[50%]">
 				<label className="opacity-80">Show result:</label>
 				<Select>
 					<SelectTrigger className="w-[70px]">
@@ -41,7 +38,7 @@ export const ProductsPagination = () => {
 			</div>
 
 			<div className="w-full md:w-[50%]">
-				<Pagination>
+				<Pagination className="justify-center md:justify-end">
 					<PaginationContent>
 						<PaginationItem>
 							<PaginationPrevious href="#" />