update
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"jsx": "react"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |