This commit is contained in:
Hamed
2026-08-02 13:05:28 +04:00
parent 574a18712d
commit 34f96d3830
24 changed files with 1169 additions and 1013 deletions
+32 -2
View File
@@ -4,8 +4,21 @@
<list default="true" id="bb7b50a5-be9c-4cd7-a05b-979f0e91b173" name="Changes" comment="update">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/globals.css" beforeDir="false" afterPath="$PROJECT_DIR$/app/globals.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/components/Header.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/components/Header.jsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/components/HeroSection.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/components/HeroSection.jsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/data/content.js" beforeDir="false" afterPath="$PROJECT_DIR$/data/content.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/video/showcase-placeholder.mp4" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/jsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/jsconfig.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/logo.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/machine-35-base.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/machine-35-white.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/machine-48-base.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/machine-48-white.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/machine-60-base.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/machine-60-white.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/snacks/chips-1.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/snacks/chips-2.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/snacks/soda-1.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/snacks/soda-2.svg" beforeDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -86,6 +99,7 @@
<workItem from="1785583486761" duration="9000" />
<workItem from="1785583517424" duration="145000" />
<workItem from="1785645096071" duration="26000" />
<workItem from="1785646314677" duration="10534000" />
</task>
<task id="LOCAL-00001" summary="update">
<option name="closed" value="true" />
@@ -111,7 +125,23 @@
<option name="project" value="LOCAL" />
<updated>1785582935941</updated>
</task>
<option name="localTasksCounter" value="4" />
<task id="LOCAL-00004" summary="update">
<option name="closed" value="true" />
<created>1785646368102</created>
<option name="number" value="00004" />
<option name="presentableId" value="LOCAL-00004" />
<option name="project" value="LOCAL" />
<updated>1785646368102</updated>
</task>
<task id="LOCAL-00005" summary="update">
<option name="closed" value="true" />
<created>1785646373594</created>
<option name="number" value="00005" />
<option name="presentableId" value="LOCAL-00005" />
<option name="project" value="LOCAL" />
<updated>1785646373594</updated>
</task>
<option name="localTasksCounter" value="6" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
+149 -104
View File
@@ -6,203 +6,248 @@
/* Theme tokens — dark is the default; .light overrides on <html> */
/* ------------------------------------------------------------------ */
:root {
--brand: #00a693;
--color-bg-page: #04120f;
--color-bg-elevated: #0c2b24;
--color-bg-surface: rgba(255, 255, 255, 0.045);
--color-bg-surface-strong: rgba(255, 255, 255, 0.08);
--color-border: rgba(0, 166, 147, 0.28);
--color-text-primary: #ffffff;
--color-text-secondary: rgba(230, 247, 244, 0.72);
--color-scrollbar-track: #071e19;
--color-scrollbar-thumb: #0b5c50;
color-scheme: dark;
--brand: #00a693;
--color-bg-page: #04120f;
--color-bg-elevated: #0c2b24;
--color-bg-surface: rgba(255, 255, 255, 0.045);
--color-bg-surface-strong: rgba(255, 255, 255, 0.08);
--color-border: rgba(0, 166, 147, 0.28);
--color-text-primary: #ffffff;
--color-text-secondary: rgba(230, 247, 244, 0.72);
--color-scrollbar-track: #071e19;
--color-scrollbar-thumb: #0b5c50;
color-scheme: dark;
}
html.light {
--color-bg-page: #f5fbf9;
--color-bg-elevated: #ffffff;
--color-bg-surface: rgba(0, 89, 79, 0.045);
--color-bg-surface-strong: rgba(0, 89, 79, 0.08);
--color-border: rgba(0, 166, 147, 0.25);
--color-text-primary: #04231f;
--color-text-secondary: rgba(4, 35, 31, 0.68);
--color-scrollbar-track: #e1f3ef;
--color-scrollbar-thumb: #8fdccc;
color-scheme: light;
--color-bg-page: #f5fbf9;
--color-bg-elevated: #ffffff;
--color-bg-surface: rgba(0, 89, 79, 0.045);
--color-bg-surface-strong: rgba(0, 89, 79, 0.08);
--color-border: rgba(0, 166, 147, 0.25);
--color-text-primary: #04231f;
--color-text-secondary: rgba(4, 35, 31, 0.68);
--color-scrollbar-track: #e1f3ef;
--color-scrollbar-thumb: #8fdccc;
color-scheme: light;
}
html,
body {
padding: 0;
margin: 0;
scroll-behavior: smooth;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
html[dir='rtl'] body {
font-family: var(--font-vazirmatn), Tahoma, sans-serif;
font-family: var(--font-vazirmatn), Tahoma, sans-serif;
}
* {
box-sizing: border-box;
box-sizing: border-box;
}
::selection {
background: rgba(0, 166, 147, 0.35);
color: var(--color-text-primary);
background: rgba(0, 166, 147, 0.35);
color: var(--color-text-primary);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-scrollbar-track);
background: var(--color-scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--color-scrollbar-thumb);
border-radius: 999px;
background: var(--color-scrollbar-thumb);
border-radius: 999px;
}
/* Semantic surface/text utilities — read the theme variables above so every
component that uses them automatically supports dark + light mode. */
.bg-page { background-color: var(--color-bg-page); }
.bg-elevated { background-color: var(--color-bg-elevated); }
.bg-surface { background-color: var(--color-bg-surface); }
.bg-surface-strong { background-color: var(--color-bg-surface-strong); }
.border-subtle { border-color: var(--color-border); }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.bg-page {
background-color: var(--color-bg-page);
}
.bg-elevated {
background-color: var(--color-bg-elevated);
}
.bg-surface {
background-color: var(--color-bg-surface);
}
.bg-surface-strong {
background-color: var(--color-bg-surface-strong);
}
.border-subtle {
border-color: var(--color-border);
}
.text-primary {
color: var(--color-text-primary);
}
.text-secondary {
color: var(--color-text-secondary);
}
/* Opacity variants of the tokens above (Tailwind's /NN modifier only works on
Tailwind-generated utilities, not these hand-written classes). */
.bg-page-60 { background-color: color-mix(in srgb, var(--color-bg-page) 60%, transparent); }
.bg-page-70 { background-color: color-mix(in srgb, var(--color-bg-page) 70%, transparent); }
.bg-page-85 { background-color: color-mix(in srgb, var(--color-bg-page) 85%, transparent); }
.bg-elevated-95 { background-color: color-mix(in srgb, var(--color-bg-elevated) 95%, transparent); }
.text-primary-90 { color: color-mix(in srgb, var(--color-text-primary) 90%, transparent); }
.bg-page-60 {
background-color: color-mix(in srgb, var(--color-bg-page) 60%, transparent);
}
.bg-page-70 {
background-color: color-mix(in srgb, var(--color-bg-page) 70%, transparent);
}
.bg-page-85 {
background-color: color-mix(in srgb, var(--color-bg-page) 85%, transparent);
}
.bg-elevated-95 {
background-color: color-mix(in srgb, var(--color-bg-elevated) 95%, transparent);
}
.text-primary-90 {
color: color-mix(in srgb, var(--color-text-primary) 90%, transparent);
}
/* ------------------------------------------------------------------ */
/* Horizontal scroll showcase (pinned via GSAP ScrollTrigger) */
/* ------------------------------------------------------------------ */
.horizontal-track {
display: flex;
height: 100vh;
width: max-content;
will-change: transform;
display: flex;
height: 100vh;
width: 100vw;
will-change: transform;
}
.horizontal-panel {
height: 100vh;
width: 100vw;
flex-shrink: 0;
position: relative;
overflow: hidden;
height: 100vh;
width: 100vw;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
/* ------------------------------------------------------------------ */
/* Cursor spotlight / lens reveal effect over the vending machine */
/* ------------------------------------------------------------------ */
.spotlight-stage {
position: relative;
cursor: none;
isolation: isolate;
position: relative;
cursor: none;
isolation: isolate;
}
.spotlight-stage .base-layer,
.spotlight-stage .reveal-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
user-select: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
user-select: none;
}
.spotlight-stage .reveal-layer {
clip-path: circle(0px at 50% 50%);
transition: clip-path 0.05s linear;
clip-path: circle(0px at 50% 50%);
transition: clip-path 0.05s linear;
}
.spotlight-lens {
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 190px;
border-radius: 999px;
border: 2px solid rgba(0, 166, 147, 0.9);
box-shadow:
0 0 0 4px rgba(0, 166, 147, 0.15),
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 190px;
border-radius: 999px;
border: 2px solid rgba(0, 166, 147, 0.9);
box-shadow: 0 0 0 4px rgba(0, 166, 147, 0.15),
0 0 40px 6px rgba(0, 166, 147, 0.45);
pointer-events: none;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.15s ease;
z-index: 30;
pointer-events: none;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.15s ease;
z-index: 30;
}
.spotlight-stage:hover .spotlight-lens {
opacity: 1;
opacity: 1;
}
/* Utility: hide native scrollbar but keep scroll functionality */
.no-scrollbar::-webkit-scrollbar {
display: none;
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Gradient text helper for headings */
.brand-gradient-text {
background: linear-gradient(90deg, #6fe0c9 0%, #00a693 55%, #017065 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background: linear-gradient(90deg, #6fe0c9 0%, #00a693 55%, #017065 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ------------------------------------------------------------------ */
/* Typewriter caret for the hero headline */
/* ------------------------------------------------------------------ */
.typewriter-caret {
display: inline-block;
width: 3px;
margin-inline-start: 4px;
background-color: var(--brand);
animation: caretBlink 0.9s steps(1) infinite;
display: inline-block;
width: 3px;
margin-inline-start: 4px;
background-color: var(--brand);
animation: caretBlink 0.9s steps(1) infinite;
}
@keyframes caretBlink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
0%, 49% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
/* ------------------------------------------------------------------ */
/* نوار لوگوی بی‌پایان (trusted-by marquee) */
/* ------------------------------------------------------------------ */
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* دقیقاً نصف عرض، چون لیست دو برابر شده */
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
/* دقیقاً نصف عرض، چون لیست دو برابر شده */
}
.animate-marquee {
animation: marqueeScroll 28s linear infinite;
animation: marqueeScroll 28s linear infinite;
}
.animate-marquee:hover {
animation-play-state: paused;
animation-play-state: paused;
}
/* ------------------------------------------------------------------ */
/* Chat widget */
/* ------------------------------------------------------------------ */
.chat-bubble {
max-width: 80%;
padding: 10px 14px;
border-radius: 14px;
font-size: 0.875rem;
line-height: 1.6;
max-width: 80%;
padding: 10px 14px;
border-radius: 14px;
font-size: 0.875rem;
line-height: 1.6;
}
+103 -102
View File
@@ -2,120 +2,121 @@
// هدر ثابت بالای صفحه: لوگو، منوی ناوبری، سوییچ زبان/تم، دکمه ورود به پنل کاربری و آیکون سبد خرید.
import { useState, useEffect } from 'react';
import {useState, useEffect} from 'react';
import Image from 'next/image';
import { Badge, Button } from 'antd';
import { ShoppingCartOutlined, MenuOutlined, CloseOutlined, UserOutlined } from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux';
import { selectCartCount, openDrawer } from '@/store/cartSlice';
import { useLanguage } from '@/app/context/LanguageContext';
import {Badge, Button} from 'antd';
import {ShoppingCartOutlined, MenuOutlined, CloseOutlined, UserOutlined} from '@ant-design/icons';
import {useSelector, useDispatch} from 'react-redux';
import {selectCartCount, openDrawer} from '@/store/cartSlice';
import {useLanguage} from '@/app/context/LanguageContext';
import ThemeToggle from './ThemeToggle';
import LanguageToggle from './LanguageToggle';
export default function Header() {
const dispatch = useDispatch();
const cartCount = useSelector(selectCartCount);
const { t } = useLanguage();
const [scrolled, setScrolled] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
const dispatch = useDispatch();
const cartCount = useSelector(selectCartCount);
const {t} = useLanguage();
const [scrolled, setScrolled] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
const navLinks = [
{ href: '#hero', label: t.nav.home },
{ href: '#showcase', label: t.nav.showcase },
{ href: '#about', label: t.nav.about },
{ href: '#catalog', label: t.nav.catalog },
{ href: '#locations', label: t.nav.locations },
{ href: '#video', label: t.nav.video },
{ href: '#map', label: t.nav.map },
{ href: '#support', label: t.nav.support },
];
const navLinks = [
{href: '#hero', label: t.nav.home},
{href: '#showcase', label: t.nav.showcase},
{href: '#about', label: t.nav.about},
{href: '#catalog', label: t.nav.catalog},
{href: '#locations', label: t.nav.locations},
{href: '#video', label: t.nav.video},
{href: '#map', label: t.nav.map},
{href: '#support', label: t.nav.support},
];
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
<header
className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
scrolled ? 'bg-page-85 backdrop-blur-md shadow-[0_1px_0_0_rgba(0,166,147,0.25)]' : 'bg-transparent'
}`}
>
<div className="mx-auto max-w-7xl px-5 md:px-8 h-20 flex items-center justify-between gap-4">
<a href="#hero" className="flex items-center gap-2 shrink-0">
<Image src="/images/logo.svg" alt="روبات مارکت" width={150} height={42} priority />
</a>
return (
<header
className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
scrolled ? 'bg-page-85 backdrop-blur-md shadow-[0_1px_0_0_rgba(0,166,147,0.25)]' : 'bg-transparent'
}`}
>
<div className="mx-auto max-w-7xl px-5 md:px-8 h-20 flex items-center justify-between gap-4">
<a href="#hero" className="flex items-center gap-2 shrink-0">
<Image src="/images/logo.png" alt="روبات مارکت" width={150} height={42} priority/>
</a>
<nav className="hidden xl:flex items-center gap-5 2xl:gap-7">
{navLinks.map((link) => (
<a
key={link.href}
href={link.href}
className="text-sm text-secondary hover:text-brand-300 transition-colors whitespace-nowrap"
>
{link.label}
</a>
))}
</nav>
<nav className="hidden xl:flex items-center gap-5 2xl:gap-7">
{navLinks.map((link) => (
<a
key={link.href}
href={link.href}
className="text-sm text-secondary hover:text-brand-300 transition-colors whitespace-nowrap"
>
{link.label}
</a>
))}
</nav>
<div className="flex items-center gap-2 md:gap-3">
<div className="hidden md:flex items-center gap-2">
<LanguageToggle />
<ThemeToggle />
</div>
<div className="flex items-center gap-2 md:gap-3">
<div className="hidden md:flex items-center gap-2">
<LanguageToggle/>
<ThemeToggle/>
</div>
<Button
className="hidden sm:inline-flex"
icon={<UserOutlined />}
onClick={() => {
/* TODO: point this at the real customer panel login route */
}}
>
{t.nav.login}
</Button>
<Button
className="hidden sm:inline-flex"
icon={<UserOutlined/>}
href="https://panel.my-rm.com"
target="_blank"
rel="noopener noreferrer"
>
{t.nav.login}
</Button>
<Badge count={cartCount} size="small" offset={[-2, 2]}>
<Button
shape="circle"
size="large"
icon={<ShoppingCartOutlined />}
onClick={() => dispatch(openDrawer())}
aria-label="cart"
/>
</Badge>
<Badge count={cartCount} size="small" offset={[-2, 2]}>
<Button
shape="circle"
size="large"
icon={<ShoppingCartOutlined/>}
onClick={() => dispatch(openDrawer())}
aria-label="cart"
/>
</Badge>
<button
className="xl:hidden text-brand-400 text-2xl"
onClick={() => setMobileOpen((v) => !v)}
aria-label="menu"
>
{mobileOpen ? <CloseOutlined /> : <MenuOutlined />}
</button>
</div>
</div>
<button
className="xl:hidden text-brand-400 text-2xl"
onClick={() => setMobileOpen((v) => !v)}
aria-label="menu"
>
{mobileOpen ? <CloseOutlined/> : <MenuOutlined/>}
</button>
</div>
</div>
{mobileOpen && (
<nav className="xl:hidden bg-elevated-95 backdrop-blur-md border-t border-subtle px-5 py-4 flex flex-col gap-4 max-h-[calc(100vh-5rem)] overflow-y-auto">
{navLinks.map((link) => (
<a
key={link.href}
href={link.href}
onClick={() => setMobileOpen(false)}
className="text-secondary text-base"
>
{link.label}
</a>
))}
<div className="flex items-center gap-3 pt-2 border-t border-subtle">
<LanguageToggle />
<ThemeToggle />
<Button icon={<UserOutlined />} className="flex-1">
{t.nav.login}
</Button>
</div>
</nav>
)}
</header>
);
{mobileOpen && (
<nav
className="xl:hidden bg-elevated-95 backdrop-blur-md border-t border-subtle px-5 py-4 flex flex-col gap-4 max-h-[calc(100vh-5rem)] overflow-y-auto">
{navLinks.map((link) => (
<a
key={link.href}
href={link.href}
onClick={() => setMobileOpen(false)}
className="text-secondary text-base"
>
{link.label}
</a>
))}
<div className="flex items-center gap-3 pt-2 border-t border-subtle">
<LanguageToggle/>
<ThemeToggle/>
<Button icon={<UserOutlined/>} className="flex-1">
{t.nav.login}
</Button>
</div>
</nav>
)}
</header>
);
}
+134 -134
View File
@@ -7,156 +7,156 @@
* عنوان بزرگ دو خطی، و دکمه‌های فلش قبلی/بعدی برای ناوبری دستی.
*/
import { useCallback, useEffect, useRef, useState } from 'react';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { useLanguage } from '@/app/context/LanguageContext';
import {useCallback, useEffect, useRef, useState} from 'react';
import {LeftOutlined, RightOutlined} from '@ant-design/icons';
import {useLanguage} from '@/app/context/LanguageContext';
const AUTOPLAY_DELAY = 5000; // هر ۵ ثانیه اسلاید عوض می‌شود
export default function HeroSection() {
const { t, dir } = useLanguage();
const slides = t.hero.slides;
const [activeIndex, setActiveIndex] = useState(0);
const timerRef = useRef(null);
const {t, dir} = useLanguage();
const slides = t.hero.slides;
const [activeIndex, setActiveIndex] = useState(0);
const timerRef = useRef(null);
// رفتن به اسلاید بعدی (با چرخش به اول لیست وقتی به آخر رسید)
const goToNext = useCallback(() => {
setActiveIndex((prev) => (prev + 1) % slides.length);
}, [slides.length]);
// رفتن به اسلاید بعدی (با چرخش به اول لیست وقتی به آخر رسید)
const goToNext = useCallback(() => {
setActiveIndex((prev) => (prev + 1) % slides.length);
}, [slides.length]);
const goToPrev = useCallback(() => {
setActiveIndex((prev) => (prev - 1 + slides.length) % slides.length);
}, [slides.length]);
const goToPrev = useCallback(() => {
setActiveIndex((prev) => (prev - 1 + slides.length) % slides.length);
}, [slides.length]);
// تایمر پخش خودکار: هر بار که اسلاید عوض می‌شود، تایمر قبلی پاک و یک تایمر
// جدید ۵ ثانیه‌ای ست می‌شود. با کلیک دستی روی فلش‌ها هم همین تابع دوباره
// صدا زده می‌شود تا شمارش از نو شروع شود (تجربه کاربری بهتر).
const restartAutoplay = useCallback(() => {
if (timerRef.current) clearInterval(timerRef.current);
timerRef.current = setInterval(goToNext, AUTOPLAY_DELAY);
}, [goToNext]);
// تایمر پخش خودکار: هر بار که اسلاید عوض می‌شود، تایمر قبلی پاک و یک تایمر
// جدید ۵ ثانیه‌ای ست می‌شود. با کلیک دستی روی فلش‌ها هم همین تابع دوباره
// صدا زده می‌شود تا شمارش از نو شروع شود (تجربه کاربری بهتر).
const restartAutoplay = useCallback(() => {
if (timerRef.current) clearInterval(timerRef.current);
timerRef.current = setInterval(goToNext, AUTOPLAY_DELAY);
}, [goToNext]);
useEffect(() => {
restartAutoplay();
return () => {
if (timerRef.current) clearInterval(timerRef.current);
useEffect(() => {
restartAutoplay();
return () => {
if (timerRef.current) clearInterval(timerRef.current);
};
}, [restartAutoplay]);
const handleManualNav = (direction) => {
if (direction === 'next') goToNext();
else goToPrev();
restartAutoplay(); // شمارش ۵ ثانیه بعد از کلیک دستی از نو شروع شود
};
}, [restartAutoplay]);
const handleManualNav = (direction) => {
if (direction === 'next') goToNext();
else goToPrev();
restartAutoplay(); // شمارش ۵ ثانیه بعد از کلیک دستی از نو شروع شود
};
const slide = slides[activeIndex];
const slide = slides[activeIndex];
return (
<section id="hero" className="relative h-screen w-full overflow-hidden bg-page">
{/* ------------------------------------------------------------------ */}
{/* شکل مورب تزئینی سمت راست/چپ — نسخه سبز برند به‌جای قرمز Sielaff */}
{/* ------------------------------------------------------------------ */}
<div
className="absolute inset-y-0 w-1/3 hidden md:block"
style={{
[dir === 'rtl' ? 'left' : 'right']: '-6%',
background: 'linear-gradient(135deg, #00a693 0%, #017065 60%, #0b3d38 100%)',
clipPath:
dir === 'rtl'
? 'polygon(30% 0, 100% 0, 100% 100%, 0% 100%)'
: 'polygon(0 0, 70% 0, 100% 100%, 0% 100%)',
}}
/>
{/* ------------------------------------------------------------------ */}
{/* اسلایدهای عکس — همه اسلایدها روی هم قرار دارند و فقط با opacity */}
{/* محو/نمایان می‌شوند (transition نرم به‌جای پرش ناگهانی) */}
{/* ------------------------------------------------------------------ */}
<div className="absolute inset-0">
{slides.map((s, i) => (
<div
key={s.id}
className="absolute inset-0 flex items-center justify-center transition-opacity duration-1000 ease-in-out"
style={{ opacity: i === activeIndex ? 1 : 0, pointerEvents: i === activeIndex ? 'auto' : 'none' }}
aria-hidden={i !== activeIndex}
>
<img
src={s.image}
alt={s.titleLines.join(' ')}
className="h-[55%] md:h-[70%] w-auto object-contain drop-shadow-2xl"
return (
<section id="hero" className="relative h-screen w-full overflow-hidden bg-page">
{/* ------------------------------------------------------------------ */}
{/* شکل مورب تزئینی سمت راست/چپ — نسخه سبز برند به‌جای قرمز Sielaff */}
{/* ------------------------------------------------------------------ */}
<div
className="absolute inset-y-0 w-1/3 hidden md:block"
style={{
background: 'linear-gradient(135deg, #00a693 0%, #017065 60%, #0b3d38 100%)',
clipPath:
dir === 'rtl'
? 'polygon(30% 0, 100% 0, 100% 100%, 0% 100%)'
: 'polygon(0 0, 70% 0, 100% 100%, 0% 100%)',
}}
/>
</div>
))}
</div>
{/* لایه‌ی نیمه‌شفاف پشت متن، برای خوانایی روی هر عکسی */}
<div
className="absolute inset-0"
style={{
background:
'linear-gradient(180deg, rgba(4,18,15,0.05) 0%, rgba(4,18,15,0.15) 60%, rgba(4,18,15,0.35) 100%)',
}}
/>
{/* ------------------------------------------------------------------ */}
{/* اسلایدهای عکس — همه اسلایدها روی هم قرار دارند و فقط با opacity */}
{/* محو/نمایان می‌شوند (transition نرم به‌جای پرش ناگهانی) */}
{/* ------------------------------------------------------------------ */}
<div className="absolute inset-0">
{slides.map((s, i) => (
<div
key={s.id}
className="absolute inset-0 flex items-center justify-center transition-opacity duration-1000 ease-in-out"
style={{opacity: i === activeIndex ? 1 : 0, pointerEvents: i === activeIndex ? 'auto' : 'none'}}
aria-hidden={i !== activeIndex}
>
<img
src={s.image}
alt={s.titleLines.join(' ')}
className="h-[55%] md:h-[70%] w-auto object-contain drop-shadow-2xl"
/>
</div>
))}
</div>
{/* ------------------------------------------------------------------ */}
{/* متن روی اسلاید: کیکر کوچک + عنوان بزرگ دو خطی + توضیح + دکمه CTA */}
{/* ------------------------------------------------------------------ */}
<div className="relative z-10 h-full flex flex-col justify-end md:justify-center px-6 md:px-16 pb-28 md:pb-0">
<div className="max-w-2xl">
<span className="text-brand-400 font-semibold tracking-widest text-sm uppercase">
{slide.kicker}
</span>
<h1 className="mt-3 text-3xl sm:text-4xl md:text-6xl font-extrabold leading-tight text-primary">
{slide.titleLines.map((line, i) => (
<span key={i} className="block">
{/* لایه‌ی نیمه‌شفاف پشت متن، برای خوانایی روی هر عکسی */}
<div
className="absolute inset-0"
style={{
background:
'linear-gradient(180deg, rgba(4,18,15,0.05) 0%, rgba(4,18,15,0.15) 60%, rgba(4,18,15,0.35) 100%)',
}}
/>
{/* ------------------------------------------------------------------ */}
{/* متن روی اسلاید: کیکر کوچک + عنوان بزرگ دو خطی + توضیح + دکمه CTA */}
{/* ------------------------------------------------------------------ */}
<div
className="relative z-10 h-full flex flex-col justify-end md:justify-center px-6 md:px-16 pb-28 md:pb-0">
<div className="max-w-2xl">
<span className="text-brand-400 font-semibold tracking-widest text-sm uppercase">
{slide.kicker}
</span>
<h1 className="mt-3 text-3xl sm:text-4xl md:text-6xl font-extrabold leading-tight text-white drop-shadow-[0_4px_12px_rgba(0,0,0,0.9)]">
{slide.titleLines.map((line, i) => (
<span key={i} className="block">
{line}
</span>
))}
</h1>
<p className="mt-5 text-secondary text-base md:text-lg max-w-xl">{slide.sub}</p>
<a
href="#showcase"
className="mt-8 inline-flex items-center gap-2 bg-brand hover:bg-brand-400 text-ink-950 font-bold px-8 py-3.5 rounded-full transition-colors shadow-brandGlow"
>
{t.hero.cta}
</a>
</div>
</div>
))}
</h1>
<p className="mt-5 text-white/90 text-base md:text-lg max-w-xl drop-shadow-lg">{slide.sub}</p>
<a
href="#showcase"
className="mt-8 inline-flex items-center gap-2 bg-brand hover:bg-brand-400 text-ink-950 font-bold px-8 py-3.5 rounded-full transition-colors shadow-brandGlow"
>
{t.hero.cta}
</a>
</div>
</div>
{/* ------------------------------------------------------------------ */}
{/* فلش‌های ناوبری دستی (قبلی / بعدی) — شبیه سایت Sielaff، وسط دو طرف */}
{/* ------------------------------------------------------------------ */}
<button
onClick={() => handleManualNav('prev')}
aria-label="previous slide"
className="hidden sm:flex absolute top-1/2 -translate-y-1/2 start-4 z-20 w-11 h-11 rounded-full bg-page-70 border border-subtle items-center justify-center text-primary hover:bg-brand hover:text-ink-950 transition-colors"
>
<LeftOutlined />
</button>
<button
onClick={() => handleManualNav('next')}
aria-label="next slide"
className="hidden sm:flex absolute top-1/2 -translate-y-1/2 end-4 z-20 w-11 h-11 rounded-full bg-page-70 border border-subtle items-center justify-center text-primary hover:bg-brand hover:text-ink-950 transition-colors"
>
<RightOutlined />
</button>
{/* ------------------------------------------------------------------ */}
{/* فلش‌های ناوبری دستی (قبلی / بعدی) — وسط دو طرف */}
{/* ------------------------------------------------------------------ */}
<button
onClick={() => handleManualNav('prev')}
aria-label="previous slide"
className="hidden sm:flex absolute top-1/2 -translate-y-1/2 start-4 z-20 w-11 h-11 rounded-full bg-page-70 border border-subtle items-center justify-center text-primary hover:bg-brand hover:text-ink-950 transition-colors"
>
<LeftOutlined/>
</button>
<button
onClick={() => handleManualNav('next')}
aria-label="next slide"
className="hidden sm:flex absolute top-1/2 -translate-y-1/2 end-4 z-20 w-11 h-11 rounded-full bg-page-70 border border-subtle items-center justify-center text-primary hover:bg-brand hover:text-ink-950 transition-colors"
>
<RightOutlined/>
</button>
{/* نقطه‌های شمارشگر اسلاید پایین صفحه — کلیک روی هرکدام مستقیم به همان اسلاید می‌رود */}
<div className="absolute bottom-8 inset-x-0 z-20 flex justify-center gap-2">
{slides.map((s, i) => (
<button
key={s.id}
onClick={() => {
setActiveIndex(i);
restartAutoplay();
}}
aria-label={`slide ${i + 1}`}
className={`h-2 rounded-full transition-all ${
i === activeIndex ? 'w-8 bg-brand' : 'w-2 bg-brand/30 hover:bg-brand/60'
}`}
/>
))}
</div>
</section>
);
{/* نقطه‌های شمارشگر اسلاید پایین صفحه — کلیک روی هرکدام مستقیم به همان اسلاید می‌رود */}
<div className="absolute bottom-8 inset-x-0 z-20 flex justify-center gap-2">
{slides.map((s, i) => (
<button
key={s.id}
onClick={() => {
setActiveIndex(i);
restartAutoplay();
}}
aria-label={`slide ${i + 1}`}
className={`h-2 rounded-full transition-all ${
i === activeIndex ? 'w-8 bg-brand' : 'w-2 bg-brand/30 hover:bg-brand/60'
}`}
/>
))}
</div>
</section>
);
}
+56
View File
@@ -0,0 +1,56 @@
'use client';
/**
* سکشن «مشتریانی که به ما اعتماد کرده‌اند» — یک نوار لوگوی بی‌پایان (marquee)
* که به‌آرامی و پیوسته حرکت می‌کند. برای ساخت افکت حلقه‌ی بی‌پایان، لیست
* لوگوها را دو بار پشت‌سرهم رندر می‌کنیم و با انیمیشن CSS آن را جابه‌جا می‌کنیم.
*
* نکته فنی: مسیر (track) همیشه جهت LTR دارد، چون منطق «حرکت به چپ» انیمیشن
* فرض بر همین جهت است — دقیقاً همان مشکلی که در اسکرول افقی محصولات داشتیم و
* حلش کردیم. این‌جا هم برای جلوگیری از همان باگ، جهت را ثابت نگه داشتیم.
*/
import { useLanguage } from '@/app/context/LanguageContext';
export default function TrustedBySection() {
const { t } = useLanguage();
const clients = t.trustedBy.clients;
// لیست لوگوها را دو برابر می‌کنیم تا وقتی نیمه اول با انیمیشن رد شد،
// نیمه دوم دقیقاً از همان‌جا ادامه بدهد و چشم متوجه پرش/شکاف نشود.
const doubledClients = [...clients, ...clients];
return (
<section className="relative px-6 md:px-16 py-16 md:py-20 bg-page border-t border-subtle overflow-hidden">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-10">
<span className="text-brand-400 text-sm font-semibold tracking-wide">{t.trustedBy.eyebrow}</span>
<h2 className="text-xl md:text-2xl font-extrabold text-primary mt-2">{t.trustedBy.title}</h2>
</div>
</div>
{/* یک محو تدریجی (fade mask) دو طرف نوار، تا لبه‌های لوگوها بریده به‌نظر نرسد */}
<div
className="relative"
style={{
maskImage: 'linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%)',
}}
>
<div className="flex w-max animate-marquee gap-10" dir="ltr">
{doubledClients.map((client, i) => (
<div
key={`${client.id}-${i}`}
className="w-40 md:w-48 shrink-0 flex items-center justify-center bg-surface border border-subtle rounded-xl p-4 opacity-80 hover:opacity-100 transition-opacity"
>
<img
src={`/images/clients/client-${((i % clients.length) + 1)}.svg`}
alt={client.name}
className="w-full h-auto"
/>
</div>
))}
</div>
</div>
</section>
);
}
+651 -470
View File
File diff suppressed because it is too large Load Diff
+2 -1
View File
@@ -3,6 +3,7 @@
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
},
"jsx": "react"
}
}
+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" width="200" height="80">
<rect x="2" y="2" width="196" height="76" rx="12" fill="none" stroke="#00a693" stroke-opacity="0.3" stroke-width="2"/>
<circle cx="40" cy="40" r="20" fill="#00a693"/>
<text x="40" y="47" font-family="Tahoma, sans-serif" font-size="20" font-weight="bold" fill="#ffffff" text-anchor="middle">پ</text>
<rect x="72" y="32" width="100" height="8" rx="4" fill="#00a693" fill-opacity="0.35"/>
<rect x="72" y="46" width="70" height="6" rx="3" fill="#00a693" fill-opacity="0.2"/>
</svg>

After

Width:  |  Height:  |  Size: 575 B

+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" width="200" height="80">
<rect x="2" y="2" width="196" height="76" rx="12" fill="none" stroke="#00a693" stroke-opacity="0.3" stroke-width="2"/>
<circle cx="40" cy="40" r="20" fill="#017065"/>
<text x="40" y="47" font-family="Tahoma, sans-serif" font-size="20" font-weight="bold" fill="#ffffff" text-anchor="middle">ف</text>
<rect x="72" y="32" width="100" height="8" rx="4" fill="#00a693" fill-opacity="0.35"/>
<rect x="72" y="46" width="70" height="6" rx="3" fill="#00a693" fill-opacity="0.2"/>
</svg>

After

Width:  |  Height:  |  Size: 575 B

+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" width="200" height="80">
<rect x="2" y="2" width="196" height="76" rx="12" fill="none" stroke="#00a693" stroke-opacity="0.3" stroke-width="2"/>
<circle cx="40" cy="40" r="20" fill="#00a693"/>
<text x="40" y="47" font-family="Tahoma, sans-serif" font-size="20" font-weight="bold" fill="#ffffff" text-anchor="middle">ر</text>
<rect x="72" y="32" width="100" height="8" rx="4" fill="#00a693" fill-opacity="0.35"/>
<rect x="72" y="46" width="70" height="6" rx="3" fill="#00a693" fill-opacity="0.2"/>
</svg>

After

Width:  |  Height:  |  Size: 575 B

+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" width="200" height="80">
<rect x="2" y="2" width="196" height="76" rx="12" fill="none" stroke="#00a693" stroke-opacity="0.3" stroke-width="2"/>
<circle cx="40" cy="40" r="20" fill="#0b3d38"/>
<text x="40" y="47" font-family="Tahoma, sans-serif" font-size="20" font-weight="bold" fill="#ffffff" text-anchor="middle">ر</text>
<rect x="72" y="32" width="100" height="8" rx="4" fill="#00a693" fill-opacity="0.35"/>
<rect x="72" y="46" width="70" height="6" rx="3" fill="#00a693" fill-opacity="0.2"/>
</svg>

After

Width:  |  Height:  |  Size: 575 B

+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" width="200" height="80">
<rect x="2" y="2" width="196" height="76" rx="12" fill="none" stroke="#00a693" stroke-opacity="0.3" stroke-width="2"/>
<circle cx="40" cy="40" r="20" fill="#00a693"/>
<text x="40" y="47" font-family="Tahoma, sans-serif" font-size="20" font-weight="bold" fill="#ffffff" text-anchor="middle">آ</text>
<rect x="72" y="32" width="100" height="8" rx="4" fill="#00a693" fill-opacity="0.35"/>
<rect x="72" y="46" width="70" height="6" rx="3" fill="#00a693" fill-opacity="0.2"/>
</svg>

After

Width:  |  Height:  |  Size: 575 B

+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" width="200" height="80">
<rect x="2" y="2" width="196" height="76" rx="12" fill="none" stroke="#00a693" stroke-opacity="0.3" stroke-width="2"/>
<circle cx="40" cy="40" r="20" fill="#017065"/>
<text x="40" y="47" font-family="Tahoma, sans-serif" font-size="20" font-weight="bold" fill="#ffffff" text-anchor="middle">ت</text>
<rect x="72" y="32" width="100" height="8" rx="4" fill="#00a693" fill-opacity="0.35"/>
<rect x="72" y="46" width="70" height="6" rx="3" fill="#00a693" fill-opacity="0.2"/>
</svg>

After

Width:  |  Height:  |  Size: 575 B

-8
View File
@@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 60" width="220" height="60">
<rect x="2" y="2" width="56" height="56" rx="14" fill="#00a693"/>
<rect x="16" y="14" width="28" height="32" rx="4" fill="#04120f"/>
<rect x="20" y="18" width="8" height="10" rx="1" fill="#00a693"/>
<rect x="32" y="18" width="8" height="10" rx="1" fill="#00a693"/>
<text x="70" y="27" font-family="Tahoma, sans-serif" font-size="20" font-weight="bold" fill="#e6f7f4">روبات مارکت</text>
<text x="70" y="46" font-family="Tahoma, sans-serif" font-size="12" fill="#8fdccc">Robot Market</text>
</svg>

