Initial commit

2026-03-02 13:22:47 +05:30
commit e4c373f050
36 changed files with 7304 additions and 0 deletions
@@ -0,0 +1,123 @@
+.product-card {
+	background: white;
+	border: 0.0625rem solid var(--gray-200);
+	border-radius: var(--radius-xl);
+	overflow: hidden;
+	cursor: pointer;
+	transition: all 0.25s;
+	position: relative;
+}
+
+.product-card-link {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+}
+
+.product-card:hover {
+	border-color: var(--blue);
+	box-shadow: 0 0.5rem 1.5rem rgba(26, 111, 212, 0.12);
+	transform: translateY(-0.25rem);
+}
+
+.product-img {
+	height: 18rem;
+	background: var(--gray-50); /* neutral fallback while image loads */
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	overflow: hidden;
+}
+
+.product-img img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	display: block;
+	transition: transform 0.35s ease;
+}
+
+.product-card:hover .product-img img {
+	transform: scale(1.05); /* subtle zoom on hover */
+}
+
+.product-disc {
+	position: absolute;
+	top: var(--space-3);
+	left: var(--space-3);
+	background: var(--red);
+	color: white;
+	font-size: var(--text-xs);
+	font-weight: 800;
+	padding: var(--space-1) var(--space-2);
+	border-radius: var(--radius-sm);
+	z-index: 3;
+	pointer-events: none;
+}
+
+.product-body {
+	padding: var(--space-4);
+}
+.product-name {
+	font-size: var(--text-md);
+	font-weight: 700;
+	color: var(--gray-800);
+	margin-bottom: var(--space-2);
+	line-height: 1.4;
+}
+.product-rating {
+	font-size: var(--text-sm);
+	color: #f4b400;
+	margin-bottom: var(--space-2);
+}
+
+.product-price {
+	display: flex;
+	align-items: baseline;
+	gap: var(--space-2);
+	margin-bottom: var(--space-3);
+}
+.product-price .rp-now {
+	font-size: var(--text-xl);
+	font-weight: 800;
+	color: var(--blue);
+}
+.product-price .rp-old {
+	font-size: var(--text-md);
+	color: var(--gray-400);
+	text-decoration: line-through;
+}
+
+.product-add-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	place-self: end;
+	gap: var(--space-2);
+	width: 100%;
+	background: var(--blue-light);
+	color: var(--blue);
+	border: none;
+	border-radius: var(--radius-md);
+	padding: var(--space-3);
+	font-size: var(--text-md);
+	font-weight: 700;
+	cursor: pointer;
+	font-family: inherit;
+	transition: all 0.25s ease;
+	position: relative;
+	overflow: hidden;
+	position: relative;
+	z-index: 2;
+}
+
+.product-add-btn svg {
+	width: 18px;
+	height: 18px;
+}
+
+.product-add-btn:hover {
+	background: var(--blue);
+	color: white;
+}