Bob AI: Add flip animation effect on hover to all product images in

Merge version_4 into main
2026-02-26 23:11:38 +02:00 · 2026-02-26 21:09:12 +00:00 · 2026-02-26 23:09:04 +02:00 · 2026-02-26 21:07:43 +00:00
3 changed files with 65 additions and 9 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,10 @@
 import type { Metadata } from "next";
-import { Nunito } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
+import { Inter } from "next/font/google";
+import { Open_Sans } from "next/font/google";

-const nunito = Nunito({
-  variable: "--font-nunito",  subsets: ["latin"],
-});

 export const metadata: Metadata = {
  title: "Artisan Bakery | Fresh Baked Goods Daily",  description: "Handcrafted artisanal breads and pastries baked fresh daily with premium ingredients. Order online or visit our bakery for the finest baked goods in town.",  keywords: "bakery, artisan bread, fresh pastries, sourdough, croissants, bagels, homemade baked goods",  metadataBase: new URL("https://example.com"),
@@ -29,6 +27,15 @@ export const metadata: Metadata = {
  }
 };

+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});
+const openSans = Open_Sans({
+  variable: "--font-open-sans",
+  subsets: ["latin"],
+});
+
 export default function RootLayout({
  children,
 }: Readonly<{
@@ -37,9 +44,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body
-          className={`${nunito.variable} antialiased`}
-        >
+        <body className={`${inter.variable} ${openSans.variable} antialiased`}>
          <Tag />
          {children}
        
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-nunito), sans-serif;
+  font-family: var(--font-open-sans), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-nunito), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }
--- a/src/components/sections/product/ProductCardThree.tsx
+++ b/src/components/sections/product/ProductCardThree.tsx
@@ -7,6 +7,8 @@ import CardStack from "@/components/cardStack/CardStack";
 import ProductImage from "@/components/shared/ProductImage";
 import QuantityButton from "@/components/shared/QuantityButton";
 import Button from "@/components/button/Button";
+"use client";
+
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import { useProducts } from "@/hooks/useProducts";
 import { getButtonProps } from "@/lib/buttonUtils";
@@ -75,6 +77,55 @@ interface ProductCardItemProps {
 }

 const ProductCardItem = memo(({
+    product,
+    shouldUseLightText,
+    isFromApi,
+    onBuyClick,
+    cardClassName,
+    imageClassName,
+    cardNameClassName,
+    quantityControlsClassName,
+}: ProductCardItemProps) => {
+    return (
+        <div className={cls("flex flex-col gap-4", cardClassName)}>
+            <div className="relative w-full overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800">
+                <img
+                    src={product.image}
+                    alt={product.name}
+                    className={cls(
+                        "w-full h-full object-cover transition-transform duration-500 ease-out hover:scale-x-[-1]",
+                        imageClassName
+                    )}
+                />
+            </div>
+            <div className="flex flex-col gap-2">
+                <h3 className={cls("font-semibold text-lg", cardNameClassName)}>
+                    {product.name}
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                    {product.description}
+                </p>
+                <div className="flex items-center justify-between mt-2">
+                    <span className="text-xl font-bold">
+                        ${product.price.toFixed(2)}
+                    </span>
+                    {onBuyClick && (
+                        <button
+                            onClick={() => onBuyClick(product.id, product.initialQuantity || 1)}
+                            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                        >
+                            Buy
+                        </button>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardThreeContent = memo(({
    product,
    shouldUseLightText,
    isFromApi,
Author	SHA1	Message	Date
kudindmitriy	0045974a4e	Bob AI: Add flip animation effect on hover to all product images in	2026-02-26 23:11:38 +02:00
bender	e755dfc777	Merge version_4 into main Merge version_4 into main	2026-02-26 21:09:12 +00:00
kudindmitriy	eafcfdc800	Bob AI: change font to Inter + Open Sans	2026-02-26 23:09:04 +02:00
bender	c95aa9ebab	Merge version_3 into main Merge version_3 into main	2026-02-26 21:07:43 +00:00