From 1af4f6ba463c71564dc8492f9badc8c557b50176 Mon Sep 17 00:00:00 2001
From: KevinLatino <latinokevin9@gmail.com>
Date: Sat, 2 Nov 2024 17:11:23 -0600
Subject: [PATCH 1/2] Color and types changes

---
 frontend/app/components/ui/sidebar.tsx | 102 +++++++++++++++
 frontend/app/marketplace/page.tsx      | 172 +++++++++++++++++++++++++
 2 files changed, 274 insertions(+)
 create mode 100644 frontend/app/components/ui/sidebar.tsx
 create mode 100644 frontend/app/marketplace/page.tsx

diff --git a/frontend/app/components/ui/sidebar.tsx b/frontend/app/components/ui/sidebar.tsx
new file mode 100644
index 0000000..8e08efe
--- /dev/null
+++ b/frontend/app/components/ui/sidebar.tsx
@@ -0,0 +1,102 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+import { cn } from "@/lib/utils"; 
+import { X, Menu } from "lucide-react";
+
+interface SidebarContextType {
+  isOpen: boolean;
+  toggleSidebar: () => void;
+}
+
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+
+export const SidebarProvider = ({ children }: { children: ReactNode }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleSidebar = () => setIsOpen(!isOpen);
+
+  return (
+    <SidebarContext.Provider value={{ isOpen, toggleSidebar }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+
+export const Sidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { isOpen } = useSidebar();
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transition-transform duration-300",
+          isOpen ? "translate-x-0" : "-translate-x-full",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
+
+export const SidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("px-4 py-2 border-b flex justify-between items-center", className)} {...props}>
+      {props.children}
+      <SidebarClose />
+    </div>
+  )
+);
+SidebarHeader.displayName = "SidebarHeader";
+
+export const SidebarContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex-1 overflow-y-auto p-4", className)} {...props} />
+  )
+);
+SidebarContent.displayName = "SidebarContent";
+
+export const SidebarTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+    return (
+      <button
+        ref={ref}
+        onClick={toggleSidebar}
+        className={cn("p-2", className)}
+        {...props}
+      >
+        <Menu size={30} className="text-purple-900"/>
+        <span className="sr-only">Toggle Sidebar</span>
+      </button>
+    );
+  }
+);
+SidebarTrigger.displayName = "SidebarTrigger";
+
+export const SidebarClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+    return (
+      <button
+        ref={ref}
+        onClick={toggleSidebar}
+        className={cn("absolute right-4 top-4 opacity-70 hover:opacity-100", className)}
+        {...props}
+      >
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close Sidebar</span>
+      </button>
+    );
+  }
+);
+SidebarClose.displayName = "SidebarClose";
+
+// export { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarTrigger, SidebarClose };
diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
new file mode 100644
index 0000000..f0f9062
--- /dev/null
+++ b/frontend/app/marketplace/page.tsx
@@ -0,0 +1,172 @@
+'use client';
+import { useState, Dispatch, SetStateAction } from 'react';
+import { Slider } from "@/app/components/ui/slider";
+import { Checkbox } from "@/app/components/ui/checkbox";
+import { Button } from "@/app/components/ui/button";
+import { Input } from "@/app/components/ui/input";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/app/components/ui/card";
+import { Sidebar, SidebarContent, SidebarHeader, SidebarProvider, SidebarTrigger } from "@/app/components/ui/sidebar";
+import { Search, Menu as HamIcon } from "lucide-react";
+
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  category: string;
+}
+
+interface SidebarComponentProps {
+  priceRange: [number, number];
+  setPriceRange: Dispatch<SetStateAction<[number, number]>>;
+  selectedCategories: string[];
+  handleCategoryChange: (category: string) => void;
+}
+
+interface HeaderComponentProps {
+  searchTerm: string;
+  setSearchTerm: Dispatch<SetStateAction<string>>;
+}
+
+interface ProductListProps {
+  products: Product[];
+}
+
+const products: Product[] = [
+  { id: 1, name: "Laptop Pro", price: 1299, category: "Electronics" },
+  { id: 2, name: "Smartphone X", price: 699, category: "Electronics" },
+  { id: 3, name: "Ergonomic Chair", price: 299, category: "Furniture" },
+  { id: 4, name: "Coffee Maker", price: 89, category: "Appliances" },
+  { id: 5, name: "Running Shoes", price: 129, category: "Sports" },
+  { id: 6, name: "Wireless Earbuds", price: 159, category: "Electronics" },
+];
+
+export default function Marketplace() {
+  const [priceRange, setPriceRange] = useState<[number, number]>([0, 1500]);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategories(prev =>
+      prev.includes(category)
+        ? prev.filter(c => c !== category)
+        : [...prev, category]
+    );
+  };
+
+  const filteredProducts = products.filter(product => 
+    (searchTerm === "" || product.name.toLowerCase().includes(searchTerm.toLowerCase())) &&
+    (selectedCategories.length === 0 || selectedCategories.includes(product.category)) &&
+    product.price >= priceRange[0] && product.price <= priceRange[1]
+  );
+
+  return (
+    <SidebarProvider>
+      <div className="flex h-screen overflow-hidden">
+        <SidebarComponent 
+          priceRange={priceRange} 
+          setPriceRange={setPriceRange} 
+          selectedCategories={selectedCategories} 
+          handleCategoryChange={handleCategoryChange} 
+        />
+        <div className="flex-1 overflow-auto">
+          <HeaderComponent searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+          <ProductList products={filteredProducts} />
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}
+
+function SidebarComponent({ priceRange, setPriceRange, selectedCategories, handleCategoryChange }: SidebarComponentProps) {
+  return (
+    <Sidebar>
+      <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-3 text-lg font-medium">Price range</h3>
+            <Slider
+              min={0}
+              max={1500}
+              step={10}
+              value={priceRange}
+              onValueChange={setPriceRange}
+              className="mb-4"
+            />
+            <div className="flex justify-between text-lg">
+              <span>${priceRange[0]}</span>
+              <span>${priceRange[1]}</span>
+            </div>
+          </div>
+          <div>
+            <h3 className="mb-3 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>
+    </Sidebar>
+  );
+}
+
+function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
+  return (
+    <header className="flex items-center justify-between p-6 border-b">
+      <SidebarTrigger>
+        <Button variant="outline" size="icon" className="text-purple-900">
+          <HamIcon size={50} />
+          <span className="sr-only">Toggle Sidebar</span>
+        </Button>
+      </SidebarTrigger>
+      <div className="flex items-center space-x-3">
+        <Input
+          type="search"
+          placeholder="Search products..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="w-80 text-lg"
+        />
+        <Button size="icon" variant="ghost" className="text-purple-900">
+          <Search className="h-6 w-6" />
+          <span className="sr-only">Search</span>
+        </Button>
+      </div>
+    </header>
+  );
+}
+
+function ProductList({ products }: ProductListProps) {
+  return (
+    <main className="p-8">
+      <h1 className="text-3xl font-bold mb-8 text-purple-900">Products</h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {products?.map((product) => (
+          <Card key={product.id}>
+            <CardHeader>
+              <CardTitle className="text-purple-900 text-2xl">{product.name}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-gray-500 text-lg">{product.category}</p>
+            </CardContent>
+            <CardFooter className="flex justify-between">
+              <span className="text-xl font-semibold text-purple-900">${product.price}</span>
+              <Button variant="outline" className="text-purple-900 text-[1.1rem]">Add to cart</Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </main>
+  );
+}

From ea970c2750ff56ec93bc81a7bdbeccce92d769fc Mon Sep 17 00:00:00 2001
From: KevinLatino <latinokevin9@gmail.com>
Date: Sat, 2 Nov 2024 23:31:38 -0600
Subject: [PATCH 2/2] Feat: Ui-enhancement

---
 frontend/app/components/ui/card.tsx         |  76 ++++++++++++++
 frontend/app/components/ui/checkbox.tsx     |  30 ++++++
 frontend/app/components/ui/hero-section.tsx | 107 +++++++++++---------
 frontend/app/components/ui/input.tsx        |  25 +++++
 frontend/app/components/ui/sidebar.tsx      |   2 +-
 frontend/app/components/ui/slider.tsx       |  28 +++++
 frontend/app/marketplace/page.tsx           |  32 +++---
 7 files changed, 233 insertions(+), 67 deletions(-)
 create mode 100644 frontend/app/components/ui/card.tsx
 create mode 100644 frontend/app/components/ui/checkbox.tsx
 create mode 100644 frontend/app/components/ui/input.tsx
 create mode 100644 frontend/app/components/ui/slider.tsx

diff --git a/frontend/app/components/ui/card.tsx b/frontend/app/components/ui/card.tsx
new file mode 100644
index 0000000..7500a1c
--- /dev/null
+++ b/frontend/app/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
\ No newline at end of file
diff --git a/frontend/app/components/ui/checkbox.tsx b/frontend/app/components/ui/checkbox.tsx
new file mode 100644
index 0000000..94d214f
--- /dev/null
+++ b/frontend/app/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
\ No newline at end of file
diff --git a/frontend/app/components/ui/hero-section.tsx b/frontend/app/components/ui/hero-section.tsx
index ae33cec..9b80d35 100644
--- a/frontend/app/components/ui/hero-section.tsx
+++ b/frontend/app/components/ui/hero-section.tsx
@@ -1,56 +1,63 @@
+
 import { Button } from "@/app/components/ui/button";
 import { ArrowRight, Wallet } from "lucide-react";
+import Link from "next/link";
 import * as React from "react";
 
 export function HeroSection() {
-	return (
-		<div className="relative flex flex-col items-center justify-center min-h-[90vh] text-center px-4 overflow-hidden">
-			{/* Gradient Background */}
-			<div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-background" />
-
-			{/* Animated Grid Background */}
-			<div className="absolute inset-0 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
-
-			<div className="relative z-10">
-				<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary mb-8">
-					<span className="relative flex h-2 w-2">
-						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
-						<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
-					</span>
-					Live on Stellar Network
-				</div>
-
-				<h1 className="text-4xl sm:text-6xl font-bold tracking-tight mb-8 bg-clip-text from-primary to-primary/70">
-					The Future of
-					<span className="block mt-2">Secure Trading</span>
-				</h1>
-
-				<p className="text-xl text-muted-foreground max-w-[600px] mb-12">
-					Experience trustless trading with built-in Stellar escrow protection.
-					Your gateway to secure, decentralized commerce.
-				</p>
-
-				<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-					<Button size="lg" className="group">
-						<Wallet className="mr-2 h-4 w-4 transition-transform group-hover:scale-110" />
-						Connect Wallet
-					</Button>
-					<Button variant="outline" size="lg" className="group">
-						Explore Marketplace
-						<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
-					</Button>
-				</div>
-
-				{/* Live Stats Ticker */}
-				<div className="mt-16 flex gap-8 justify-center items-center text-sm text-muted-foreground">
-					<div className="flex items-center gap-2">
-						<span className="inline-block w-2 h-2 rounded-full bg-green-500"></span>
-						Network Status: Active
-					</div>
-					<div>24h Volume: $1.2M</div>
-					<div>Gas: 0.001 XLM</div>
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div className="relative flex flex-col items-center justify-center min-h-[90vh] text-center px-4 overflow-hidden">
+      {/* Gradient Background */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-background" />
+
+      {/* Animated Grid Background */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
+
+      <div className="relative z-10">
+        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary mb-8">
+          <span className="relative flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
+          </span>
+          Live on Stellar Network
+        </div>
+
+        <h1 className="text-4xl sm:text-6xl font-bold tracking-tight mb-8 bg-clip-text from-primary to-primary/70">
+          The Future of
+          <span className="block mt-2">Secure Trading</span>
+        </h1>
+
+        <p className="text-xl text-muted-foreground max-w-[600px] mb-12">
+          Experience trustless trading with built-in Stellar escrow protection.
+          Your gateway to secure, decentralized commerce.
+        </p>
+
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          <Button size="lg" className="group">
+            <Wallet className="mr-2 h-4 w-4 transition-transform group-hover:scale-110" />
+            Connect Wallet
+          </Button>
+          <Link
+            href="/marketplace
+		  "
+          >
+            <Button variant="outline" size="lg" className="group">
+              Explore Marketplace
+              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+            </Button>
+          </Link>
+        </div>
+
+        {/* Live Stats Ticker */}
+        <div className="mt-16 flex gap-8 justify-center items-center text-sm text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-2 h-2 rounded-full bg-green-500"></span>
+            Network Status: Active
+          </div>
+          <div>24h Volume: $1.2M</div>
+          <div>Gas: 0.001 XLM</div>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/app/components/ui/input.tsx b/frontend/app/components/ui/input.tsx
new file mode 100644
index 0000000..7030e99
--- /dev/null
+++ b/frontend/app/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
\ No newline at end of file
diff --git a/frontend/app/components/ui/sidebar.tsx b/frontend/app/components/ui/sidebar.tsx
index 8e08efe..206228b 100644
--- a/frontend/app/components/ui/sidebar.tsx
+++ b/frontend/app/components/ui/sidebar.tsx
@@ -73,7 +73,7 @@ export const SidebarTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHT
         className={cn("p-2", className)}
         {...props}
       >
-        <Menu size={30} className="text-purple-900"/>
+        <Menu size={30} className="text-black"/>
         <span className="sr-only">Toggle Sidebar</span>
       </button>
     );
diff --git a/frontend/app/components/ui/slider.tsx b/frontend/app/components/ui/slider.tsx
new file mode 100644
index 0000000..43e5919
--- /dev/null
+++ b/frontend/app/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
\ No newline at end of file
diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
index f0f9062..178d7d5 100644
--- a/frontend/app/marketplace/page.tsx
+++ b/frontend/app/marketplace/page.tsx
@@ -86,14 +86,14 @@ function SidebarComponent({ priceRange, setPriceRange, selectedCategories, handl
       <SidebarContent className="p-6">
         <div className="space-y-8">
           <div>
-            <h3 className="mb-3 text-lg font-medium">Price range</h3>
+            <h3 className="mb-2 text-lg font-medium">Price range</h3>
             <Slider
               min={0}
               max={1500}
               step={10}
               value={priceRange}
               onValueChange={setPriceRange}
-              className="mb-4"
+              className="mb-3"
             />
             <div className="flex justify-between text-lg">
               <span>${priceRange[0]}</span>
@@ -101,7 +101,7 @@ function SidebarComponent({ priceRange, setPriceRange, selectedCategories, handl
             </div>
           </div>
           <div>
-            <h3 className="mb-3 text-lg font-medium">Categories</h3>
+            <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">
@@ -125,21 +125,21 @@ function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
   return (
     <header className="flex items-center justify-between p-6 border-b">
       <SidebarTrigger>
-        <Button variant="outline" size="icon" className="text-purple-900">
-          <HamIcon size={50} />
+        <Button variant="outline" size="icon">
+          <HamIcon className="h-6 w-6" />
           <span className="sr-only">Toggle Sidebar</span>
         </Button>
       </SidebarTrigger>
-      <div className="flex items-center space-x-3">
+      <div className="flex items-center text-2xl space-x-3">
         <Input
           type="search"
           placeholder="Search products..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
-          className="w-80 text-lg"
+          className="w-[16rem] h-[3rem]"
         />
-        <Button size="icon" variant="ghost" className="text-purple-900">
-          <Search className="h-6 w-6" />
+        <Button size="icon" variant="ghost">
+          <Search className="h-5 w-5" />
           <span className="sr-only">Search</span>
         </Button>
       </div>
@@ -150,19 +150,19 @@ function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
 function ProductList({ products }: ProductListProps) {
   return (
     <main className="p-8">
-      <h1 className="text-3xl font-bold mb-8 text-purple-900">Products</h1>
+      <h1 className="text-3xl font-bold mb-8">Products</h1>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {products?.map((product) => (
-          <Card key={product.id}>
+          <Card key={product.id} className="p-6">
             <CardHeader>
-              <CardTitle className="text-purple-900 text-2xl">{product.name}</CardTitle>
+              <CardTitle className="text-xl font-semibold">{product.name}</CardTitle>
             </CardHeader>
             <CardContent>
-              <p className="text-gray-500 text-lg">{product.category}</p>
+              <p className="text-lg text-gray-500">{product.category}</p>
             </CardContent>
-            <CardFooter className="flex justify-between">
-              <span className="text-xl font-semibold text-purple-900">${product.price}</span>
-              <Button variant="outline" className="text-purple-900 text-[1.1rem]">Add to cart</Button>
+            <CardFooter className="flex justify-between items-center">
+              <span className="text-2xl font-bold">${product.price}</span>
+              <Button className="text-[16px] py-2 px-4">Add to Cart</Button>
             </CardFooter>
           </Card>
         ))}