Before

Width:  |  Height:  |  Size: 604 B

-28
View File
@@ -1,28 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 700" width="400" height="700">
<defs>
<linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#00a693" stop-opacity="0.95"/>
<stop offset="1" stop-color="#08554e"/>
</linearGradient>
</defs>
<rect x="40" y="30" width="320" height="620" rx="26" fill="url(#body)" stroke="#012e28" stroke-width="6"/>
<rect x="70" y="70" width="260" height="360" rx="10" fill="#04120f" opacity="0.55"/>
<g fill="#0b3d38" opacity="0.9">
<rect x="85" y="85" width="55" height="80" rx="4"/>
<rect x="150" y="85" width="55" height="80" rx="4"/>
<rect x="215" y="85" width="55" height="80" rx="4"/>
<rect x="280" y="85" width="35" height="80" rx="4"/>
<rect x="85" y="175" width="55" height="80" rx="4"/>
<rect x="150" y="175" width="55" height="80" rx="4"/>
<rect x="215" y="175" width="55" height="80" rx="4"/>
<rect x="280" y="175" width="35" height="80" rx="4"/>
<rect x="85" y="265" width="55" height="80" rx="4"/>
<rect x="150" y="265" width="55" height="80" rx="4"/>
<rect x="215" y="265" width="55" height="80" rx="4"/>
<rect x="280" y="265" width="35" height="80" rx="4"/>
</g>
<rect x="70" y="450" width="260" height="150" rx="10" fill="#04120f" opacity="0.4"/>
<circle cx="200" cy="525" r="34" fill="none" stroke="#e6f7f4" stroke-width="4"/>
<rect x="185" y="595" width="30" height="40" rx="4" fill="#04120f"/>
<text x="200" y="670" font-family="Tahoma, sans-serif" font-size="26" fill="#e6f7f4" text-anchor="middle">RM-35</text>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

-28
View File
@@ -1,28 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 700" width="400" height="700">
<defs>
<linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#dff3ef"/>
</linearGradient>
</defs>
<rect x="40" y="30" width="320" height="620" rx="26" fill="url(#body)" stroke="#00a693" stroke-width="6"/>
<rect x="70" y="70" width="260" height="360" rx="10" fill="#ffffff" opacity="0.9" stroke="#8fdccc" stroke-width="2"/>
<g fill="#c0ebe3" stroke="#00a693" stroke-width="1.5">
<rect x="85" y="85" width="55" height="80" rx="4"/>
<rect x="150" y="85" width="55" height="80" rx="4"/>
<rect x="215" y="85" width="55" height="80" rx="4"/>
<rect x="280" y="85" width="35" height="80" rx="4"/>
<rect x="85" y="175" width="55" height="80" rx="4"/>
<rect x="150" y="175" width="55" height="80" rx="4"/>
<rect x="215" y="175" width="55" height="80" rx="4"/>
<rect x="280" y="175" width="35" height="80" rx="4"/>
<rect x="85" y="265" width="55" height="80" rx="4"/>
<rect x="150" y="265" width="55" height="80" rx="4"/>
<rect x="215" y="265" width="55" height="80" rx="4"/>
<rect x="280" y="265" width="35" height="80" rx="4"/>
</g>
<rect x="70" y="450" width="260" height="150" rx="10" fill="#ffffff" opacity="0.9" stroke="#8fdccc" stroke-width="2"/>
<circle cx="200" cy="525" r="34" fill="none" stroke="#00a693" stroke-width="4"/>
<rect x="185" y="595" width="30" height="40" rx="4" fill="#00a693"/>
<text x="200" y="670" font-family="Tahoma, sans-serif" font-size="26" fill="#00a693" text-anchor="middle">RM-35 · White</text>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

-28
View File
@@ -1,28 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 700" width="400" height="700">
<defs>
<linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#00a693" stop-opacity="0.95"/>
<stop offset="1" stop-color="#08554e"/>
</linearGradient>
</defs>
<rect x="40" y="30" width="320" height="620" rx="26" fill="url(#body)" stroke="#012e28" stroke-width="6"/>
<rect x="70" y="70" width="260" height="360" rx="10" fill="#04120f" opacity="0.55"/>
<g fill="#0b3d38" opacity="0.9">
<rect x="85" y="85" width="55" height="80" rx="4"/>
<rect x="150" y="85" width="55" height="80" rx="4"/>
<rect x="215" y="85" width="55" height="80" rx="4"/>
<rect x="280" y="85" width="35" height="80" rx="4"/>
<rect x="85" y="175" width="55" height="80" rx="4"/>
<rect x="150" y="175" width="55" height="80" rx="4"/>
<rect x="215" y="175" width="55" height="80" rx="4"/>
<rect x="280" y="175" width="35" height="80" rx="4"/>
<rect x="85" y="265" width="55" height="80" rx="4"/>
<rect x="150" y="265" width="55" height="80" rx="4"/>
<rect x="215" y="265" width="55" height="80" rx="4"/>
<rect x="280" y="265" width="35" height="80" rx="4"/>
</g>
<rect x="70" y="450" width="260" height="150" rx="10" fill="#04120f" opacity="0.4"/>
<circle cx="200" cy="525" r="34" fill="none" stroke="#e6f7f4" stroke-width="4"/>
<rect x="185" y="595" width="30" height="40" rx="4" fill="#04120f"/>
<text x="200" y="670" font-family="Tahoma, sans-serif" font-size="26" fill="#e6f7f4" text-anchor="middle">RM-48</text>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

-28
View File
@@ -1,28 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 700" width="400" height="700">
<defs>
<linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#dff3ef"/>
</linearGradient>
</defs>
<rect x="40" y="30" width="320" height="620" rx="26" fill="url(#body)" stroke="#00a693" stroke-width="6"/>
<rect x="70" y="70" width="260" height="360" rx="10" fill="#ffffff" opacity="0.9" stroke="#8fdccc" stroke-width="2"/>
<g fill="#c0ebe3" stroke="#00a693" stroke-width="1.5">
<rect x="85" y="85" width="55" height="80" rx="4"/>
<rect x="150" y="85" width="55" height="80" rx="4"/>
<rect x="215" y="85" width="55" height="80" rx="4"/>
<rect x="280" y="85" width="35" height="80" rx="4"/>
<rect x="85" y="175" width="55" height="80" rx="4"/>
<rect x="150" y="175" width="55" height="80" rx="4"/>
<rect x="215" y="175" width="55" height="80" rx="4"/>
<rect x="280" y="175" width="35" height="80" rx="4"/>
<rect x="85" y="265" width="55" height="80" rx="4"/>
<rect x="150" y="265" width="55" height="80" rx="4"/>
<rect x="215" y="265" width="55" height="80" rx="4"/>
<rect x="280" y="265" width="35" height="80" rx="4"/>
</g>
<rect x="70" y="450" width="260" height="150" rx="10" fill="#ffffff" opacity="0.9" stroke="#8fdccc" stroke-width="2"/>
<circle cx="200" cy="525" r="34" fill="none" stroke="#00a693" stroke-width="4"/>
<rect x="185" y="595" width="30" height="40" rx="4" fill="#00a693"/>
<text x="200" y="670" font-family="Tahoma, sans-serif" font-size="26" fill="#00a693" text-anchor="middle">RM-48 · White</text>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

