Fix: gambar produk)

2026-06-02 08:52:18 +07:00 · 2026-06-02 08:52:18 +07:00 · 5ab8be5806
parent ed2afaf941
commit 5ab8be5806
6 changed files with 109 additions and 35 deletions
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@ -5,7 +5,7 @@ import { Leaf, Mail, Phone, MapPin, LucideProps } from 'lucide-react'
 type IconComponent = React.FC<LucideProps>

 interface LinkColData { title: string; links: string[] }
-interface ContactData { Icon: IconComponent; text: string }
+interface ContactData { Icon: IconComponent; text: string; link?: string }

 // ── data ─────────────────────────────────────────────────────────────────────
 const LINK_COLS: LinkColData[] = [
@ -13,9 +13,9 @@ const LINK_COLS: LinkColData[] = [
 ]

 const CONTACT_ITEMS: ContactData[] = [
-  { Icon: Phone, text: '+62 812-3456-7890' },
-  { Icon: Mail, text: 'info@javaherbal.id' },
-  { Icon: MapPin, text: 'Ambulu, Jawa Timur' },
+  { Icon: Phone, text: '+62 812-3456-7890', link: 'https://wa.me/6281234567890' },
+  { Icon: Mail, text: 'info@javaherbal.id', link: 'mailto:info@javaherbal.id' },
+  { Icon: MapPin, text: 'Ambulu, Jawa Timur', link: 'https://maps.app.goo.gl/wzSLJPGhoWXXByG49?g_st=aw' },
 ]

 const LEGAL_LINKS = ['Kebijakan Privasi', 'Syarat & Ketentuan', 'Kebijakan Cookie']
@ -61,13 +61,38 @@ function LinkCol({ title, links }: LinkColData) {
  )
 }

-function ContactRow({ Icon, text }: ContactData) {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '12px' }}>
-      <Icon size={15} color="#7ab648" />
-      <span style={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.84rem' }}>{text}</span>
+function ContactRow({ Icon, text, link }: ContactData) {
+  const [hovered, setHovered] = useState(false)
+  
+  const content = (
+    <div 
+      style={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        gap: '10px', 
+        marginBottom: '12px',
+        cursor: link ? 'pointer' : 'default',
+        transition: 'all 0.2s',
+      }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <Icon size={15} color={hovered && link ? '#a8d878' : '#7ab648'} />
+      <span style={{ 
+        color: hovered && link ? '#a8d878' : 'rgba(255,255,255,0.6)', 
+        fontSize: '0.84rem',
+        transition: 'color 0.2s',
+      }}>
+        {text}
+      </span>
    </div>
  )
+  
+  return link ? (
+    <a href={link} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
+      {content}
+    </a>
+  ) : content
 }

 // ── main component ────────────────────────────────────────────────────────────
--- a/src/components/ProductGrid.tsx
+++ b/src/components/ProductGrid.tsx
@ -2,13 +2,18 @@ import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ShoppingCart, Star } from 'lucide-react'

