formatting

client/src/components/CollectionItemUpdated.tsx

@@ -24,7 +24,7 @@ function CollectionItem({ name }: CollectionItemProps) {
     <div>
       <div style={circleStyle}>
       </div>
-      <h2 className="text-sm text-black text-center">{name}</h2>
+      <h2 className="text-sm text-black text-center" style={{marginBottom: "15px"}}>{name}</h2>
     </div>
   );
 }

client/src/components/GiftSortNavBar.tsx

@@ -25,7 +25,7 @@ const GiftSortNavbar = () => {
   return (
     <div className="bg-gray-100 p-2">
     <div className="flex" style={{ maxWidth: "1440px" }}>
-      <div className="flex space-x-2">
+      <div className="flex space-x-2 "  style={{ marginRight: "680px" }}>
           <button
             className={`${buttonStyle} ${
               activeButton === "Shop" ? activeButtonStyle : ""

client/src/components/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 const SearchBar = () => {
   const [searchText, setSearchText] = useState('');

client/src/components/UpdatedGiftItem.tsx

@@ -1,13 +1,11 @@
-import { Gift } from "../types.tsx";
-
 type GiftItemProps = {
   name: string;
   price: number;
 };
 
 function UpdatedGiftItem({ name, price }: GiftItemProps) {
   return (
-    <div className="relative flex flex-col items-center">
+    <div className="relative flex flex-col flex-start">
       <div className="bg-gray-200 w-40 h-40 mx-auto mb-2 relative">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -24,7 +22,7 @@ function UpdatedGiftItem({ name, price }: GiftItemProps) {
           />
         </svg>
       </div>
-      <div className="text-left">
+      <div className="text-left" style={{marginLeft: "40px", marginBottom: "5px"}}>
         <h2 className="text-sm text-black font-bold">{name}</h2>
         <h2 className="text-xs text-black">${price}</h2>
       </div>

client/src/pages/HomePage.tsx

@@ -52,12 +52,10 @@ const HomePage = () => {
             ))}
           </div>
         </div>
-        <div className="flex " style={{maxWidth: '1000px' }}>
+        <div className=" w-1000">
           <GiftSortNavBar />
         </div>
-
-
-<div className="overflow-y-auto" style={{ maxHeight: '305px', maxWidth: '1000px' }}>
+  <div className="overflow-y-auto" style={{ maxHeight: '290px', maxWidth: '1000px' }}>
   <div className="flex flex-wrap -mx-2">
     {gifts.map((gift, index) => (
       <div key={index} className="w-1/4 px-2">
@@ -66,8 +64,6 @@ const HomePage = () => {
     ))}
   </div>
 </div>
-
-
       </div>
     </div>
   );