Instable features tested and found to be working, stable merge onto main

src/components/DisplayProduct.js

-import React from 'react';
+import React from "react";
+import Image from "next/image";
+import SplashCardContainer from "./SplashCardContainer";
 
 function DisplayProduct(props) {
+  const radius = 50;
+  const circumference = 2 * Math.PI * radius;
+  const segmentLength = (circumference / 4) * (props.product.tasteClockBitter / 3); // convert value
   return (
     <div>
-      <h1>{props.product.name}</h1>
-      <p>{props.product.description}</p>
-      <p>{props.product.price}</p>
+      <div className="productContent flex flex-col md:flex-row lg:flex-row h-screen">
+        <div className="product card flex w-full md:w-1/3 lg:w-1/3 flex-col items-center justify-evenly">
+          <div className="productImage h-1/2 flex justify-center flex-col">
+            <div className="h-full flex justify-center mb-3">
+              <Image
+                src={
+                  "https://product-cdn.systembolaget.se/productimages/" +
+                  props.product.productId +
+                  "/" +
+                  props.product.productId +
+                  "_400.png"
+                }
+                className="flex flex-col justify-center w-auto self-center items-center hover:scale-105 ease-in duration-75 max-h-full"
+                width={300}
+                height={300}
+              />
+            </div>
+            <h2 className="text-2xl flex self-center">
+              {props.product.productNameBold}
+            </h2>
+            <h2 className="text-2xl font-thin self-center">
+              {props.product.productNameThin + " "}
+              {props.product.vintage}
+            </h2>
+          </div>
+          <div className="info h-1/3 justify-around flex flex-col border-dotted border-tertiary border-t-8 w-full border-opacity-10">
+            <div className="priceContainer flex flex-row justify-evenly">
+              <h2 className="text-2xl self-center font-extrabold">
+                {props.product.priceInclVat + ":-"}
+              </h2>
+              <h2 className="text-xl self-center font-light">
+                {props.product.comparisonPrice + "kr/l"}
+              </h2>
+            </div>
+            <div className="text-xl productInfo flex flex-row justify-evenly">
+              <h2>{props.product.packagingLevel1}</h2>
+              <h2>{props.product.volume + " ml"}</h2>
+              <h2>{props.product.alcoholPercentage + " % vol"}</h2>
+            </div>
+            <div className="producedContainer flex justify-center">
+              <h2 className="text-sm self-center font-light">
+                {"Tillverkad av " +
+                  props.product.producerName +
+                  " i " +
+                  props.product.country +
+                  ", " +
+                  props.product.originLevel1 +
+                  ", "}
+                {props.product.originLevel2}
+              </h2>
+            </div>
+          </div>
+        </div>
+        <div className="detailedInformation card md:w-2/3 lg:w-2/3 w-full flex items-center flex-col md:flex-row lg:flex-row">
+          <div className="tasteDescription h-full flex-row w-5/6 justify-start card">
+            <h2 className="text-2xl flex font-bold justify-start mt-4">
+              Smakbeskrivning
+            </h2>
+            <h2 className="text-xl flex font-light mb-10">
+              {props.product.taste
+                ? props.product.taste
+                : "Denna produkt saknar smakbeskrivning"}
+            </h2>
+            <h2 className="text-2xl flex font-bold justify-start">Arom</h2>
+            <h2 className="text-xl flex font-light mb-10">
+              {props.product.aroma
+                ? props.product.aroma
+                : "Denna produkt saknar doftbeskrivning"}
+            </h2>
+            <h2 className="text-2xl flex font-bold justify-start">
+              Användning
+            </h2>
+            <h2 className="text-xl flex font-light">
+              {props.product.usage
+                ? props.product.aroma
+                : "Denna produkt saknar användningstext"}
+            </h2>
+            <p className="didYouKnow font-thin">
+              {props.product.didYouKnowInformation}
+            </p>
+          </div>
+          <div className="symbols w-1/6 h-full">
+            {//<TasteClock value={props.product.tasteclockBitter} />
+}
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
 
-export default DisplayProduct;
\ No newline at end of file
+export default DisplayProduct;