{/* ------------------------------------------------------------------ */}
- {/* شکل مورب تزئینی سمت راست/چپ — نسخه سبز برند بهجای قرمز Sielaff */}
+ {/* Decorative brand-colored shape. */}
{/* ------------------------------------------------------------------ */}
{/* ------------------------------------------------------------------ */}
- {/* اسلایدهای عکس — همه اسلایدها روی هم قرار دارند و فقط با opacity */}
- {/* محو/نمایان میشوند (transition نرم بهجای پرش ناگهانی) */}
+ {/* Fade between overlapping product images. */}
+ {/* Use opacity transitions for smooth slide changes. */}
{/* ------------------------------------------------------------------ */}
{slides.map((s, i) => (
@@ -88,7 +81,7 @@ export default function HeroSection() {
))}
- {/* لایهی نیمهشفاف پشت متن، برای خوانایی روی هر عکسی */}
+ {/* Overlay for text readability. */}
{/* ------------------------------------------------------------------ */}
- {/* متن روی اسلاید: کیکر کوچک + عنوان بزرگ دو خطی + توضیح + دکمه CTA */}
+ {/* Active slide headline, description, and call to action. */}
{/* ------------------------------------------------------------------ */}
@@ -124,7 +117,7 @@ export default function HeroSection() {
{/* ------------------------------------------------------------------ */}
- {/* فلشهای ناوبری دستی (قبلی / بعدی) — وسط دو طرف */}
+ {/* Previous and next slide controls. */}
{/* ------------------------------------------------------------------ */}
handleManualNav('prev')}
@@ -141,7 +134,7 @@ export default function HeroSection() {
- {/* نقطههای شمارشگر اسلاید پایین صفحه — کلیک روی هرکدام مستقیم به همان اسلاید میرود */}
+ {/* Jump directly to a slide using the indicators. */}
{slides.map((s, i) => (
(null);
+ const trackRef = useRef(null);
+ const videoRef = useRef(null);
+ const dispatch = useAppDispatch();
const {t} = useLanguage();
- const [quickViewMachine, setQuickViewMachine] = useState(null);
+ const [quickViewMachine, setQuickViewMachine] = useState(null);
const [videoAvailable, setVideoAvailable] = useState(true);
useEffect(() => {
@@ -33,10 +34,10 @@ export default function HorizontalShowcase() {
Math.max(track.scrollWidth - window.innerWidth, 0)
);
- let animationFrameId = null;
+ let animationFrameId: number | null = null;
let latestProgress = 0;
- const syncVideo = (progress) => {
+ const syncVideo = (progress: number) => {
latestProgress = progress;
if (animationFrameId !== null) return;
@@ -148,4 +149,4 @@ export default function HorizontalShowcase() {
);
-}
\ No newline at end of file
+}
diff --git a/components/LanguageToggle.jsx b/components/LanguageToggle.tsx
similarity index 89%
rename from components/LanguageToggle.jsx
rename to components/LanguageToggle.tsx
index 7e0a65e..a2e4e56 100644
--- a/components/LanguageToggle.jsx
+++ b/components/LanguageToggle.tsx
@@ -1,6 +1,6 @@
'use client';
-// دکمه سوییچ زبان فارسی/انگلیسی.
+// Switch between Persian and English.
import { Button, Tooltip } from 'antd';
import { useLanguage } from '@/app/context/LanguageContext';
diff --git a/components/LocationsSection.jsx b/components/LocationsSection.tsx
similarity index 90%
rename from components/LocationsSection.jsx
rename to components/LocationsSection.tsx
index bbd7e7e..5b22399 100644
--- a/components/LocationsSection.jsx
+++ b/components/LocationsSection.tsx
@@ -1,6 +1,6 @@
'use client';
-// گرید «مکان مناسب برای نصب» — هتلها، مدارس، داروخانهها، بیمارستانها، شیفت شب، محصولات تخصصی.
+// Suggested installation locations for vending machines.
import {
HomeOutlined,
diff --git a/components/MobileShowcase.jsx b/components/MobileShowcase.tsx
similarity index 93%
rename from components/MobileShowcase.jsx
rename to components/MobileShowcase.tsx
index d8658da..2e39628 100644
--- a/components/MobileShowcase.jsx
+++ b/components/MobileShowcase.tsx
@@ -1,18 +1,19 @@
'use client';
+import type {Machine} from '@/types/domain';
import {useState} from 'react';
import {Modal, Button, message} from 'antd';
import {ShoppingCartOutlined, EyeOutlined} from '@ant-design/icons';
-import {useDispatch} from 'react-redux';
+import {useAppDispatch} from '@/store/hooks';
import {useLanguage} from '@/app/context/LanguageContext';
import {addToCart} from '@/store/cartSlice';
export default function MobileShowcase() {
- const dispatch = useDispatch();
+ const dispatch = useAppDispatch();
const {t, dir} = useLanguage();
- const [quickViewMachine, setQuickViewMachine] = useState(null);
+ const [quickViewMachine, setQuickViewMachine] = useState(null);
- const handleAddToCart = (machine) => {
+ const handleAddToCart = (machine: Machine) => {
dispatch(
addToCart({
id: machine.id,
@@ -104,4 +105,4 @@ export default function MobileShowcase() {
);
-}
\ No newline at end of file
+}
diff --git a/components/ShowcaseSection.jsx b/components/ShowcaseSection.tsx
similarity index 80%
rename from components/ShowcaseSection.jsx
rename to components/ShowcaseSection.tsx
index 9be9046..3abab08 100644
--- a/components/ShowcaseSection.jsx
+++ b/components/ShowcaseSection.tsx
@@ -7,14 +7,14 @@ import MobileShowcase from './MobileShowcase';
const MOBILE_BREAKPOINT = 768;
export default function ShowcaseSection() {
- const [isMobile, setIsMobile] = useState(null);
+ const [isMobile, setIsMobile] = useState(null);
useEffect(() => {
const mediaQuery = window.matchMedia(
`(max-width: ${MOBILE_BREAKPOINT - 1}px)`
);
- const handleChange = (event) => setIsMobile(event.matches);
+ const handleChange = (event: MediaQueryListEvent) => setIsMobile(event.matches);
setIsMobile(mediaQuery.matches);
mediaQuery.addEventListener('change', handleChange);
@@ -25,4 +25,4 @@ export default function ShowcaseSection() {
if (isMobile === null) return null;
return isMobile ? (null);
+ const lensRef = useRef(null);
+ const revealRef = useRef(null);
- const handleMouseMove = (e) => {
+ const handleMouseMove = (e: MouseEvent) => {
const stage = stageRef.current;
if (!stage) return;
const rect = stage.getBoundingClientRect();
diff --git a/data/content.js b/data/content.ts
similarity index 99%
rename from data/content.js
rename to data/content.ts
index c282a4d..faca087 100644
--- a/data/content.js
+++ b/data/content.ts
@@ -1,10 +1,12 @@
+import type {FloatingSnack, Locale, Machine, SiteContent} from '@/types/domain';
+
// ---------------------------------------------------------------------------
// Single bilingual content source (fa/en). Every UI string and every piece of
// business copy lives here, per locale. Components read via useLanguage().
// Asset paths (images/gifs/video) are locale-independent and stay the same.
// ---------------------------------------------------------------------------
-const machinesFa = [
+const machinesFa: Machine[] = [
{
id: 'rm-35',
name: 'روبات مارکت ۳۵ کانال',
@@ -43,7 +45,7 @@ const machinesFa = [
},
];
-const machinesEn = [
+const machinesEn: Machine[] = [
{
id: 'rm-35',
name: 'Robot Market RM-35',
@@ -82,7 +84,7 @@ const machinesEn = [
},
];
-export const content = {
+export const content: Record = {
fa: {
dir: 'rtl',
lang: 'fa',
@@ -417,7 +419,7 @@ export const content = {
};
// Locale-independent asset config (positions/paths only — same in both languages).
-export const floatingSnacks = [
+export const floatingSnacks: FloatingSnack[] = [
{id: 'chips-1', image: '/images/snacks/item-1.webp', size: 60, top: '5%', left: '-5%', duration: 5.5, delay: 0},
{id: 'soda-1', image: '/images/snacks/item-2.webp', size: 55, top: '68%', left: '2%', duration: 6.2, delay: 0.6},
{id: 'chips-2', image: '/images/snacks/item-3.webp', size: 65, top: '10%', left: '85%', duration: 4.8, delay: 0.3},
diff --git a/jsconfig.json b/jsconfig.json
deleted file mode 100644
index fe655bc..0000000
--- a/jsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "compilerOptions": {
- "baseUrl": ".",
- "paths": {
- "@/*": ["./*"]
- },
- "jsx": "react"
- }
-}
diff --git a/lib/axios.js b/lib/axios.ts
similarity index 75%
rename from lib/axios.js
rename to lib/axios.ts
index 32f7867..36f1bbe 100644
--- a/lib/axios.js
+++ b/lib/axios.ts
@@ -43,11 +43,11 @@ api.interceptors.response.use(
}
if (status >= 500) {
- // message.error('خطایی در سرور رخ داد. لطفاً بعداً تلاش کنید.');
+ // TODO: Display a server error message.
}
} else if (error.request) {
- // درخواست ارسال شد ولی هیچ جوابی نیومد (قطعی اینترنت، سرور خاموش و ...)
- // TODO: message.error('اتصال با سرور برقرار نشد.');
+ // The request was sent, but no response arrived.
+ // TODO: Display a network connection error.
}
@@ -56,4 +56,4 @@ api.interceptors.response.use(
}
);
-export default api;
\ No newline at end of file
+export default api;
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..4f11a03
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// ) => {
const product = action.payload;
const existing = state.items.find((item) => item.id === product.id);
if (existing) {
@@ -19,20 +22,20 @@ const cartSlice = createSlice({
}
state.isDrawerOpen = true;
},
- removeFromCart: (state, action) => {
+ removeFromCart: (state, action: PayloadAction) => {
state.items = state.items.filter((item) => item.id !== action.payload);
},
- setQuantity: (state, action) => {
+ setQuantity: (state, action: PayloadAction<{id: string; qty: number}>) => {
const { id, qty } = action.payload;
if (!Number.isSafeInteger(qty) || qty < 1) return;
const item = state.items.find((item) => item.id === id);
if (item) item.qty = qty;
},
- incrementQty: (state, action) => {
+ incrementQty: (state, action: PayloadAction) => {
const item = state.items.find((item) => item.id === action.payload);
if (item) item.qty += 1;
},
- decrementQty: (state, action) => {
+ decrementQty: (state, action: PayloadAction) => {
const item = state.items.find((item) => item.id === action.payload);
if (item && item.qty > 1) {
item.qty -= 1;
@@ -68,11 +71,11 @@ export const {
} = cartSlice.actions;
// Selectors
-export const selectCartItems = (state) => state.cart.items;
-export const selectCartCount = (state) =>
+export const selectCartItems = (state: RootState) => state.cart.items;
+export const selectCartCount = (state: RootState) =>
state.cart.items.reduce((sum, item) => sum + item.qty, 0);
-export const selectCartTotal = (state) =>
+export const selectCartTotal = (state: RootState) =>
state.cart.items.reduce((sum, item) => sum + item.qty * item.priceNumeric, 0);
-export const selectIsDrawerOpen = (state) => state.cart.isDrawerOpen;
+export const selectIsDrawerOpen = (state: RootState) => state.cart.isDrawerOpen;
export default cartSlice.reducer;
diff --git a/store/hooks.ts b/store/hooks.ts
new file mode 100644
index 0000000..4fefe95
--- /dev/null
+++ b/store/hooks.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from './store';
+
+export const useAppDispatch = useDispatch.withTypes();
+export const useAppSelector = useSelector.withTypes();
diff --git a/store/store.js b/store/store.ts
similarity index 66%
rename from store/store.js
rename to store/store.ts
index e4de347..b52e14e 100644
--- a/store/store.js
+++ b/store/store.ts
@@ -10,3 +10,7 @@ export const makeStore = () =>
// Singleton store for the client (App Router renders providers on the client tree).
export const store = makeStore();
+
+export type AppStore = ReturnType;
+export type RootState = ReturnType;
+export type AppDispatch = AppStore["dispatch"];
diff --git a/tailwind.config.js b/tailwind.config.ts
similarity index 93%
rename from tailwind.config.js
rename to tailwind.config.ts
index 91c2677..6010570 100644
--- a/tailwind.config.js
+++ b/tailwind.config.ts
@@ -1,5 +1,5 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
+import type {Config} from 'tailwindcss';
+const config: Config = {
darkMode: 'class',
content: [
'./app/**/*.{js,jsx,ts,tsx}',
@@ -55,3 +55,5 @@ module.exports = {
preflight: true,
},
};
+
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..05cc39d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [{ "name": "next" }],
+ "baseUrl": ".",
+ "paths": { "@/*": ["./*"] }
+ },
+ "include": ["next-env.d.ts", "app/**/*.ts", "app/**/*.tsx", "components/**/*.tsx", "data/**/*.ts", "lib/**/*.ts", "store/**/*.ts", "types/**/*.ts", "tailwind.config.ts", ".next/types/**/*.ts"],
+ "exclude": ["node_modules", "docs", "out"]
+}
diff --git a/types/domain.ts b/types/domain.ts
new file mode 100644
index 0000000..4c26c70
--- /dev/null
+++ b/types/domain.ts
@@ -0,0 +1,81 @@
+export type Locale = 'fa' | 'en';
+export type Direction = 'rtl' | 'ltr';
+export type Theme = 'light' | 'dark';
+
+export interface Machine {
+ id: string;
+ name: string;
+ shortLabel: string;
+ priceLabel: string;
+ priceNumeric: number;
+ description: string;
+ highlights: string[];
+ image: string;
+ imageAlt: string;
+ gif: string;
+}
+
+export type CartProduct = Pick;
+export interface CartItem extends CartProduct { qty: number }
+export interface CartState { items: CartItem[]; isDrawerOpen: boolean }
+
+export interface FloatingSnack {
+ id: string;
+ image: string;
+ size: number;
+ top: string;
+ left: string;
+ duration: number;
+ delay: number;
+}
+
+export type FeatureIcon = 'safety' | 'consulting' | 'installment' | 'packaging';
+export type LocationIcon = 'hotel' | 'school' | 'pharmacy' | 'hospital' | 'night' | 'specialty';
+
+interface InfoCard {
+ id: string;
+ icon: Icon;
+ title: string;
+ description: string;
+}
+
+export interface SiteContent {
+ dir: Direction;
+ lang: Locale;
+ meta: { title: string; description: string };
+ nav: Record<'home' | 'showcase' | 'about' | 'locations' | 'contact' | 'login', string>;
+ hero: {
+ loading: string;
+ cta: string;
+ slides: { id: string; kicker: string; titleLines: string[]; sub: string; image: string }[];
+ };
+ cart: {
+ title: string;
+ empty: string;
+ total: string;
+ checkout: string;
+ checkoutToast: string;
+ addToast: (name: string) => string;
+ };
+ machineActions: {
+ addToCart: string;
+ quickView: string;
+ wishlistAdd: string;
+ wishlistRemove: string;
+ hoverHint: string;
+ altVariant: string;
+ gifAlt: (name: string) => string;
+ };
+ machines: Machine[];
+ features: InfoCard[];
+ about: { eyebrow: string; legalName: string; more: string; less: string; paragraphs: string[] };
+ locations: { title: string; items: InfoCard[] };
+ footer: Record<'aboutLabel' | 'aboutText' | 'quickLinks' | 'contactTitle' | 'factoryLabel' | 'salesLabel' | 'rights', string>;
+ contactInfo: {
+ orderPhone: string;
+ orderPhoneHref: string;
+ factoryAddress: string;
+ salesOfficeAddress: string;
+ socialLinks: { id: string; label: string; href: string }[];
+ };
+}