-28
View File
@@ -1,28 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 700" width="400" height="700">
<defs>
<linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#00a693" stop-opacity="0.95"/>
<stop offset="1" stop-color="#08554e"/>
</linearGradient>
</defs>
<rect x="40" y="30" width="320" height="620" rx="26" fill="url(#body)" stroke="#012e28" stroke-width="6"/>
<rect x="70" y="70" width="260" height="360" rx="10" fill="#04120f" opacity="0.55"/>
<g fill="#0b3d38" opacity="0.9">
<rect x="85" y="85" width="55" height="80" rx="4"/>
<rect x="150" y="85" width="55" height="80" rx="4"/>
<rect x="215" y="85" width="55" height="80" rx="4"/>
<rect x="280" y="85" width="35" height="80" rx="4"/>
<rect x="85" y="175" width="55" height="80" rx="4"/>
<rect x="150" y="175" width="55" height="80" rx="4"/>
<rect x="215" y="175" width="55" height="80" rx="4"/>
<rect x="280" y="175" width="35" height="80" rx="4"/>
<rect x="85" y="265" width="55" height="80" rx="4"/>
<rect x="150" y="265" width="55" height="80" rx="4"/>
<rect x="215" y="265" width="55" height="80" rx="4"/>
<rect x="280" y="265" width="35" height="80" rx="4"/>
</g>
<rect x="70" y="450" width="260" height="150" rx="10" fill="#04120f" opacity="0.4"/>
<circle cx="200" cy="525" r="34" fill="none" stroke="#e6f7f4" stroke-width="4"/>
<rect x="185" y="595" width="30" height="40" rx="4" fill="#04120f"/>
<text x="200" y="670" font-family="Tahoma, sans-serif" font-size="26" fill="#e6f7f4" text-anchor="middle">RM-60</text>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

-28
View File
@@ -1,28 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 700" width="400" height="700">
<defs>
<linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#dff3ef"/>
</linearGradient>
</defs>
<rect x="40" y="30" width="320" height="620" rx="26" fill="url(#body)" stroke="#00a693" stroke-width="6"/>
<rect x="70" y="70" width="260" height="360" rx="10" fill="#ffffff" opacity="0.9" stroke="#8fdccc" stroke-width="2"/>
<g fill="#c0ebe3" stroke="#00a693" stroke-width="1.5">
<rect x="85" y="85" width="55" height="80" rx="4"/>
<rect x="150" y="85" width="55" height="80" rx="4"/>
<rect x="215" y="85" width="55" height="80" rx="4"/>
<rect x="280" y="85" width="35" height="80" rx="4"/>
<rect x="85" y="175" width="55" height="80" rx="4"/>
<rect x="150" y="175" width="55" height="80" rx="4"/>
<rect x="215" y="175" width="55" height="80" rx="4"/>
<rect x="280" y="175" width="35" height="80" rx="4"/>
<rect x="85" y="265" width="55" height="80" rx="4"/>
<rect x="150" y="265" width="55" height="80" rx="4"/>
<rect x="215" y="265" width="55" height="80" rx="4"/>
<rect x="280" y="265" width="35" height="80" rx="4"/>
</g>
<rect x="70" y="450" width="260" height="150" rx="10" fill="#ffffff" opacity="0.9" stroke="#8fdccc" stroke-width="2"/>
<circle cx="200" cy="525" r="34" fill="none" stroke="#00a693" stroke-width="4"/>
<rect x="185" y="595" width="30" height="40" rx="4" fill="#00a693"/>
<text x="200" y="670" font-family="Tahoma, sans-serif" font-size="26" fill="#00a693" text-anchor="middle">RM-60 · White</text>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 160" width="120" height="160">
<path d="M20 10 L100 10 L92 150 L28 150 Z" fill="#ffb020" stroke="#7a4a00" stroke-width="3"/>
<path d="M20 10 L100 10 L96 45 L24 45 Z" fill="#00a693"/>
<circle cx="60" cy="90" r="26" fill="#fff4d6" opacity="0.85"/>
<text x="60" y="30" font-family="Tahoma, sans-serif" font-size="14" fill="#ffffff" text-anchor="middle">چیپس</text>
</svg>

Before

Width:  |  Height:  |  Size: 438 B

-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 160" width="120" height="160">
<path d="M20 10 L100 10 L92 150 L28 150 Z" fill="#e6533c" stroke="#6b1f10" stroke-width="3"/>
<path d="M20 10 L100 10 L96 45 L24 45 Z" fill="#00a693"/>
<circle cx="60" cy="90" r="26" fill="#ffe3d6" opacity="0.85"/>
<text x="60" y="30" font-family="Tahoma, sans-serif" font-size="14" fill="#ffffff" text-anchor="middle">چیپس</text>
</svg>

Before

Width:  |  Height:  |  Size: 438 B

-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 180" width="100" height="180">
<rect x="20" y="10" width="60" height="160" rx="14" fill="#00a693" stroke="#012e28" stroke-width="3"/>
<rect x="20" y="60" width="60" height="45" fill="#e6f7f4" opacity="0.9"/>
<text x="50" y="88" font-family="Tahoma, sans-serif" font-size="13" fill="#00594f" text-anchor="middle">نوشابه</text>
<rect x="38" y="0" width="24" height="14" rx="3" fill="#8fdccc"/>
</svg>

Before

Width:  |  Height:  |  Size: 470 B

-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 180" width="100" height="180">
<rect x="20" y="10" width="60" height="160" rx="14" fill="#ffb020" stroke="#012e28" stroke-width="3"/>
<rect x="20" y="60" width="60" height="45" fill="#fff4d6" opacity="0.9"/>
<text x="50" y="88" font-family="Tahoma, sans-serif" font-size="13" fill="#7a4a00" text-anchor="middle">نوشابه</text>
<rect x="38" y="0" width="24" height="14" rx="3" fill="#ffe0a3"/>
</svg>

Before

Width:  |  Height:  |  Size: 470 B