feat: remove Capitalize component and update Card and Cart components to use direct string manipulation for titles and descriptions

feat: add launch configuration for debugging in VSCode
fix: update Home component to use Tilt with improved speed and gyroscope options

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000/react-shop",
+            "webRoot": "${workspaceFolder}/src"
+        }
+    ]
+}

package-lock.json

@@ -19,7 +19,8 @@
 				"react-router-dom": "^7.9.4",
 				"react-scripts": "^5.0.1",
 				"react-toastify": "^11.0.5",
-				"sass": "^1.93.2"
+				"sass": "^1.93.2",
+				"vanilla-tilt": "^1.8.1"
 			}
 		},
 		"node_modules/@adobe/css-tools": {
@@ -4184,7 +4185,6 @@
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
 			"integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.4.0",
 				"@typescript-eslint/scope-manager": "5.62.0",
@@ -16922,6 +16922,7 @@
 			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
 			"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
 			"license": "(MIT OR CC0-1.0)",
+			"peer": true,
 			"engines": {
 				"node": ">=10"
 			},
@@ -17026,9 +17027,9 @@
 			}
 		},
 		"node_modules/typescript": {
-			"version": "5.9.3",
+			"version": "4.9.5",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-			"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+			"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
 			"license": "Apache-2.0",
 			"peer": true,
 			"bin": {
@@ -17036,7 +17037,7 @@
 				"tsserver": "bin/tsserver"
 			},
 			"engines": {
-				"node": ">=14.17"
+				"node": ">=4.2.0"
 			}
 		},
 		"node_modules/unbox-primitive": {
@@ -17278,6 +17279,12 @@
 			"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
 			"license": "MIT"
 		},
+		"node_modules/vanilla-tilt": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
+			"integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw==",
+			"license": "MIT"
+		},
 		"node_modules/vary": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -17426,6 +17433,7 @@
 			"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
 			"integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/bonjour": "^3.5.9",
 				"@types/connect-history-api-fallback": "^1.3.5",

package.json

@@ -15,6 +15,7 @@
 		"react-router-dom": "^7.9.4",
 		"react-scripts": "^5.0.1",
 		"react-toastify": "^11.0.5",
