[V0_FILE]javascriptreact:file="src/main.jsx" isMerged="true" import React from "react" import ReactDOM from "react-dom/client" import { BrowserRouter } from "react-router-dom" import App from "./App.jsx" import "./index.css" ReactDOM.createRoot(document.getElementById("root")).render( , ) [V0_FILE]css:file="src/index.css" isMerged="true" * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; direction: rtl; text-align: right; } #root { min-height: 100vh; display: flex; flex-direction: column; } .app { min-height: 100vh; display: flex; flex-direction: column; } .main-content { flex: 1; padding-top: 80px; /* Account for fixed navbar */ } /* Common button styles */ .btn { padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; transition: all 0.3s ease; } .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); } .btn-secondary { background: transparent; color: #667eea; border: 2px solid #667eea; } .btn-secondary:hover { background: #667eea; color: white; } /* Responsive design */ @media (max-width: 768px) { .main-content { padding-top: 70px; } } [V0_FILE]css:file="src/App.css" isMerged="true" .app { min-height: 100vh; display: flex; flex-direction: column; } .main-content { flex: 1; min-height: calc(100vh - 160px); /* Adjust based on header/footer height */ } /* Global animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.6s ease-out; } /* Loading spinner */ .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } [V0_FILE]css:file="src/pages/Home.css" isMerged="true" .home-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .hero-section { text-align: center; padding: 80px 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; margin: -80px -20px 60px -20px; border-radius: 0 0 50px 50px; } .hero-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .hero-description { font-size: 1.3rem; margin-bottom: 40px; opacity: 0.9; max-width: 600px; margin-left: auto; margin-right: auto; } .hero-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .features-section { padding: 60px 0; } .features-section h2 { text-align: center; font-size: 2.5rem; margin-bottom: 50px; color: #333; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px; } .feature-card { background: white; padding: 40px 30px; border-radius: 15px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #f0f0f0; } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .feature-icon { font-size: 3rem; margin-bottom: 20px; } .feature-card h3 { font-size: 1.5rem; margin-bottom: 15px; color: #333; } .feature-card p { color: #666; line-height: 1.6; } /* Responsive design */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .hero-description { font-size: 1.1rem; } .hero-buttons { flex-direction: column; align-items: center; } .features-grid { grid-template-columns: 1fr; gap: 20px; } .feature-card { padding: 30px 20px; } } @media (max-width: 480px) { .hero-section { padding: 60px 20px; } .hero-title { font-size: 2rem; } } [V0_FILE]css:file="src/pages/Login.css" isMerged="true" .login-container { min-height: calc(100vh - 160px); display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } .login-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); width: 100%; max-width: 450px; animation: fadeIn 0.6s ease-out; } .login-header { text-align: center; margin-bottom: 30px; } .login-header h2 { font-size: 2rem; color: #333; margin-bottom: 10px; } .login-header p { color: #666; font-size: 1rem; } .login-form { display: flex; flex-direction: column; gap: 20px; } .form-group { display: flex; flex-direction: column; } .form-group label { font-weight: 600; margin-bottom: 8px; color: #333; } .form-group input { padding: 15px; border: 2px solid #e1e5e9; border-radius: 10px; font-size: 16px; transition: border-color 0.3s ease, box-shadow 0.3s ease; background: #f8f9fa; } .form-group input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); background: white; } .form-group input.error { border-color: #e74c3c; background: #fdf2f2; } .error-message { color: #e74c3c; font-size: 14px; margin-top: 5px; font-weight: 500; } .login-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; margin-top: 10px; } .login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); } .login-btn:active { transform: translateY(0); } .login-footer { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e1e5e9; } .login-footer p { color: #666; } .login-footer a { color: #667eea; text-decoration: none; font-weight: 600; } .login-footer a:hover { text-decoration: underline; } /* Responsive design */ @media (max-width: 480px) { .login-card { padding: 30px 20px; margin: 10px; } .login-header h2 { font-size: 1.5rem; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "net4all", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.20.1" }, "devDependencies": { "@types/react": "^18.2.37", "@types/react-dom": "^18.2.15", "@vitejs/plugin-react": "^4.1.1", "eslint": "^8.53.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.4", "vite": "^5.0.0" } } [V0_FILE]javascript:file="vite.config.js" isMerged="true" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { port: 3000, open: true, }, build: { outDir: "dist", sourcemap: true, }, }) [V0_FILE]html:file="index.html" isMerged="true" Net4All - آموزش شبکه و امنیت