+// Import gambar produk
+import cabaiKeringImg from '../fotoProduk/cabai jawa kering.jpg'
+import cabaiBasahImg from '../fotoProduk/cabai jawa.jpg'
+
 interface Product {
  id: number
  name: string
  description: string
  price: string
  unit: string
-  emoji: string
+  image?: string  // Ubah dari emoji ke image
+  emoji?: string  // Keep emoji sebagai fallback
  badge?: string
  rating: number
  reviews: number
@ -16,8 +21,8 @@ interface Product {
 }

 const PRODUCTS: Product[] = [
-  { id: 1, name: 'Cabai Jawa Kering Premium', description: 'Dikeringkan pada suhu presisi untuk mempertahankan warna dan aroma.', price: 'Rp 85.000', unit: '1000g', emoji: '🌶️', badge: 'TERLARIS', rating: 4.9, reviews: 128, bgColor: 'linear-gradient(135deg,#8B1A0A,#C0392B)' },
-  { id: 2, name: 'Cabai Jawa', description: 'Proses higienis, warna dan rasa alami terjaga sepanjang proses pengeringan.', price: 'Rp 30.000', unit: '100g', emoji: '🌿', rating: 4.7, reviews: 84, bgColor: 'linear-gradient(135deg,#5c3a1e,#8b5e3c)' },
+  { id: 1, name: 'Cabai Jawa Kering Premium', description: 'Dikeringkan pada suhu presisi untuk mempertahankan warna dan aroma.', price: 'Rp 85.000', unit: '1000g', image: cabaiKeringImg, badge: 'TERLARIS', rating: 4.9, reviews: 128, bgColor: 'linear-gradient(135deg,#8B1A0A,#C0392B)' },
+  { id: 2, name: 'Cabai Jawa', description: 'Proses higienis, warna dan rasa alami terjaga sepanjang proses pengeringan.', price: 'Rp 30.000', unit: '100g', image: cabaiBasahImg, rating: 4.7, reviews: 84, bgColor: 'linear-gradient(135deg,#5c3a1e,#8b5e3c)' },
  { id: 3, name: 'Teh Rempah Hangat', description: 'Campuran herbal pilihan untuk kesehatan yang menyegarkan jiwa dan raga.', price: 'Rp 55.000', unit: 'pack', emoji: '🍵', badge: 'BARU', rating: 4.8, reviews: 56, bgColor: 'linear-gradient(135deg,#4a3220,#7a5c3a)' },
  { id: 4, name: 'Bubuk Cabai Jawa', description: 'Cabai jawa pilihan kaya antioksidan, diproses tanpa bahan pengawet.', price: 'Rp 135.000', unit: '1000g', emoji: '🫚', rating: 4.6, reviews: 72, bgColor: 'linear-gradient(135deg,#7a2010,#b84030)' },
 ]
@ -55,6 +60,7 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
          background: product.bgColor,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          position: 'relative',
+          overflow: 'hidden',
        }}
      >
        <div
@ -81,9 +87,24 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
            {product.badge}
          </div>
        )}
-        <span style={{ fontSize: '3.8rem', filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.3))' }}>
-          {product.emoji}
-        </span>
+        {/* Tampilkan gambar jika ada, kalau tidak ada gunakan emoji */}
+        {product.image ? (
+          <img 
+            src={product.image} 
+            alt={product.name}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              transition: 'transform 0.3s',
+              transform: hovered ? 'scale(1.05)' : 'scale(1)',
+            }}
+          />
+        ) : (
+          <span style={{ fontSize: '3.8rem', filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.3))' }}>
+            {product.emoji}
+          </span>
+        )}
      </div>

      {/* Info */}
--- a/src/fotoProduk/cabai
+++ b/src/fotoProduk/cabai
--- a/src/fotoProduk/cabai
+++ b/src/fotoProduk/cabai
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@ -433,21 +433,28 @@ export default function About() {
              Terima kasih telah mendukung usaha kami. Mari bersama-sama menikmati 
              produk herbal berkualitas yang dibuat dengan penuh dedikasi.
            </p>
-            <button
-              style={{
-                background: 'linear-gradient(135deg,#d48c2a,#f0b855)',
-                color: 'white',
-                padding: '14px 32px',
-                borderRadius: '10px',
-                fontSize: '0.95rem',
-                fontWeight: 700,
-                border: 'none',
-                cursor: 'pointer',
-                boxShadow: '0 4px 18px rgba(212,140,42,0.38)',
-              }}
+            <a 
+              href="https://wa.me/6281234567890?text=Halo%20JavaHerbal%2C%20saya%20ingin%20bertanya%20tentang%20produk%20Anda"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ textDecoration: 'none' }}
            >
-              Hubungi Kami
-            </button>
+              <button
+                style={{
+                  background: 'linear-gradient(135deg,#d48c2a,#f0b855)',
+                  color: 'white',
+                  padding: '14px 32px',
+                  borderRadius: '10px',
+                  fontSize: '0.95rem',
+                  fontWeight: 700,
+                  border: 'none',
+                  cursor: 'pointer',
+                  boxShadow: '0 4px 18px rgba(212,140,42,0.38)',
+                }}
+              >
+                Hubungi Kami
+              </button>
+            </a>
          </div>
        </section>
      </div>