+		"vanilla-tilt": "^1.8.1",
 		"sass": "^1.93.2"
 	},
 	"scripts": {

src/App.scss

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap");
+// @import url("https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
 
 // Variables
 
@@ -22,455 +22,459 @@ $breakpoints: $xs, $sm, $md, $lg, $xl;
 
 // Mixins
 @mixin layout($breakpoint, $direction: min) {
-  @if $direction == min {
+	@if $direction == min {
-    @media (min-width: $breakpoint) {
+		@media (min-width: $breakpoint) {
-      @content;
+			@content;
-    }
+		}
-  } @else {
+	} @else {
-    @media (max-width: $breakpoint) {
+		@media (max-width: $breakpoint) {
-      @content;
+			@content;
-    }
+		}
-  }
+	}
 
-  // use the custom value if the breakpoint is not part of the pre-defined list
+	// use the custom value if the breakpoint is not part of the pre-defined list
 }
 
 @mixin flex-center {
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  justify-content: center;
+	justify-content: center;
 }
 
 @mixin hover-animation {
-  &:hover {
+	&:hover {
-    transform: scale(1.03);
+		transform: scale(1.03);
-  }
+	}
 }
 
 // reset
 * {
-  padding: 0;
+	padding: 0;
-  margin: 0;
+	margin: 0;
-  box-sizing: border-box;
+	box-sizing: border-box;
-  font-family: "Nanum Gothic Coding", monospace;
+	font-family: "Sansation", sans-serif;
 }
 
 a {
-  text-decoration: none;
+	text-decoration: none;
-  color: $PersianGreen;
+	color: $PersianGreen;
-  @include hover-animation();
+	@include hover-animation();
 }
 
 // layout
 .responsive-layout {
-  display: block;
+	display: block;
-  margin-left: auto;
+	margin-left: auto;
-  margin-right: auto;
+	margin-right: auto;
-  padding: 1rem;
+	padding: 1rem;
-  @include layout($xl, min) {
+	@include layout($xl, min) {
-    max-width: $lg;
+		max-width: $lg;
-  }
+	}
-  @include layout($xl, max) {
+	@include layout($xl, max) {
-    max-width: $lg;
+		max-width: $lg;
-  }
+	}
 
-  @include layout($lg, max) {
+	@include layout($lg, max) {
-    max-width: $md;
+		max-width: $md;
-  }
+	}
 
-  @include layout($md, max) {
+	@include layout($md, max) {
-    max-width: $sm;
+		max-width: $sm;
-  }
+	}
-  @include layout($sm, max) {
+	@include layout($sm, max) {
-    max-width: $xs;
+		max-width: $xs;
-  }
+	}
 }
 
 // spinner
 .spinner {
-  width: 50px;
+	width: 50px;
-  height: 50px;
+	height: 50px;
-  padding: 8px;
+	padding: 8px;
-  // aspect-ratio: 1;
+	// aspect-ratio: 1;
-  border-radius: 50%;
+	border-radius: 50%;
-  background: $PersianGreen;
+	background: $PersianGreen;
-  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+	--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
-  -webkit-mask: var(--_m);
+	-webkit-mask: var(--_m);
-  mask: var(--_m);
+	mask: var(--_m);
-  -webkit-mask-composite: source-out;
+	-webkit-mask-composite: source-out;
-  mask-composite: subtract;
+	mask-composite: subtract;
-  animation: spin 1s infinite linear;
+	animation: spin 1s infinite linear;
 }
 
 @keyframes spin {
-  to {
+	to {
-    transform: rotate(1turn);
+		transform: rotate(1turn);
-  }
+	}
 }
 
 // navbar
 .navbar-background {
-  background-color: $OuterSpaceCrayola;
+	background-color: $OuterSpaceCrayola;
 }
 
 .navbar {
-  height: $NavbarHeight;
+	height: $NavbarHeight;
-  align-items: center;
+	align-items: center;
-  @extend .responsive-layout;
+	@extend .responsive-layout;
 
-  .title {
+	.title {
-    @include hover-animation();
+		@include hover-animation();
-    font-size: 2rem;
+		font-size: 2rem;
-    float: left;
+		float: left;
-    color: $Cultured;
+		color: $Cultured;
-    @include layout($md, max) {
+		@include layout($md, max) {
-      font-size: 1.8rem;
+			font-size: 1.8rem;
-    }
+		}
-    @include layout($sm, max) {
+		@include layout($sm, max) {
-      font-size: 1.5rem;
+			font-size: 1.5rem;
-    }
+		}
-  }
+	}
 
-  .nav-bag {
+	.nav-bag {
-    float: right;
+		float: right;
-    display: flex;
+		display: flex;
-    align-items: center;
+		align-items: center;
-    color: $Cultured;
+		color: $Cultured;
-    svg {
+		svg {
-      color: $Cultured;
+			color: $Cultured;
-      width: 20px;
+			width: 20px;
-      height: 20px;
+			height: 20px;
-    }
+		}
 
-    .nav-quantity {
+		.nav-quantity {
-      @include flex-center();
+			@include flex-center();
-      height: 25px;
+			height: 36px;
-      width: 25px;
+			width: 36px;
-      background-color: $PersianGreen;
+			background-color: $OuterSpaceCrayola;
+			border: 1px solid $PersianGreen;
 
-      margin-left: 5px;
+			margin-left: 5px;
-      border-radius: 50%;
+			border-radius: 50%;
-      font-size: 14px;
+			font-size: 16px;
-    }
+		}
-  }
+	}
 }
 
 // footer
 .footer {
-  @include flex-center();
+	@include flex-center();
-  height: $FooterHeight;
+	height: $FooterHeight;
-  color: $Cultured;
+	color: $Cultured;
-  background-color: $OuterSpaceCrayola;
+	background-color: $OuterSpaceCrayola;
 }
 
 // home
 .home-container {
-  display: flex;
+	display: flex;
-  flex-wrap: wrap;
+	flex-wrap: wrap;
-  justify-content: space-evenly;
+	justify-content: space-evenly;
-  min-height: calc(100vh - $NavbarHeight - $FooterHeight - 2rem);
+	min-height: calc(100vh - $NavbarHeight - $FooterHeight - 2rem);
-  h2 {
+	h2 {
-    width: 100%;
+		width: 100%;
-  }
+	}
 }
 
 // card
 .card-list {
-  margin: 1rem auto;
+	margin: 1rem auto;
-  padding: 1rem;
+	padding: 1rem;
-  border: 1px solid $DeepSpaceSparkle;
+	border: 1px solid $DeepSpaceSparkle;
-  border-radius: 4px;
+	border-radius: 4px;
-  width: 250px;
+	width: 250px;
-  max-width: 100%;
+	max-width: 100%;
-  min-height: 400px;
+	min-height: 400px;
-  display: flex;
+	display: flex;
-  flex-direction: column;
+	flex-direction: column;
-  justify-content: space-between;
+	justify-content: space-between;
 
-  @include hover-animation();
+	.card-container {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		min-height: 480px;
+	}
 
-  button {
+	button {
-    border: 1px solid $PersianGreen;
+		border-radius: 20px;
-    border-radius: 20px;
+		outline: none;
-    outline: none;
+		background-color: $OuterSpaceCrayola;
-    // background-color: $Cultured;
+		color: $Cultured;
-    // background-color: $PersianGreen;
+		font-size: 1rem;
-    // color: $Cultured;
+		cursor: pointer;
-    color: $PersianGreen;
+		height: 1.5rem;
-    font-size: 1.2rem;
+		margin-top: 0.5rem;
-    font-weight: 700;
+		letter-spacing: 1.1px;
-    cursor: pointer;
+		width: 100%;
-    height: 1.5rem;
+	}
-    margin-top: 0.5rem;
-    letter-spacing: 1.1px;
-    width: 100%;
-  }
 
-  img {
+	img {
-    max-width: 100%;
+		max-width: 100%;
-    max-height: 10rem;
+		max-height: 10rem;
-    min-height: 8rem;
+		min-height: 8rem;
-    margin-left: auto;
+		margin-left: auto;
-    margin-right: auto;
+		margin-right: auto;
-  }
+	}
-  .image-container {
+	.image-container {
-    text-align: center;
+		text-align: center;
-  }
+	}
 
-  .title {
+	.title {
-    font-size: 1.2rem;
+		font-size: 1.2rem;
-    max-width: 100%;
+		max-width: 100%;
-  }
+	}
 
-  .description {
+	.description {
-    font-size: 12px;
+		font-size: 12px;
-    line-height: 1.5;
+		line-height: 1.5;
-  }
+		flex-grow: 1;
+	}
 
-  .category,
+	.category,
-  .price,
+	.price,
-  .discount,
+	.discount,
-  .stock {
+	.stock {
-    display: flex;
+		display: flex;
-    justify-content: space-between;
+		justify-content: space-between;
-    flex-wrap: wrap;
+		flex-wrap: wrap;
-    font-size: 14px;
+		font-size: 14px;
-    margin: 0.2rem 0;
+		margin: 0.2rem 0;
-  }
+	}
 
-  .category {
+	.category {
-    span {
+		span {
-      background-color: $OuterSpaceCrayola;
+			background-color: $OuterSpaceCrayola;
-      color: $Cultured;
+			color: $Cultured;
-      font-size: 10px;
+			font-size: 10px;
-      border-radius: 20px;
+			border-radius: 20px;
-      padding: 0.2rem 0.5rem;
+			padding: 0.2rem 0.5rem;
-      // border-bottom: 1px solid #335c67;
+			// border-bottom: 1px solid #335c67;
-    }
+		}
-  }
+	}
 }
 
 // cart
 .cart-container {
-  min-height: calc(100vh - $NavbarHeight - $FooterHeight - 2rem);
+	min-height: calc(100vh - $NavbarHeight - $FooterHeight - 2rem);
 
-  .titles {
+	.titles {
-    margin: 2rem 0 1rem 0;
+		margin: 2rem 0 1rem 0;
-    border-bottom: 1px solid $OuterSpaceCrayola;
+		border-bottom: 1px solid $OuterSpaceCrayola;
-    .product-title {
+		.product-title {
-      padding-left: 0.5rem;
+			padding-left: 0.5rem;
-    }
+		}
-    .total-title {
+		.total-title {
-      padding-right: 0.5rem;
+			padding-right: 0.5rem;
-      justify-self: right;
+			justify-self: right;
-    }
+		}
-  }
+	}
 
-  .cart-item {
+	.cart-item {
-    margin-top: 2rem;
+		margin-top: 2rem;
-    border-bottom: 0.5px solid $OuterSpaceCrayola;
+		border-bottom: 0.5px solid $OuterSpaceCrayola;
 
-    .cart-product {
+		.cart-product {
-      display: flex;
+			display: flex;
 
-      img {
+			img {
-        width: 100px;
+				width: 100px;
-        max-width: 100%;
+				max-width: 100%;
-        max-height: 100px;
+				max-height: 100px;
-        margin-right: 1rem;
+				margin-right: 1rem;
-      }
+			}
-      h3 {
+			h3 {
-        font-weight: 400;
+				font-weight: 400;
-        margin-bottom: .3rem;
+				margin-bottom: 0.3rem;
-      }
+			}
-      button {
+			button {
-        border: none;
+				border: none;
-        outline: none;
+				outline: none;
-        cursor: pointer;
+				cursor: pointer;
-        margin: 1rem;
+				margin: 1rem;
-        background: none;
+				background: none;
-        color: $SolidPink;
+				color: $SolidPink;
-        &:hover {
+				&:hover {
-          color: $PersianGreen;
+					color: $PersianGreen;
-        }
+				}
-      }
+			}
-    }
+		}
 
-    .quantity {
+		.quantity {
-      display: flex;
+			display: flex;
-      align-items: flex-start;
+			align-items: flex-start;
-      justify-content: center;
+			justify-content: center;
-      width: 130px;
+			width: 130px;
-      max-width: 100%;
+			max-width: 100%;
-      border: 0.5px solid $OuterSpaceCrayola;
+			border: 0.5px solid $OuterSpaceCrayola;
-      border-radius: 5px;
+			border-radius: 5px;
 
-      button {
+			button {
-        border: none;
+				border: none;
-        outline: none;
+				outline: none;
-        background: none;
+				background: none;
-        padding: 0.7rem 1.5rem;
+				padding: 0.7rem 1.5rem;
-        cursor: pointer;
+				cursor: pointer;
-        // font-size: 2rem;
+				// font-size: 2rem;
-      }
+			}
-      .count {
+			.count {
-        padding: 0.7rem 0;
+				padding: 0.7rem 0;
-      }
+			}
-    }
+		}
-    .total-price {
+		.total-price {
-      justify-self: right;
+			justify-self: right;
-      font-weight: 700;
+			font-weight: 700;
-    }
+		}
-  }
+	}
 
-  .cart-item,
+	.cart-item,
-  .titles {
+	.titles {
-    display: grid;
+		display: grid;
-    align-items: center;
+		align-items: center;
-    grid-template-columns: 3fr 1fr 1fr 1fr;
+		grid-template-columns: 3fr 1fr 1fr 1fr;
-    column-gap: 0.5rem;
+		column-gap: 0.5rem;
-    max-width: 100%;
+		max-width: 100%;
-  }
+	}
 
-  .cart-summary {
+	.cart-summary {
-    display: flex;
+		display: flex;
-    justify-content: space-between;
+		justify-content: space-between;
-    align-items: flex-start;
+		align-items: flex-start;
-    padding-top: 2rem;
+		padding-top: 2rem;
 
-    .clear-cart {
+		.clear-cart {
-      @include hover-animation();
+			@include hover-animation();
-      width: 130px;
+			width: 130px;
-      max-width: 100%;
+			max-width: 100%;
-      height: 40px;
+			height: 40px;
-      border-radius: 5px;
+			border-radius: 5px;
-      font-weight: 400;
+			font-weight: 400;
-      letter-spacing: 1.1px;
+			letter-spacing: 1.1px;
-      border: 0.5px solid $SolidPink;
+			background-color: $SolidPink;
-      color: $SolidPink;
+			border: none;
-      background: none;
+			color: $Cultured;
-      outline: none;
+			outline: none;
-      cursor: pointer;
+			cursor: pointer;
-      font-size: 1.2rem;
+			font-size: 1.2rem;
-    }
+		}
 
-    .cart-checkout {
+		.cart-checkout {
-      width: 270px;
+			width: 270px;
-      max-width: 100%;
+			max-width: 100%;
-      .subtotal {
+			.subtotal {
-        display: flex;
+				display: flex;
-        justify-content: space-between;
+				justify-content: space-between;
-        font-size: 1.2rem;
+				font-size: 1.2rem;
-        font-weight: 700;
+				font-weight: 700;
-        .amount {
+				.amount {
-          font-weight: 700;
+					font-weight: 700;
-        }
+				}
-      }
+			}
 
-      button {
+			button {
-        @include hover-animation();
+				@include hover-animation();
-        border: none;
+				border: none;
-        border-radius: 5px;
+				border-radius: 50px;
-        outline: none;
+				outline: none;
-        background-color: $OuterSpaceCrayola;
+				background-color: $OuterSpaceCrayola;
-        color: $Cultured;
+				color: $Cultured;
-        font-size: 1.2rem;
+				font-size: 1.2rem;
-        font-weight: 700;
+				font-weight: 700;
-        cursor: pointer;
+				cursor: pointer;
-        height: 1.5rem;
+				height: 1.5rem;
-        margin-top: 0.5rem;
+				margin-top: 0.5rem;
-        letter-spacing: 1.1px;
+				letter-spacing: 1.1px;
-        width: 100%;
+				width: 100%;
-      }
+			}
-    }
+		}
-  }
+	}
 
-  .continue-shopping {
+	.continue-shopping {
-    @include flex-center();
+		@include flex-center();
-  }
+	}
-  .no-cart-items {
+	.no-cart-items {
-    @include flex-center();
+		@include flex-center();
-    flex-direction: column;
+		flex-direction: column;
-    min-height: calc(100vh - $NavbarHeight - $FooterHeight - 4rem);
+		min-height: calc(100vh - $NavbarHeight - $FooterHeight - 4rem);
-    p {
+		p {
-      font-size: 1.4rem;
+			font-size: 1.4rem;
-    }
+		}
-  }
+	}
 
-  @include layout($sm, max) {
+	@include layout($sm, max) {
-    .titles {
+		.titles {
-      display: none;
+			display: none;
-    }
+		}
-    .cart-item {
+		.cart-item {
-      display: flex;
+			display: flex;
-      flex-direction: column;
+			flex-direction: column;
-      justify-content: space-between;
+			justify-content: space-between;
-      min-height: 20rem;
+			min-height: 20rem;
-      border: 0.5px solid $OuterSpaceCrayola;
+			border: 0.5px solid $OuterSpaceCrayola;
-      border-radius: 4px;
+			border-radius: 4px;
-      padding: 1rem;
+			padding: 1rem;
-      .cart-product {
+			.cart-product {
-        flex-direction: column;
+				flex-direction: column;
-        justify-content: space-between;
+				justify-content: space-between;
-        img {
+				img {
-          margin-left: auto;
+					margin-left: auto;
-          margin-right: auto;
+					margin-right: auto;
-          width: auto;
+					width: auto;
-          max-height: 100%;
+					max-height: 100%;
-        }
+				}
-        & > div > p {
+				& > div > p {
-          margin-top: 1rem;
+					margin-top: 1rem;
-        }
+				}
-        button{
+				button {
-          font-size: 1rem;
+					font-size: 1rem;
-          margin-left: auto;
+					margin-left: auto;
-          margin-right: auto;
+					margin-right: auto;
-        }
+				}
-      }
+			}
-      .price{
+			.price {
-        margin-bottom: 1rem;
+				margin-bottom: 1rem;
-        &::before{
+				&::before {
-          content: "Price:";
+					content: "Price:";
-        }
+				}
-      }
+			}
-      .total-price{
+			.total-price {
-        margin-top: 1rem;
+				margin-top: 1rem;
-        &::before{
+				&::before {
-          content: "Total Price:";
+					content: "Total Price:";
-        }
+				}
-      }
+			}
-    }
+		}
 
-    .cart-summary {
+		.cart-summary {
-      flex-direction: column;
+			flex-direction: column;
-      .clear-cart {
+			.clear-cart {
-        margin-bottom: 2rem;
+				margin-bottom: 2rem;
-        align-self: center;
+				align-self: center;
-      }
+			}
-    }
+		}
-  }
+	}
 }
 
 // not found
 .not-found {
-  @include flex-center();
+	@include flex-center();
-  flex-direction: column;
+	flex-direction: column;
-  color: $OuterSpaceCrayola;
+	color: $OuterSpaceCrayola;
-  min-height: calc(100vh - $NavbarHeight - $FooterHeight);
+	min-height: calc(100vh - $NavbarHeight - $FooterHeight);
-  h2 {
+	h2 {
-    height: 48px;
+		height: 48px;
-  }
+	}
-  p {
+	p {
-    font-size: 1.4rem;
+		font-size: 1.4rem;
-  }
+	}
 }
 
 // back to home button
 .back-to-home {
-  font-size: 1.4rem;
+	font-size: 1.4rem;
-  margin-top: 3rem;
+	margin-top: 3rem;
+	color: $PersianGreen;
 }
 
 .go-to-cart {
-  font-size: 1rem;
+	font-size: 1rem;
 }

src/components/Capitalize.jsx

@@ -1,11 +0,0 @@
-
-const Capitalize = ({ children, text })=> {
-  // ensure we always work with a string
-  const value = (children ?? "").toString();
-  if (!value) return null;
-
-  const capitalized = value.replace(/\b\w/g, (c) => c.toUpperCase());
-  return <>{capitalized}</>;
-}
-
-export default Capitalize

src/components/Card.jsx

@@ -1,8 +1,6 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from "react-redux";
-import { addToCart, getTotals } from '../features/cartSlice';
+import { addToCart, getTotals } from "../features/cartSlice";
-
-import  Capitalize  from './Capitalize';
 
 const Card = ({ product }) => {
 	const dispatch = useDispatch();
@@ -15,34 +13,34 @@ const Card = ({ product }) => {
 	const handleAddToCart = (product) => {
 		dispatch(addToCart(product));
 	};
-
 	return (
-		<>
+		<div className="card-container">
-			<h3 className='title'>{Capitalize(product?.title  ?? "")}</h3>
+			<h3 className="title">{product.title}</h3>
-			<div className='image-container'>
+			<div className="image-container">
-				<img src={product.images[0]} alt={Capitalize(product?.title ?? "")} />
+				<img src={product.images[0]} alt={product.title} />
 			</div>
-			<div className='category'>
+			<div className="category">
-				<span>{Capitalize(product?.category ?? "")}</span>
+				<span>{product.category}</span>
-				<span>{Capitalize(product?.brand ?? "")}</span>
+				<span>{product.availabilityStatus}</span>
 			</div>
-			<p className='description'>{Capitalize(product?.description ?? "")}</p>
+			<p className="description">{product?.description}</p>
+
 			<div>
-				<p className='discount'>
+				<p className="discount">
-					<span>Discount: </span>
+					<span>Discount:</span>
-					<span>{product.discountPercentage}%</span>
+					<span>{Math.round(product.discountPercentage)} %</span>
 				</p>
-				<p className='price'>
+				<p className="stock">
+					<span>Stock:</span>
+					<span>{product.stock}</span>
+				</p>
+				<p className="price">
 					<span>Price:</span>
 					<span>€{product.price}</span>
 				</p>
-				<p className='stock'>
-					<span>Stoc:</span>
-					<span>{product.stock}</span>
-				</p>
 			</div>
 			<button onClick={() => handleAddToCart(product)}>Add to cart</button>
-		</>
+		</div>
 	);
 };
 

src/components/Cart.jsx

@@ -8,7 +8,6 @@ import {
 	getTotals,
 } from '../features/cartSlice';
 
-import  Capitalize  from './Capitalize';
 import BackHomeButton from './BackHomeButton';
 
 const Cart = () => {
@@ -55,7 +54,7 @@ const Cart = () => {
 									<div className='cart-product'>
 										<img src={cartItem.images[0]} alt={cartItem.title} />
 										<div>
-											<h3>{Capitalize(cartItem.title)}</h3>
+											<h3>{cartItem.title}</h3>
 											<p>{cartItem.description}</p>
 											<button onClick={() => handleRemoveFromCart(cartItem)}>
 												Remove
@@ -73,7 +72,8 @@ const Cart = () => {
 										</button>
 									</div>
 									<div className='total-price'>
-										€{cartItem.price * cartItem.cartQuantity}
+										
+										€{Math.round((cartItem.price * cartItem.cartQuantity) * 100)/100}
 									</div>
 								</div>
 							))}
@@ -85,9 +85,9 @@ const Cart = () => {
 							<div className='cart-checkout'>
 								<div className='subtotal'>
 									<span>Subtotal</span>
-									<span className='amount'>€{cart.cartTotalAmount}</span>
+									<span className='amount'>€{Math.round(cart.cartTotalAmount * 100)/100}</span>
 								</div>
-								<button>Checkout</button>
+								<button className='button' >Checkout</button>
 							</div>
 						</div>
 						<div className='continue-shopping'>

src/components/Home.jsx

@@ -1,23 +1,35 @@
-import { useGetProductsQuery } from '../features/productsApi';
+import { useGetProductsQuery } from "../features/productsApi";
-import Card from './Card';
+import Tilt from "./Tilt";
+import Card from "./Card";
 
 const Home = () => {
 	const { data, error, isLoading } = useGetProductsQuery();
 
 	return (
-		<div className='responsive-layout'>
+		<div className="responsive-layout">
-			<section className='home-container'>
+			<section className="home-container">
-			<h2>Products</h2>
+				<h2>Products</h2>
 				{isLoading ? (
-					<p className='spinner'></p>
+					<p className="spinner"></p>
 				) : error ? (
 					<p>An error occoured: {error} </p>
 				) : (
 					<>
 						{data.products?.map((product) => (
-							<article className='card-list' key={product.id}>
+							<Tilt
-								<Card product={product} />
+								key={product.id}
-							</article>
+								options={{
+									reverse: true,
+									speed: 300,
+			
+									easing: "cubic-bezier(.09,.67,.54,.76)",
+									gyroscope: true,
+								}}>
+								<article className="card-list" >
+							
+									<Card  product={product} />
+								</article>
+							</Tilt>
 						))}
 					</>
 				)}

src/components/Tilt.jsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useRef } from "react";
+
+import VanillaTilt from "vanilla-tilt";
+
+const Tilt = (props) => {
+  const { options, children } = props;
+  const tilt = useRef(null);
+
+  useEffect(() => {
+    VanillaTilt.init(tilt.current, options);
+  }, [options]);
+
+  return <div ref={tilt}>{children}</div>;
+};
+
+export default Tilt;

src/features/cartSlice.js

@@ -1,7 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { toast } from 'react-toastify';
-import Capitalize  from '../components/Capitalize';
-import GoToCartButton from '../components/GoToCartButton';
 
 const initialState = {
 	cartItems: localStorage.getItem('cartItems')
@@ -27,29 +25,24 @@ const cartSlice = createSlice({
 			if (itemIndex >= 0) {
 				state.cartItems[itemIndex].cartQuantity += 1;
 
-				let multipleItemsText = `Increased ${Capitalize(
+				let multipleItemsText = `Increased ${
 					state.cartItems[itemIndex].title
-				)} quantity to ${state.cartItems[itemIndex].cartQuantity}`;
+				} quantity to ${state.cartItems[itemIndex].cartQuantity}`;
 
-
+				// Show a toast when quantity is increased
-
+				if (window.location.href.indexOf('cart') !== -1) {
-				toast.info(
+					toast.info(multipleItemsText, toastifyOptions);
-					window.location.href.indexOf('cart') !== -1 ? (
+				} else {
-						multipleItemsText
+					toast.info(multipleItemsText, toastifyOptions);
-					) : (
+					// Optionally, trigger a UI update to show GoToCartButton elsewhere
-						<GoToCartButton text={multipleItemsText} />
+				}
-					),
-					toastifyOptions
-				);
 			} else {
 				const tempProduct = { ...action.payload, cartQuantity: 1 };
 				state.cartItems.push(tempProduct);
-				let firstItemText = `${Capitalize(action.payload.title)} added to cart`
+				let firstItemText = `${action.payload.title} added to cart`
 
-				toast.success(
+				toast.success(firstItemText, toastifyOptions);
-					<GoToCartButton text={firstItemText} />,
+				// Optionally, trigger a UI update to show GoToCartButton elsewhere
-					toastifyOptions
-				);
 			}
 			localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
 		},
@@ -59,7 +52,7 @@ const cartSlice = createSlice({
 			);
 			state.cartItems = nextCartItems;
 			localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
-			toast.error(`${Capitalize(action.payload.title)} removed from cart`, toastifyOptions);
+			toast.error(`${action.payload.title} removed from cart`, toastifyOptions);
 		},
 		decreaseCart(state, action) {
 			const itemIndex = state.cartItems.findIndex(
@@ -68,7 +61,7 @@ const cartSlice = createSlice({
 			if (state.cartItems[itemIndex].cartQuantity > 1) {
 				state.cartItems[itemIndex].cartQuantity -= 1;
 				toast.info(
-					`Decreased ${Capitalize(action.payload.title)} cart quantity`,
+					`Decreased ${action.payload.title} cart quantity`,
 					toastifyOptions
 				);
 			} else if (state.cartItems[itemIndex].cartQuantity === 1) {
@@ -77,26 +70,26 @@ const cartSlice = createSlice({
 				);
 				state.cartItems = nextCartItems;
 				toast.error(
-					`${Capitalize(action.payload.title)} removed from cart`,
+					`${action.payload.title} removed from cart`,
 					toastifyOptions
 				);
 			}
 			localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
 		},
-		clearCart(state, action) {
+		clearCart(state) {
 			state.cartItems = [];
 			toast.error(`Cart cleared`, toastifyOptions);
 			localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
 		},
 		getTotals(state, action) {
-			let { total, quantity } = state.cartItems.reduce(
+			let { total: cartTotalAmount, quantity: cartTotalQuantity } = state.cartItems.reduce(
 				(cartTotal, cartItem) => {
 					const { price, cartQuantity } = cartItem;
 					const itemTotal = price * cartQuantity;
-
+		
 					cartTotal.total += itemTotal;
 					cartTotal.quantity += cartQuantity;
-
+		
 					return cartTotal;
 				},
 				{
@@ -104,8 +97,8 @@ const cartSlice = createSlice({
 					quantity: 0,
 				}
 			);
-			state.cartTotalQuantity = quantity;
+			state.cartTotalQuantity = cartTotalQuantity;
-			state.cartTotalAmount = total;
+			state.cartTotalAmount = cartTotalAmount;
 		},
 	},
 });