[V0_FILE]javascriptreact:file="src/components/menu/Menu.jsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Link, useLocation } from "react-router-dom" import "./Menu.css" /** * کامپوننت منوی اصلی سایت * شامل منوی اصلی، زیرمنوها و منوی موبایل * @returns {JSX.Element} کامپوننت منو */ const Menu = () => { // وضعیت منوی موبایل const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) // وضعیت زیرمنوهای باز const [openDropdown, setOpenDropdown] = useState(null) // مرجع برای تشخیص کلیک خارج از منو const menuRef = useRef(null) const location = useLocation() /** * تغییر وضعیت منوی موبایل */ const toggleMobileMenu = () => { setIsMobileMenuOpen(!isMobileMenuOpen) // بستن تمام زیرمنوها هنگام باز/بسته کردن منوی موبایل setOpenDropdown(null) } /** * مدیریت باز/بسته کردن زیرمنوها * @param {string} dropdownName - نام زیرمنو */ const toggleDropdown = (dropdownName) => { setOpenDropdown(openDropdown === dropdownName ? null : dropdownName) } /** * تشخیص کلیک خارج از منو برای بستن زیرمنوها */ useEffect(() => { const handleClickOutside = (event) => { if (menuRef.current && !menuRef.current.contains(event.target)) { setOpenDropdown(null) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) /** * بستن منوی موبایل هنگام تغییر مسیر */ useEffect(() => { setIsMobileMenuOpen(false) setOpenDropdown(null) }, [location]) /** * تشخیص فعال بودن لینک * @param {string} path - مسیر لینک * @returns {string} کلاس فعال یا خالی */ const isActive = (path) => { return location.pathname === path ? "navbar__link--active" : "" } /** * آیتم‌های منوی اصلی */ const menuItems = [ { id: "network-plus", title: "Network+", path: "/network-plus", hasDropdown: true, dropdownItems: [ { title: "مبانی شبکه", path: "/network-plus/basics" }, { title: "پروتکل‌ها", path: "/network-plus/protocols" }, { title: "امنیت شبکه", path: "/network-plus/security" }, { title: "عیب‌یابی", path: "/network-plus/troubleshooting" }, ], }, { id: "cisco", title: "Cisco (CCNA)", path: "/cisco", hasDropdown: true, dropdownItems: [ { title: "CCNA 200-301", path: "/cisco/ccna-200-301" }, { title: "Switching", path: "/cisco/switching" }, { title: "Routing", path: "/cisco/routing" }, { title: "VLAN", path: "/cisco/vlan" }, { title: "آزمایشگاه", path: "/cisco/lab" }, ], }, { id: "mikrotik", title: "MikroTik", path: "/mikrotik", hasDropdown: true, dropdownItems: [ { title: "MTCNA", path: "/mikrotik/mtcna" }, { title: "RouterOS", path: "/mikrotik/routeros" }, { title: "Wireless", path: "/mikrotik/wireless" }, { title: "Firewall", path: "/mikrotik/firewall" }, ], }, { id: "sans", title: "SANS", path: "/sans", hasDropdown: true, dropdownItems: [ { title: "GIAC Security", path: "/sans/giac" }, { title: "Penetration Testing", path: "/sans/pentest" }, { title: "Digital Forensics", path: "/sans/forensics" }, { title: "Incident Response", path: "/sans/incident-response" }, ], }, { id: "pwk", title: "PWK", path: "/pwk", hasDropdown: true, dropdownItems: [ { title: "OSCP Prep", path: "/pwk/oscp" }, { title: "Buffer Overflow", path: "/pwk/buffer-overflow" }, { title: "Web Application", path: "/pwk/web-app" }, { title: "Privilege Escalation", path: "/pwk/privesc" }, ], }, ] return ( ) } export default Menu [V0_FILE]css:file="src/components/menu/Menu.css" isEdit="true" isMerged="true" /* ========================================================================== منوی اصلی - BEM Methodology ========================================================================== */ /* Block: navbar */ .navbar { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); position: fixed; top: 0; width: 100%; z-index: 1000; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } /* Element: navbar container */ .navbar__container { max-width: 1400px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; height: 80px; position: relative; } /* Element: navbar logo */ .navbar__logo { text-decoration: none; display: flex; align-items: center; transition: transform 0.3s ease; } .navbar__logo:hover { transform: scale(1.05); } .navbar__logo-text { font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; } /* Element: navbar menu */ .navbar__menu { display: flex; align-items: center; gap: 8px; } /* Element: navbar item */ .navbar__item { position: relative; } /* Modifier: dropdown item */ .navbar__item--dropdown { position: relative; } /* Element: navbar link */ .navbar__link { display: flex; align-items: center; gap: 6px; padding: 12px 20px; color: #2d3748; text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; background: none; border: none; cursor: pointer; white-space: nowrap; } .navbar__link:hover { background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); color: #667eea; transform: translateY(-1px); } /* Modifier: active link */ .navbar__link--active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } .navbar__link--active:hover { background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); color: white; } /* Modifier: dropdown link */ .navbar__link--dropdown { padding-left: 16px; } /* Element: dropdown icon */ .navbar__dropdown-icon { font-size: 12px; transition: transform 0.3s ease; margin-right: 4px; } /* Modifier: open dropdown icon */ .navbar__dropdown-icon--open { transform: rotate(180deg); } /* Element: dropdown menu */ .navbar__dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: white; border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.05); min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1001; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Modifier: active dropdown */ .navbar__dropdown--active { opacity: 1; visibility: visible; transform: translateY(0); } /* Element: dropdown link */ .navbar__dropdown-link { display: block; padding: 14px 20px; color: #4a5568; text-decoration: none; font-weight: 500; font-size: 14px; transition: all 0.2s ease; border-radius: 12px; margin: 4px 8px; } .navbar__dropdown-link:hover { background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); color: #667eea; transform: translateX(-4px); } .navbar__dropdown-link--active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } /* Element: login button */ .navbar__login-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-right: 16px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } .navbar__login-btn:hover { background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); } /* Element: login icon */ .navbar__login-icon { font-size: 16px; } /* Element: mobile toggle */ .navbar__toggle { display: none; flex-direction: column; background: none; border: none; cursor: pointer; padding: 8px; border-radius: 8px; transition: background 0.3s ease; } .navbar__toggle:hover { background: rgba(102, 126, 234, 0.1); } /* Element: toggle bar */ .navbar__toggle-bar { width: 24px; height: 3px; background: #2d3748; margin: 3px 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; } /* Modifier: active toggle */ .navbar__toggle--active .navbar__toggle-bar:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .navbar__toggle--active .navbar__toggle-bar:nth-child(2) { opacity: 0; } .navbar__toggle--active .navbar__toggle-bar:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } /* Element: overlay */ .navbar__overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ========================================================================== Responsive Design - Mobile First ========================================================================== */ /* موبایل - 320px تا 768px */ @media (max-width: 768px) { .navbar__container { height: 70px; padding: 0 16px; } .navbar__logo-text { font-size: 1.6rem; } .navbar__toggle { display: flex; } .navbar__menu { position: fixed; top: 70px; right: -100%; width: 320px; max-width: 90vw; height: calc(100vh - 70px); background: white; flex-direction: column; align-items: stretch; gap: 0; padding: 24px 0; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1); overflow-y: auto; } /* Modifier: active mobile menu */ .navbar__menu--active { right: 0; } .navbar__item { width: 100%; } .navbar__link { padding: 16px 24px; border-radius: 0; justify-content: space-between; font-size: 16px; } .navbar__link:hover { background: rgba(102, 126, 234, 0.05); transform: none; } .navbar__dropdown { position: static; box-shadow: none; border: none; border-radius: 0; background: #f8f9fa; margin: 0; opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .navbar__dropdown--active { max-height: 300px; } .navbar__dropdown-link { padding: 12px 48px; margin: 0; border-radius: 0; font-size: 15px; } .navbar__dropdown-link:hover { transform: none; background: rgba(102, 126, 234, 0.1); } .navbar__login-btn { margin: 16px 24px 0; justify-content: center; border-radius: 12px; } } /* تبلت - 768px تا 1024px */ @media (min-width: 768px) and (max-width: 1024px) { .navbar__container { padding: 0 20px; } .navbar__menu { gap: 4px; } .navbar__link { padding: 10px 16px; font-size: 14px; } .navbar__login-btn { padding: 10px 20px; margin-right: 12px; } } /* دسکتاپ بزرگ - بالای 1200px */ @media (min-width: 1200px) { .navbar__container { padding: 0 32px; } .navbar__menu { gap: 12px; } .navbar__link { padding: 14px 24px; font-size: 16px; } } /* ========================================================================== Accessibility & Performance ========================================================================== */ /* Focus states برای دسترسی */ .navbar__link:focus, .navbar__toggle:focus, .navbar__login-btn:focus { outline: 2px solid #667eea; outline-offset: 2px; } /* Reduced motion برای کاربران حساس به انیمیشن */ @media (prefers-reduced-motion: reduce) { .navbar, .navbar__link, .navbar__dropdown, .navbar__toggle-bar, .navbar__menu { transition: none; } } /* High contrast mode */ @media (prefers-contrast: high) { .navbar { border-bottom: 2px solid #000; } .navbar__link { border: 1px solid transparent; } .navbar__link:hover { border-color: #000; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .navbar { background: rgba(26, 32, 44, 0.95); border-bottom-color: rgba(255, 255, 255, 0.1); } .navbar__link { color: #e2e8f0; } .navbar__dropdown { background: #2d3748; border-color: rgba(255, 255, 255, 0.1); } .navbar__dropdown-link { color: #cbd5e0; } .navbar__toggle-bar { background: #e2e8f0; } } [V0_FILE]javascriptreact:file="src/components/header/Header.jsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Link } from "react-router-dom" import "./Header.css" /** * کامپوننت هدر اصلی سایت * شامل معرفی شخصی، هدف سایت و دعوت به عمل * @returns {JSX.Element} کامپوننت هدر */ const Header = () => { // وضعیت انیمیشن متن const [isVisible, setIsVisible] = useState(false) // متن‌های چرخشی برای نمایش تخصص‌ها const [currentSpecialty, setCurrentSpecialty] = useState(0) /** * لیست تخصص‌های امنیت شبکه */ const specialties = ["امنیت شبکه", "تست نفوذ", "تحلیل آسیب‌پذیری", "پاسخ به حوادث", "امنیت سایبری"] /** * فعال‌سازی انیمیشن هنگام بارگذاری */ useEffect(() => { const timer = setTimeout(() => { setIsVisible(true) }, 300) return () => clearTimeout(timer) }, []) /** * چرخش خودکار متن تخصص‌ها */ useEffect(() => { const interval = setInterval(() => { setCurrentSpecialty((prev) => (prev + 1) % specialties.length) }, 3000) return () => clearInterval(interval) }, [specialties.length]) /** * اسکرول نرم به بخش دوره‌ها */ const scrollToCourses = () => { const coursesSection = document.getElementById("courses") if (coursesSection) { coursesSection.scrollIntoView({ behavior: "smooth" }) } } return ( ) } export default Header [V0_FILE]css:file="src/components/header/Header.css" isMerged="true" /* ========================================================================== هدر اصلی سایت - BEM Methodology ========================================================================== */ /* Block: header */ .header { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } /* Element: background */ .header__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .header__background-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%); animation: patternMove 20s ease-in-out infinite; } /* Element: floating elements */ .header__floating-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .header__floating-element { position: absolute; font-size: 2rem; opacity: 0.1; animation: float 6s ease-in-out infinite; } .header__floating-element--1 { top: 20%; left: 10%; animation-delay: 0s; } .header__floating-element--2 { top: 60%; left: 80%; animation-delay: 1s; } .header__floating-element--3 { top: 30%; left: 70%; animation-delay: 2s; } .header__floating-element--4 { top: 80%; left: 20%; animation-delay: 3s; } .header__floating-element--5 { top: 10%; left: 60%; animation-delay: 4s; } /* Element: container */ .header__container { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 0 24px; width: 100%; } /* Element: content */ .header__content { display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: center; opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* Modifier: visible content */ .header__content--visible { opacity: 1; transform: translateY(0); } /* Element: main content */ .header__main { color: white; } /* Element: badge */ .header__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 50px; font-size: 14px; font-weight: 600; margin-bottom: 24px; border: 1px solid rgba(255, 255, 255, 0.2); } .header__badge-icon { font-size: 16px; } /* Element: title */ .header__title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 24px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .header__title-main { display: block; margin-bottom: 8px; } .header__title-highlight { display: block; background: linear-gradient(45deg, #ffd700, #ffed4e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .header__title-cursor { color: #ffd700; animation: blink 1s infinite; } /* Element: description */ .header__description { font-size: 1.2rem; line-height: 1.7; margin-bottom: 32px; opacity: 0.95; max-width: 600px; } .header__highlight-text { color: #ffd700; font-weight: 600; } /* Element: features */ .header__features { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; } .header__feature { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 500; } .header__feature-icon { font-size: 1.2rem; width: 24px; text-align: center; } /* Element: actions */ .header__actions { display: flex; gap: 16px; margin-bottom: 48px; flex-wrap: wrap; } /* Element: button */ .header__btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; font-size: 16px; font-weight: 600; border-radius: 12px; text-decoration: none; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } /* Modifier: primary button */ .header__btn--primary { background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); color: #2d3748; box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3); } .header__btn--primary:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(255, 215, 0, 0.4); } /* Modifier: secondary button */ .header__btn--secondary { background: rgba(255, 255, 255, 0.15); color: white; border: 2px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .header__btn--secondary:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } .header__btn-icon { font-size: 18px; } /* Element: stats */ .header__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .header__stat { text-align: center; } .header__stat-number { display: block; font-size: 2rem; font-weight: 800; color: #ffd700; margin-bottom: 4px; } .header__stat-label { font-size: 0.9rem; opacity: 0.8; } /* Element: visual */ .header__visual { display: flex; flex-direction: column; align-items: center; gap: 32px; } /* Element: avatar */ .header__avatar { position: relative; } .header__avatar-image { width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; font-size: 4rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .header__avatar-status { position: absolute; bottom: 20px; right: 20px; display: flex; align-items: center; gap: 6px; background: rgba(34, 197, 94, 0.9); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; color: white; } .header__status-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; animation: pulse 2s infinite; } /* Element: expertise cards */ .header__expertise-cards { display: flex; flex-direction: column; gap: 16px; } .header__expertise-card { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); color: white; font-weight: 600; transition: all 0.3s ease; } .header__expertise-card:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(-8px); } .header__card-icon { font-size: 1.5rem; } /* Element: scroll indicator */ .header__scroll-indicator { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); font-size: 14px; animation: bounce 2s infinite; } .header__scroll-arrow { font-size: 20px; animation: arrowBounce 2s infinite; } /* ========================================================================== Animations ========================================================================== */ @keyframes patternMove { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, -20px); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } @keyframes arrowBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-3px); } } /* ========================================================================== Responsive Design ========================================================================== */ /* تبلت - 768px تا 1024px */ @media (max-width: 1024px) { .header__content { grid-template-columns: 1fr; gap: 40px; text-align: center; } .header__visual { order: -1; } .header__title { font-size: 3rem; } .header__stats { grid-template-columns: repeat(2, 1fr); gap: 20px; } } /* موبایل - تا 768px */ @media (max-width: 768px) { .header__container { padding: 0 16px; } .header__title { font-size: 2.5rem; } .header__description { font-size: 1.1rem; } .header__actions { flex-direction: column; align-items: center; } .header__btn { width: 100%; max-width: 300px; justify-content: center; } .header__stats { grid-template-columns: repeat(2, 1fr); gap: 16px; } .header__stat-number { font-size: 1.5rem; } .header__avatar-image { width: 150px; height: 150px; font-size: 3rem; } .header__expertise-cards { width: 100%; } .header__expertise-card { justify-content: center; } } /* موبایل کوچک - تا 480px */ @media (max-width: 480px) { .header { min-height: 90vh; } .header__title { font-size: 2rem; } .header__description { font-size: 1rem; } .header__features { gap: 12px; } .header__feature { font-size: 0.9rem; } .header__stats { grid-template-columns: 1fr 1fr; gap: 12px; } .header__floating-element { font-size: 1.5rem; } } /* ========================================================================== Accessibility & Performance ========================================================================== */ /* Focus states */ .header__btn:focus { outline: 2px solid #ffd700; outline-offset: 2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .header__content, .header__floating-element, .header__background-pattern, .header__scroll-indicator, .header__title-cursor, .header__status-dot { animation: none; } .header__btn, .header__expertise-card { transition: none; } } /* High contrast */ @media (prefers-contrast: high) { .header { background: #000; color: #fff; } .header__btn--primary { background: #fff; color: #000; border: 2px solid #fff; } .header__btn--secondary { background: transparent; color: #fff; border: 2px solid #fff; } } [V0_FILE]javascriptreact:file="src/components/footer/Footer.jsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Link } from "react-router-dom" import "./Footer.css" /** * کامپوننت فوتر اصلی سایت * شامل لینک‌ها، اطلاعات تماس، خبرنامه و اطلاعات قانونی * @returns {JSX.Element} کامپوننت فوتر */ const Footer = () => { // وضعیت فرم خبرنامه const [email, setEmail] = useState("") const [isSubscribed, setIsSubscribed] = useState(false) const [isLoading, setIsLoading] = useState(false) /** * مدیریت ثبت‌نام در خبرنامه * @param {Event} e - رویداد فرم */ const handleNewsletterSubmit = async (e) => { e.preventDefault() // اعتبارسنجی ایمیل const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) { alert("لطفاً ایمیل معتبری وارد کنید") return } setIsLoading(true) try { // شبیه‌سازی ارسال به سرور await new Promise((resolve) => setTimeout(resolve, 1500)) setIsSubscribed(true) setEmail("") // نمایش پیام موفقیت setTimeout(() => { setIsSubscribed(false) }, 3000) } catch (error) { console.error("خطا در ثبت‌نام:", error) alert("خطایی رخ داد. لطفاً دوباره تلاش کنید.") } finally { setIsLoading(false) } } /** * اسکرول به بالای صفحه */ const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth", }) } return ( ) } export default Footer [V0_FILE]css:file="src/components/footer/Footer.css" isEdit="true" isMerged="true" /* ========================================================================== فوتر اصلی سایت - BEM Methodology ========================================================================== */ /* Block: footer */ .footer { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); color: #e2e8f0; margin-top: auto; position: relative; overflow: hidden; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.5), transparent); } /* Element: main section */ .footer__main { padding: 60px 0 40px; position: relative; } /* Element: container */ .footer__container { max-width: 1400px; margin: 0 auto; padding: 0 24px; } /* Element: content */ .footer__content { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; margin-bottom: 40px; } /* Element: section */ .footer__section { display: flex; flex-direction: column; gap: 24px; } /* Modifier: about section */ .footer__section--about { max-width: 400px; } /* Element: brand */ .footer__brand { margin-bottom: 16px; } /* Element: logo */ .footer__logo { text-decoration: none; display: inline-block; margin-bottom: 8px; } .footer__logo-text { font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; } /* Element: tagline */ .footer__tagline { color: #a0aec0; font-size: 0.9rem; font-weight: 500; margin: 0; } /* Element: description */ .footer__description { line-height: 1.7; color: #cbd5e0; font-size: 0.95rem; } /* Element: section title */ .footer__section-title { font-size: 1.25rem; font-weight: 700; color: #f7fafc; margin-bottom: 8px; position: relative; } .footer__section-title::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 40px; height: 2px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 1px; } /* Element: navigation */ .footer__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .footer__nav-item { transition: transform 0.2s ease; } .footer__nav-item:hover { transform: translateX(-4px); } /* Element: navigation link */ .footer__nav-link { display: flex; align-items: center; gap: 8px; color: #cbd5e0; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; padding: 4px 0; } .footer__nav-link:hover { color: #667eea; } .footer__nav-icon { font-size: 1rem; width: 20px; text-align: center; } /* Element: social */ .footer__social { margin-top: 8px; } .footer__social-title { font-size: 1rem; font-weight: 600; color: #f7fafc; margin-bottom: 16px; } .footer__social-links { display: flex; flex-wrap: wrap; gap: 12px; } /* Element: social link */ .footer__social-link { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #cbd5e0; text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .footer__social-link:hover { background: rgba(102, 126, 234, 0.15); border-color: rgba(102, 126, 234, 0.3); color: #667eea; transform: translateY(-2px); } .footer__social-icon { font-size: 1rem; } /* Element: contact */ .footer__contact { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; } .footer__contact-item { display: flex; align-items: flex-start; gap: 12px; } .footer__contact-icon { font-size: 1.1rem; width: 20px; text-align: center; margin-top: 2px; color: #667eea; } .footer__contact-info { display: flex; flex-direction: column; gap: 2px; } .footer__contact-label { font-size: 0.8rem; color: #a0aec0; font-weight: 600; } .footer__contact-link { color: #cbd5e0; text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; } .footer__contact-link:hover { color: #667eea; } .footer__contact-text { color: #cbd5e0; font-size: 0.9rem; } /* Element: newsletter */ .footer__newsletter { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .footer__newsletter-title { font-size: 1rem; font-weight: 600; color: #f7fafc; margin-bottom: 8px; } .footer__newsletter-description { font-size: 0.85rem; color: #a0aec0; line-height: 1.5; margin-bottom: 16px; } /* Element: newsletter form */ .footer__newsletter-form { display: flex; flex-direction: column; gap: 12px; } .footer__newsletter-input-group { display: flex; gap: 8px; } .footer__newsletter-input { flex: 1; padding: 12px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; color: #e2e8f0; font-size: 0.9rem; transition: all 0.3s ease; } .footer__newsletter-input::placeholder { color: #a0aec0; } .footer__newsletter-input:focus { outline: none; border-color: #667eea; background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .footer__newsletter-input:disabled { opacity: 0.6; cursor: not-allowed; } /* Element: newsletter button */ .footer__newsletter-btn { padding: 12px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; min-width: 50px; } .footer__newsletter-btn:hover:not(:disabled) { background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } .footer__newsletter-btn:disabled { cursor: not-allowed; opacity: 0.7; } /* Modifier: loading button */ .footer__newsletter-btn--loading { background: #4a5568; } /* Modifier: success button */ .footer__newsletter-btn--success { background: #22c55e; } .footer__newsletter-spinner { animation: spin 1s linear infinite; } .footer__newsletter-success-message { color: #22c55e; font-size: 0.85rem; font-weight: 500; margin: 0; } /* Element: bottom section */ .footer__bottom { background: rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 24px 0; } .footer__bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; } /* Element: copyright */ .footer__copyright { display: flex; flex-direction: column; gap: 4px; } .footer__copyright-text { font-size: 0.9rem; color: #cbd5e0; margin: 0; } .footer__copyright-subtext { font-size: 0.8rem; color: #a0aec0; margin: 0; } /* Element: legal */ .footer__legal-nav { display: flex; gap: 24px; flex-wrap: wrap; } .footer__legal-link { color: #a0aec0; text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: color 0.3s ease; } .footer__legal-link:hover { color: #667eea; } /* Element: scroll to top */ .footer__scroll-top { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 8px; color: #667eea; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .footer__scroll-top:hover { background: rgba(102, 126, 234, 0.2); transform: translateY(-2px); } /* Element: certifications */ .footer__certifications { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .footer__cert-item { display: flex; align-items: center; gap: 8px; color: #a0aec0; font-size: 0.8rem; font-weight: 500; } .footer__cert-icon { font-size: 1rem; } /* ========================================================================== Animations ========================================================================== */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================================== Responsive Design ========================================================================== */ /* تبلت بزرگ - 1024px تا 1200px */ @media (max-width: 1200px) { .footer__content { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; } } /* تبلت - 768px تا 1024px */ @media (max-width: 1024px) { .footer__content { grid-template-columns: 1fr 1fr; gap: 32px; } .footer__section--about { max-width: none; } .footer__bottom-content { flex-direction: column; text-align: center; gap: 16px; } .footer__certifications { gap: 24px; } } /* موبایل - تا 768px */ @media (max-width: 768px) { .footer__container { padding: 0 16px; } .footer__main { padding: 40px 0 30px; } .footer__content { grid-template-columns: 1fr; gap: 32px; } .footer__social-links { justify-content: center; } .footer__newsletter-input-group { flex-direction: column; } .footer__newsletter-btn { width: 100%; } .footer__legal-nav { justify-content: center; gap: 16px; } .footer__certifications { grid-template-columns: repeat(2, 1fr); gap: 16px; } .footer__cert-item { justify-content: center; text-align: center; } } /* موبایل کوچک - تا 480px */ @media (max-width: 480px) { .footer__main { padding: 32px 0 24px; } .footer__content { gap: 24px; } .footer__section-title { font-size: 1.1rem; } .footer__logo-text { font-size: 1.6rem; } .footer__social-links { flex-direction: column; } .footer__social-link { justify-content: center; } .footer__legal-nav { flex-direction: column; gap: 12px; } .footer__certifications { grid-template-columns: 1fr; gap: 12px; } } /* ========================================================================== Accessibility & Performance ========================================================================== */ /* Focus states */ .footer__nav-link:focus, .footer__social-link:focus, .footer__contact-link:focus, .footer__legal-link:focus, .footer__newsletter-input:focus, .footer__newsletter-btn:focus, .footer__scroll-top:focus { outline: 2px solid #667eea; outline-offset: 2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .footer__nav-item, .footer__social-link, .footer__newsletter-btn, .footer__scroll-top, .footer__newsletter-spinner { transition: none; animation: none; transform: none; } } /* High contrast */ @media (prefers-contrast: high) { .footer { background: #000; color: #fff; } .footer__nav-link, .footer__social-link, .footer__contact-link, .footer__legal-link { border: 1px solid transparent; } .footer__nav-link:hover, .footer__social-link:hover, .footer__contact-link:hover, .footer__legal-link:hover { border-color: #fff; } } /* Print styles */ @media print { .footer__social, .footer__newsletter, .footer__scroll-top { display: none; } .footer { background: none; color: #000; } } [V0_FILE]typescriptreact:file="src/pages/CompleteHomePage.jsx" isDeleted="true" isMoved="true" isMovedTo="src/react-pages/CompleteHomePage.jsx" isEdit="true" ...moved to src/react-pages/CompleteHomePage.jsx... [V0_FILE]typescriptreact:file="src/react-pages/CompleteHomePage.jsx" isMoved="true" isMovedFrom="src/pages/CompleteHomePage.jsx" isEdit="true" import Header from "../components/header/Header" import Footer from "../components/footer/Footer" /** * صفحه اصلی کامل با هدر و فوتر */ const CompleteHomePage = () => { return (

{/* محتوای اصلی صفحه */}

محتوای اصلی سایت

در اینجا محتوای اصلی سایت شما قرار می‌گیرد. دوره‌ها، مقالات، پروژه‌ها و سایر بخش‌های مهم سایت.

) } export default CompleteHomePage [V0_FILE]typescriptreact:file="src/pages/HomePage.jsx" isDeleted="true" isMoved="true" isMovedTo="src/react-pages/HomePage.jsx" isEdit="true" ...moved to src/react-pages/HomePage.jsx... [V0_FILE]typescriptreact:file="src/react-pages/HomePage.jsx" isMoved="true" isMovedFrom="src/pages/HomePage.jsx" isEdit="true" import Header from "../components/header/Header" /** * صفحه اصلی سایت * شامل هدر و سایر بخش‌های صفحه اصلی */ const HomePage = () => { return (

{/* بخش دوره‌ها */}

دوره‌های آموزشی

در اینجا می‌توانید دوره‌های مختلف امنیت شبکه را مشاهده کنید و شروع به یادگیری کنید.

) } export default HomePage [V0_FILE]typescriptreact:file="src/pages/DemoPage.jsx" isDeleted="true" isMoved="true" isMovedTo="src/react-pages/DemoPage.jsx" isEdit="true" ...moved to src/react-pages/DemoPage.jsx... [V0_FILE]typescriptreact:file="src/react-pages/DemoPage.jsx" isMoved="true" isMovedFrom="src/pages/DemoPage.jsx" isEdit="true" import Menu from "../components/menu/Menu" const DemoPage = () => { return (

نمایش منوی Net4All

این منوی مدرن شامل تمام ویژگی‌های درخواستی شما است:

✅ طراحی مدرن با Glass Morphism
✅ زیرمنوهای کشویی برای هر بخش
✅ ریسپانسیو کامل برای موبایل و تبلت
✅ انیمیشن‌های نرم و طبیعی
✅ دکمه Login جداگانه
✅ منوی همبرگر برای موبایل

نحوه تست منو:

• روی هر آیتم منو hover کنید تا انیمیشن‌ها را ببینید
• روی Network+، Cisco، MikroTik، SANS یا PWK کلیک کنید تا زیرمنو باز شود
• اندازه صفحه را کم کنید تا منوی موبایل را ببینید
• روی دکمه همبرگر کلیک کنید تا منوی کناری باز شود

) } export default DemoPage [V0_FILE]typescriptreact:file="src/pages/Home.jsx" isDeleted="true" isMoved="true" isMovedTo="src/react-pages/Home.jsx" isEdit="true" ...moved to src/react-pages/Home.jsx... [V0_FILE]typescriptreact:file="src/react-pages/Home.jsx" isMoved="true" isMovedFrom="src/pages/Home.jsx" isEdit="true" import { Link } from "react-router-dom" import "./Home.css" const Home = () => { return (

به Net4All خوش آمدید

پلتفرم جامع آموزش شبکه و امنیت سایبری

ورود به سیستم

ویژگی‌های اصلی

🌐

آموزش شبکه

آموزش کامل مفاهیم شبکه از مبتدی تا پیشرفته

🔒

امنیت سایبری

یادگیری تکنیک‌های امنیت و محافظت از سیستم‌ها

📚

تمرینات عملی

تمرینات و پروژه‌های عملی برای تقویت مهارت‌ها

🎯

مثال‌های کاربردی

مثال‌های واقعی از دنیای کار و صنعت

) } export default Home [V0_FILE]typescriptreact:file="src/pages/Login.jsx" isDeleted="true" isMoved="true" isMovedTo="src/react-pages/Login.jsx" isEdit="true" ...moved to src/react-pages/Login.jsx... [V0_FILE]typescriptreact:file="src/react-pages/Login.jsx" isMoved="true" isMovedFrom="src/pages/Login.jsx" isEdit="true" "use client" import { useState } from "react" import { useNavigate } from "react-router-dom" import "./Login.css" const Login = () => { const [formData, setFormData] = useState({ username: "", password: "", }) const [errors, setErrors] = useState({}) const navigate = useNavigate() const handleChange = (e) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) // Clear error when user starts typing if (errors[name]) { setErrors((prev) => ({ ...prev, [name]: "", })) } } const validateForm = () => { const newErrors = {} if (!formData.username.trim()) { newErrors.username = "نام کاربری الزامی است" } if (!formData.password) { newErrors.password = "رمز عبور الزامی است" } else if (formData.password.length < 6) { newErrors.password = "رمز عبور باید حداقل ۶ کاراکتر باشد" } return newErrors } const handleSubmit = (e) => { e.preventDefault() const newErrors = validateForm() if (Object.keys(newErrors).length === 0) { // Simulate login process console.log("Login attempt:", formData) // Navigate to home page after successful login navigate("/") } else { setErrors(newErrors) } } return (

ورود به سیستم

لطفاً اطلاعات خود را وارد کنید

حساب کاربری ندارید؟ ثبت نام کنید

) } export default Login [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import dynamic from "next/dynamic" // بارگذاری صفحه به‌صورت کلاینتی از مسیر جدید const ClientHomePage = dynamic( () => import("../src/react-pages/CompleteHomePage"), { ssr: false }, // ⬅️ غیرفعال کردن SSR برای جلوگیری از خطای React-Router ) export default function Page() { return } [V0_FILE]typescriptreact:file="src/App.jsx" isEdit="true" isQuickEdit="true" import { Routes, Route } from "react-router-dom" import Menu from "./components/menu/Menu" import Footer from "./components/footer/Footer" // مسیرهای جدید فایل‌های React-Router import Home from "./react-pages/Home" import Login from "./react-pages/Login" import "./App.css" function App() { return (

} /> } />

) } export default App