Modify main page styling

app/page.tsx

@@ -2,7 +2,7 @@ import Error from 'app/error';
 import Footer from 'components/layout/footer';
 import { Navbar } from 'components/layout/navbar';
 import Search from 'components/layout/navbar/search';
-import PriceBoxes from 'components/price-boxes';
+import { PriceBox } from 'components/price-box';
 import { getCollectionProducts } from 'lib/shopify';
 import Image from 'next/image';
 
@@ -24,28 +24,25 @@ export default async function HomePage() {
     <>
       <section className="relative">
         <Navbar />
-        <div className="relative w-screen">
+        <div className={'relative h-screen w-screen'}>
           <Image
             src={
               products[0].featuredImage.url || '' //Todo: default image
             }
             alt={products[0].featuredImage.altText || 'Main product'}
-            width={products[0].featuredImage.width}
-            height={products[0].featuredImage.height}
+            fill
+            objectFit="cover"
             quality={100}
             priority
           />
         </div>
-        <div className="absolute bottom-0 flex w-full flex-col items-center text-lightText">
+        <div className="absolute bottom-20 flex w-full flex-col items-center text-lightText">
           <h1 className="text-xl">{products[0].title}</h1>
           <span className="mb-6 mt-1 text-sm text-lightText/80">Read more</span>
-          <PriceBoxes
-            products={[
-              { title: 'Box of 20', price: '£2,460' },
-              { title: 'Single Cigar', price: '£120' }
-            ]}
-            totalWidth={384}
-          />
+          <div className={`text-mainBG flex w-[384px] justify-center gap-[10px]`}>
+            <PriceBox title="Box of 20" price={2460} />
+            <PriceBox title="Single Cigar" price={120} />
+          </div>
         </div>
       </section>
       <section className="flex">

components/price-box.tsx

@@ -0,0 +1,13 @@
+interface PriceBoxProps {
+  title: string;
+  price: number;
+}
+
+export const PriceBox = ({ title, price }: PriceBoxProps) => {
+  return (
+    <div className="flex w-full flex-col items-center gap-[5px] rounded bg-black/50 p-2">
+      <p>{title}</p>
+      <p className="text-xs text-lightText/80">£{price.toLocaleString('en-GB')}</p>
+    </div>
+  );
+};

components/price-boxes.tsx

@@ -1,29 +0,0 @@
-interface PriceBoxesProps {
-  products: { title: string; price: string }[];
-  totalWidth: number;
-}
-
-const PriceBoxes = ({ products, totalWidth }: PriceBoxesProps) => {
-  return (
-    <div className={`text-mainBG flex w-[${totalWidth}px] justify-center gap-[10px]`}>
-      {products.map(({ title, price }) => (
-        <PriceBox title={title} price={price} />
-      ))}
-    </div>
-  );
-};
-export default PriceBoxes;
-
-interface PriceBoxProps {
-  title: string;
-  price: string;
-}
-
-const PriceBox = ({ title, price }: PriceBoxProps) => {
-  return (
-    <div className="flex w-full flex-col items-center gap-[5px] rounded bg-black/50">
-      <p>{title}</p>
-      <p className="text-xs text-lightText/80">{price}</p>
-    </div>
-  );
-};