--- a/src/pages/Products.tsx
+++ b/src/pages/Products.tsx
@ -2,13 +2,18 @@ import React, { useState } from 'react'
 import { Filter } from 'lucide-react'
 import Footer from '../components/Footer'

+// Import gambar produk
+import cabaiKeringImg from '../fotoProduk/cabai jawa kering.jpg'
+import cabaiBasahImg from '../fotoProduk/cabai jawa.jpg'
+
 interface Product {
  id: number
  name: string
  description: string
  price: string
  unit: string
-  emoji: string
+  image?: string  // Ubah dari emoji ke image
+  emoji?: string  // Keep emoji sebagai fallback
  badge?: string
  rating: number
  reviews: number
@ -17,8 +22,8 @@ interface Product {
 }

 const ALL_PRODUCTS: Product[] = [
-  { id: 1, name: 'Cabai Jawa Kering Premium', description: 'Dikeringkan pada suhu presisi untuk mempertahankan warna dan aroma.', price: 'Rp 85.000', unit: '100g', emoji: '🌶️', badge: 'TERLARIS', rating: 4.9, reviews: 128, bgColor: 'linear-gradient(135deg,#8B1A0A,#C0392B)', category: 'Rempah' },
-  { id: 2, name: 'Cabai Jawa', description: 'Proses higienis, warna dan rasa alami terjaga sepanjang proses pengeringan.', price: 'Rp 30.000', unit: '100g', emoji: '🌿', rating: 4.7, reviews: 84, bgColor: 'linear-gradient(135deg,#5c3a1e,#8b5e3c)', category: 'Rempah' },
+  { id: 1, name: 'Cabai Jawa Kering Premium', description: 'Dikeringkan pada suhu presisi untuk mempertahankan warna dan aroma.', price: 'Rp 85.000', unit: '100g', image: cabaiKeringImg, badge: 'TERLARIS', rating: 4.9, reviews: 128, bgColor: 'linear-gradient(135deg,#8B1A0A,#C0392B)', category: 'Rempah' },
+  { id: 2, name: 'Cabai Jawa', description: 'Proses higienis, warna dan rasa alami terjaga sepanjang proses pengeringan.', price: 'Rp 30.000', unit: '100g', image: cabaiBasahImg, rating: 4.7, reviews: 84, bgColor: 'linear-gradient(135deg,#5c3a1e,#8b5e3c)', category: 'Rempah' },
  { id: 3, name: 'Teh Rempah Hangat', description: 'Campuran herbal pilihan untuk kesehatan yang menyegarkan jiwa dan raga.', price: 'Rp 55.000', unit: 'pack', emoji: '🍵', badge: 'BARU', rating: 4.8, reviews: 56, bgColor: 'linear-gradient(135deg,#4a3220,#7a5c3a)', category: 'Teh' },
  { id: 4, name: 'Bubuk Cabai Jawa', description: 'Cabai jawa pilihan kaya antioksidan, diproses tanpa bahan pengawet.', price: 'Rp 135.000', unit: '1000g', emoji: '🫚', rating: 4.6, reviews: 72, bgColor: 'linear-gradient(135deg,#7a2010,#b84030)', category: 'Rempah' },
 ]
@ -48,6 +53,7 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
          background: product.bgColor,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          position: 'relative',
+          overflow: 'hidden',
        }}
      >
        <div
@ -62,9 +68,24 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
        >
          {product.id}
        </div>
-        <span style={{ fontSize: '3.8rem', filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.3))' }}>
-          {product.emoji}
-        </span>
+        {/* Tampilkan gambar jika ada, kalau tidak ada gunakan emoji */}
+        {product.image ? (
+          <img 
+            src={product.image} 
+            alt={product.name}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              transition: 'transform 0.3s',
+              transform: hovered ? 'scale(1.05)' : 'scale(1)',
+            }}
+          />
+        ) : (
+          <span style={{ fontSize: '3.8rem', filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.3))' }}>
+            {product.emoji}
+          </span>
+        )}
      </div>

      <div style={{ padding: '1.1rem' }}>