| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>نعم - موقعنا الرقمي</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/css2?family=Phosphor+Icons:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --primary-dark: #0F172A; |
| --secondary-dark: #1E293B; |
| --card-bg: rgba(30, 41, 59, 0.8); |
| --text-primary: #F8FAFC; |
| --text-secondary: #94A3B8; |
| --accent-blue: #38BDF8; |
| --accent-pink: #F472B6; |
| --accent-gradient: linear-gradient(135deg, #38BDF8 0%, #F472B6 100%); |
| --glass-bg: rgba(15, 23, 42, 0.7); |
| --glass-border: rgba(255, 255, 255, 0.1); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| html { |
| scroll-behavior: smooth; |
| } |
| |
| body { |
| font-family: 'Tajawal', sans-serif; |
| background: var(--primary-dark); |
| color: var(--text-primary); |
| overflow-x: hidden; |
| line-height: 1.8; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: var(--primary-dark); |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: var(--accent-blue); |
| border-radius: 4px; |
| } |
| |
| |
| .navbar { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| z-index: 1000; |
| padding: 1rem 5%; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| background: rgba(15, 23, 42, 0.9); |
| backdrop-filter: blur(20px); |
| border-bottom: 1px solid var(--glass-border); |
| transition: all 0.3s ease; |
| } |
| |
| .navbar.scrolled { |
| padding: 0.7rem 5%; |
| background: rgba(15, 23, 42, 0.95); |
| } |
| |
| .logo { |
| font-size: 2rem; |
| font-weight: 800; |
| background: var(--accent-gradient); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| cursor: pointer; |
| transition: transform 0.3s ease; |
| } |
| |
| .logo:hover { |
| transform: scale(1.05); |
| } |
| |
| .nav-links { |
| display: flex; |
| gap: 2.5rem; |
| list-style: none; |
| } |
| |
| .nav-links a { |
| color: var(--text-primary); |
| text-decoration: none; |
| font-weight: 500; |
| font-size: 1rem; |
| position: relative; |
| padding: 0.5rem 0; |
| transition: color 0.3s ease; |
| } |
| |
| .nav-links a::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 0; |
| height: 2px; |
| background: var(--accent-gradient); |
| transition: width 0.3s ease; |
| } |
| |
| .nav-links a:hover { |
| color: var(--accent-blue); |
| } |
| |
| .nav-links a:hover::after { |
| width: 100%; |
| } |
| |
| .menu-toggle { |
| display: none; |
| flex-direction: column; |
| cursor: pointer; |
| gap: 5px; |
| } |
| |
| .menu-toggle span { |
| width: 25px; |
| height: 3px; |
| background: var(--text-primary); |
| border-radius: 3px; |
| transition: all 0.3s ease; |
| } |
| |
| |
| .hero { |
| position: relative; |
| height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| overflow: hidden; |
| } |
| |
| .hero-video { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| z-index: -2; |
| } |
| |
| .hero-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%); |
| z-index: -1; |
| } |
| |
| .hero-content { |
| text-align: center; |
| max-width: 900px; |
| padding: 2rem; |
| animation: fadeInUp 1s ease forwards; |
| } |
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .hero-badge { |
| display: inline-block; |
| padding: 0.5rem 1.5rem; |
| background: rgba(56, 189, 248, 0.1); |
| border: 1px solid rgba(56, 189, 248, 0.3); |
| border-radius: 50px; |
| font-size: 0.9rem; |
| color: var(--accent-blue); |
| margin-bottom: 1.5rem; |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { |
| box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); |
| } |
| 50% { |
| box-shadow: 0 0 0 15px rgba(56, 189, 248, 0); |
| } |
| } |
| |
| .hero h1 { |
| font-size: 4rem; |
| font-weight: 800; |
| margin-bottom: 1.5rem; |
| line-height: 1.2; |
| } |
| |
| .hero h1 span { |
| background: var(--accent-gradient); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .hero p { |
| font-size: 1.3rem; |
| color: var(--text-secondary); |
| margin-bottom: 2.5rem; |
| max-width: 700px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| .hero-buttons { |
| display: flex; |
| gap: 1.5rem; |
| justify-content: center; |
| flex-wrap: wrap; |
| } |
| |
| .btn { |
| padding: 1rem 2.5rem; |
| border-radius: 50px; |
| font-size: 1rem; |
| font-weight: 600; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| border: none; |
| font-family: 'Tajawal', sans-serif; |
| } |
| |
| .btn-primary { |
| background: var(--accent-gradient); |
| color: white; |
| box-shadow: 0 4px 20px rgba(56, 189, 248, 0.3); |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 8px 30px rgba(56, 189, 248, 0.4); |
| } |
| |
| .btn-secondary { |
| background: transparent; |
| color: var(--text-primary); |
| border: 2px solid var(--glass-border); |
| } |
| |
| .btn-secondary:hover { |
| border-color: var(--accent-blue); |
| color: var(--accent-blue); |
| } |
| |
| .scroll-indicator { |
| position: absolute; |
| bottom: 2rem; |
| left: 50%; |
| transform: translateX(-50%); |
| animation: bounce 2s infinite; |
| } |
| |
| .scroll-indicator svg { |
| width: 30px; |
| height: 30px; |
| color: var(--text-secondary); |
| } |
| |
| @keyframes bounce { |
| 0%, 20%, 50%, 80%, 100% { |
| transform: translateX(-50%) translateY(0); |
| } |
| 40% { |
| transform: translateX(-50%) translateY(-10px); |
| } |
| 60% { |
| transform: translateX(-50%) translateY(-5px); |
| } |
| } |
| |
| |
| section { |
| padding: 6rem 5%; |
| } |
| |
| .section-header { |
| text-align: center; |
| margin-bottom: 4rem; |
| } |
| |
| .section-tag { |
| display: inline-block; |
| padding: 0.4rem 1.2rem; |
| background: rgba(56, 189, 248, 0.1); |
| border-radius: 50px; |
| font-size: 0.85rem; |
| color: var(--accent-blue); |
| margin-bottom: 1rem; |
| font-weight: 500; |
| } |
| |
| .section-header h2 { |
| font-size: 2.8rem; |
| font-weight: 700; |
| margin-bottom: 1rem; |
| } |
| |
| .section-header p { |
| color: var(--text-secondary); |
| max-width: 600px; |
| margin: 0 auto; |
| font-size: 1.1rem; |
| } |
| |
| |
| .about { |
| background: var(--secondary-dark); |
| } |
| |
| .about-container { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 4rem; |
| align-items: center; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| .about-image { |
| position: relative; |
| } |
| |
| .about-image img { |
| width: 100%; |
| border-radius: 20px; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); |
| } |
| |
| .about-image::before { |
| content: ''; |
| position: absolute; |
| top: -20px; |
| right: -20px; |
| width: 100%; |
| height: 100%; |
| border: 3px solid var(--accent-blue); |
| border-radius: 20px; |
| z-index: -1; |
| opacity: 0.3; |
| } |
| |
| .about-content h3 { |
| font-size: 2rem; |
| margin-bottom: 1.5rem; |
| color: var(--text-primary); |
| } |
| |
| .about-content p { |
| color: var(--text-secondary); |
| margin-bottom: 1.5rem; |
| font-size: 1.1rem; |
| } |
| |
| .stats { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 2rem; |
| margin-top: 2.5rem; |
| } |
| |
| .stat-item { |
| text-align: center; |
| padding: 1.5rem; |
| background: var(--glass-bg); |
| border-radius: 15px; |
| border: 1px solid var(--glass-border); |
| backdrop-filter: blur(10px); |
| } |
| |
| .stat-number { |
| font-size: 2.5rem; |
| font-weight: 800; |
| background: var(--accent-gradient); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .stat-label { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| margin-top: 0.5rem; |
| } |
| |
| |
| .services-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 2rem; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| .service-card { |
| background: var(--card-bg); |
| border-radius: 20px; |
| padding: 2.5rem; |
| border: 1px solid var(--glass-border); |
| backdrop-filter: blur(10px); |
| transition: all 0.4s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .service-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 3px; |
| background: var(--accent-gradient); |
| transform: scaleX(0); |
| transform-origin: right; |
| transition: transform 0.4s ease; |
| } |
| |
| .service-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); |
| } |
| |
| .service-card:hover::before { |
| transform: scaleX(1); |
| transform-origin: left; |
| } |
| |
| .service-icon { |
| width: 70px; |
| height: 70px; |
| background: rgba(56, 189, 248, 0.1); |
| border-radius: 15px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-bottom: 1.5rem; |
| font-size: 2rem; |
| color: var(--accent-blue); |
| transition: all 0.3s ease; |
| } |
| |
| .service-card:hover .service-icon { |
| background: var(--accent-gradient); |
| color: white; |
| transform: rotate(5deg) scale(1.1); |
| } |
| |
| .service-card h3 { |
| font-size: 1.4rem; |
| margin-bottom: 1rem; |
| } |
| |
| .service-card p { |
| color: var(--text-secondary); |
| font-size: 0.95rem; |
| line-height: 1.7; |
| } |
| |
| |
| .gallery { |
| background: var(--secondary-dark); |
| } |
| |
| .gallery-masonry { |
| columns: 3; |
| column-gap: 1.5rem; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| .gallery-item { |
| break-inside: avoid; |
| margin-bottom: 1.5rem; |
| position: relative; |
| border-radius: 15px; |
| overflow: hidden; |
| cursor: pointer; |
| } |
| |
| .gallery-item img, |
| .gallery-item video { |
| width: 100%; |
| display: block; |
| transition: transform 0.5s ease; |
| } |
| |
| .gallery-item:hover img, |
| .gallery-item:hover video { |
| transform: scale(1.05); |
| } |
| |
| .gallery-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.8) 100%); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| display: flex; |
| align-items: flex-end; |
| padding: 1.5rem; |
| } |
| |
| .gallery-item:hover .gallery-overlay { |
| opacity: 1; |
| } |
| |
| .gallery-overlay span { |
| color: var(--text-primary); |
| font-weight: 600; |
| font-size: 1rem; |
| } |
| |
| |
| .video-section { |
| padding: 6rem 5%; |
| text-align: center; |
| } |
| |
| .video-container { |
| max-width: 1000px; |
| margin: 0 auto; |
| border-radius: 20px; |
| overflow: hidden; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); |
| } |
| |
| .video-container video { |
| width: 100%; |
| display: block; |
| } |
| |
| .video-section h3 { |
| font-size: 2rem; |
| margin-bottom: 1rem; |
| } |
| |
| .video-section p { |
| color: var(--text-secondary); |
| max-width: 600px; |
| margin: 0 auto 2rem; |
| } |
| |
| |
| .testimonials { |
| background: var(--secondary-dark); |
| } |
| |
| .testimonials-container { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); |
| gap: 2rem; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| .testimonial-card { |
| background: var(--card-bg); |
| border-radius: 20px; |
| padding: 2rem; |
| border: 1px solid var(--glass-border); |
| backdrop-filter: blur(10px); |
| } |
| |
| .testimonial-content { |
| margin-bottom: 1.5rem; |
| } |
| |
| .testimonial-content p { |
| color: var(--text-primary); |
| font-size: 1.1rem; |
| line-height: 1.8; |
| font-style: italic; |
| } |
| |
| .testimonial-author { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
| |
| .author-avatar { |
| width: 50px; |
| height: 50px; |
| border-radius: 50%; |
| background: var(--accent-gradient); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 700; |
| color: white; |
| } |
| |
| .author-info h4 { |
| font-size: 1rem; |
| margin-bottom: 0.2rem; |
| } |
| |
| .author-info span { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| } |
| |
| |
| .contact-container { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 4rem; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| .contact-info h3 { |
| font-size: 2rem; |
| margin-bottom: 1.5rem; |
| } |
| |
| .contact-info p { |
| color: var(--text-secondary); |
| margin-bottom: 2rem; |
| font-size: 1.1rem; |
| } |
| |
| .contact-details { |
| display: flex; |
| flex-direction: column; |
| gap: 1.5rem; |
| } |
| |
| .contact-item { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| color: var(--text-secondary); |
| } |
| |
| .contact-item .icon { |
| width: 50px; |
| height: 50px; |
| background: rgba(56, 189, 248, 0.1); |
| border-radius: 12px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--accent-blue); |
| font-size: 1.2rem; |
| } |
| |
| .contact-form { |
| background: var(--card-bg); |
| border-radius: 20px; |
| padding: 2.5rem; |
| border: 1px solid var(--glass-border); |
| backdrop-filter: blur(10px); |
| } |
| |
| .form-group { |
| margin-bottom: 1.5rem; |
| } |
| |
| .form-group label { |
| display: block; |
| margin-bottom: 0.5rem; |
| color: var(--text-primary); |
| font-weight: 500; |
| } |
| |
| .form-group input, |
| .form-group textarea { |
| width: 100%; |
| padding: 1rem 1.5rem; |
| background: rgba(15, 23, 42, 0.5); |
| border: 1px solid var(--glass-border); |
| border-radius: 10px; |
| color: var(--text-primary); |
| font-family: 'Tajawal', sans-serif; |
| font-size: 1rem; |
| transition: border-color 0.3s ease; |
| } |
| |
| .form-group input:focus, |
| .form-group textarea:focus { |
| outline: none; |
| border-color: var(--accent-blue); |
| } |
| |
| .form-group textarea { |
| min-height: 150px; |
| resize: vertical; |
| } |
| |
| |
| footer { |
| background: var(--secondary-dark); |
| padding: 4rem 5% 2rem; |
| border-top: 1px solid var(--glass-border); |
| } |
| |
| .footer-content { |
| display: grid; |
| grid-template-columns: 2fr 1fr 1fr 1fr; |
| gap: 3rem; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| .footer-brand .logo { |
| font-size: 2.5rem; |
| margin-bottom: 1rem; |
| display: block; |
| } |
| |
| .footer-brand p { |
| color: var(--text-secondary); |
| margin-bottom: 1.5rem; |
| font-size: 1rem; |
| } |
| |
| .social-links { |
| display: flex; |
| gap: 1rem; |
| } |
| |
| .social-link { |
| width: 45px; |
| height: 45px; |
| background: rgba(56, 189, 248, 0.1); |
| border-radius: 12px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--accent-blue); |
| text-decoration: none; |
| transition: all 0.3s ease; |
| } |
| |
| .social-link:hover { |
| background: var(--accent-gradient); |
| color: white; |
| transform: translateY(-3px); |
| } |
| |
| .footer-links h4 { |
| font-size: 1.2rem; |
| margin-bottom: 1.5rem; |
| color: var(--text-primary); |
| } |
| |
| .footer-links ul { |
| list-style: none; |
| display: flex; |
| flex-direction: column; |
| gap: 0.8rem; |
| } |
| |
| .footer-links a { |
| color: var(--text-secondary); |
| text-decoration: none; |
| transition: color 0.3s ease; |
| } |
| |
| .footer-links a:hover { |
| color: var(--accent-blue); |
| } |
| |
| .footer-bottom { |
| text-align: center; |
| padding-top: 3rem; |
| margin-top: 3rem; |
| border-top: 1px solid var(--glass-border); |
| color: var(--text-secondary); |
| } |
| |
| |
| .lightbox { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.95); |
| z-index: 2000; |
| display: none; |
| align-items: center; |
| justify-content: center; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
| |
| .lightbox.active { |
| display: flex; |
| opacity: 1; |
| } |
| |
| .lightbox-content { |
| max-width: 90%; |
| max-height: 90%; |
| border-radius: 10px; |
| } |
| |
| .lightbox-close { |
| position: absolute; |
| top: 2rem; |
| left: 2rem; |
| width: 50px; |
| height: 50px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| cursor: pointer; |
| font-size: 1.5rem; |
| transition: all 0.3s ease; |
| } |
| |
| .lightbox-close:hover { |
| background: var(--accent-gradient); |
| } |
| |
| |
| @media (max-width: 1024px) { |
| .about-container, |
| .contact-container { |
| grid-template-columns: 1fr; |
| gap: 3rem; |
| } |
| |
| .about-image { |
| order: -1; |
| } |
| |
| .footer-content { |
| grid-template-columns: 1fr 1fr; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .menu-toggle { |
| display: flex; |
| } |
| |
| .nav-links { |
| position: fixed; |
| top: 0; |
| right: -100%; |
| width: 100%; |
| height: 100vh; |
| background: var(--primary-dark); |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| gap: 2rem; |
| transition: right 0.3s ease; |
| } |
| |
| .nav-links.active { |
| right: 0; |
| } |
| |
| .hero h1 { |
| font-size: 2.5rem; |
| } |
| |
| .hero p { |
| font-size: 1.1rem; |
| } |
| |
| .section-header h2 { |
| font-size: 2rem; |
| } |
| |
| .stats { |
| grid-template-columns: 1fr; |
| } |
| |
| .gallery-masonry { |
| columns: 1; |
| } |
| |
| .footer-content { |
| grid-template-columns: 1fr; |
| text-align: center; |
| } |
| |
| .social-links { |
| justify-content: center; |
| } |
| } |
| |
| |
| .fade-in { |
| opacity: 0; |
| transform: translateY(30px); |
| transition: all 0.6s ease; |
| } |
| |
| .fade-in.visible { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| |
| .video-card { |
| position: relative; |
| border-radius: 15px; |
| overflow: hidden; |
| cursor: pointer; |
| } |
| |
| .video-card img { |
| width: 100%; |
| display: block; |
| } |
| |
| .play-button { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| width: 80px; |
| height: 80px; |
| background: var(--accent-gradient); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 10px 30px rgba(56, 189, 248, 0.4); |
| transition: all 0.3s ease; |
| } |
| |
| .video-card:hover .play-button { |
| transform: translate(-50%, -50%) scale(1.1); |
| } |
| |
| .play-button svg { |
| width: 30px; |
| height: 30px; |
| color: white; |
| margin-left: 5px; |
| } |
| |
| |
| .loading { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: var(--primary-dark); |
| z-index: 9999; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: opacity 0.5s ease; |
| } |
| |
| .loading.hidden { |
| opacity: 0; |
| pointer-events: none; |
| } |
| |
| .loader { |
| width: 50px; |
| height: 50px; |
| border: 3px solid var(--glass-border); |
| border-top-color: var(--accent-blue); |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes spin { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="loading" id="loading"> |
| <div class="loader"></div> |
| </div> |
|
|
| |
| <div class="lightbox" id="lightbox"> |
| <span class="lightbox-close" onclick="closeLightbox()">×</span> |
| <img src="" alt="Gallery Image" class="lightbox-content" id="lightbox-img"> |
| </div> |
|
|
| |
| <nav class="navbar" id="navbar"> |
| <div class="logo">نعم</div> |
| <ul class="nav-links" id="nav-links"> |
| <li><a href="#home">الرئيسية</a></li> |
| <li><a href="#about">من نحن</a></li> |
| <li><a href="#services">خدماتنا</a></li> |
| <li><a href="#gallery">أعمالنا</a></li> |
| <li><a href="#contact">اتصل بنا</a></li> |
| </ul> |
| <div class="menu-toggle" id="menu-toggle"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero" id="home"> |
| <video class="hero-video" autoplay muted loop playsinline poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080'%3E%3Crect fill='%230F172A' width='1920' height='1080'/%3E%3C/svg%3E"> |
| <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"> |
| </video> |
| <div class="hero-overlay"></div> |
| <div class="hero-content"> |
| <span class="hero-badge">✨ مستقبل الرقمية يبدأ هنا</span> |
| <h1>نبتكر حلولاً رقمية <br><span>تضعك في المقدمة</span></h1> |
| <p>نقدم لك تجربة رقمية استثنائية تجمع بين الإبداع والتقنية. حلول مبتكرة تناسب طموحاتك وتدفع عملك نحو النجاح.</p> |
| <div class="hero-buttons"> |
| <a href="#services" class="btn btn-primary"> |
| اكتشف خدماتنا |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg> |
| </a> |
| <a href="#contact" class="btn btn-secondary"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg> |
| شاهد أعمالنا |
| </a> |
| </div> |
| </div> |
| <div class="scroll-indicator"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13l5 5 5-5M7 6l5 5 5-5"/></svg> |
| </div> |
| </section> |
|
|
| |
| <section class="about" id="about"> |
| <div class="section-header fade-in"> |
| <span class="section-tag">من نحن</span> |
| <h2>شريكك في النجاح الرقمي</h2> |
| <p>نتميز بالإبداع والابتكار في كل مشروع. فريقنا يمتلك الخبرة العميقة لإنجاح مشروعك الرقمي</p> |
| </div> |
| <div class="about-container"> |
| <div class="about-image fade-in"> |
| <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop" alt="فريق العمل"> |
| </div> |
| <div class="about-content fade-in"> |
| <h3>نحو مستقبل رقمي أكثر إبداعاً</h3> |
| <p>نحن فريق من المبدعين والمطورين الشغوفين بالتقنية. منذ تأسسنا، ونحن نسعى لتقديم حلول رقمية مبتكرة تساعد الشركات والأفراد على تحقيق أهدافهم.</p> |
| <p>نؤمن بأن النجاح الرقمي يتطلب مزيجاً مثالياً من الإبداع والتقنية. لذلك، نعمل كل يوم لتقديم الأفضل لعملائنا وشركائنا.</p> |
| <div class="stats"> |
| <div class="stat-item"> |
| <div class="stat-number" data-count="150">0</div> |
| <div class="stat-label">مشروع ناجح</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-number" data-count="50">0</div> |
| <div class="stat-label">عميل سعيد</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-number" data-count="5">0</div> |
| <div class="stat-label">سنوات خبرة</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="services" id="services"> |
| <div class="section-header fade-in"> |
| <span class="section-tag">خدماتنا</span> |
| <h2>حلول مبتكرة لاحتياجاتك</h2> |
| <p>نقدم مجموعة متكاملة من الخدمات الرقمية المصممة خصيصاً لنجاح مشروعك</p> |
| </div> |
| <div class="services-grid"> |
| <div class="service-card fade-in"> |
| <div class="service-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg> |
| </div> |
| <h3>تطوير المواقع</h3> |
| <p>نصمم ونطور مواقع احترافية متجاوبة تناسب جميع الأجهزة وتوفر تجربة مستخدم استثنائية.</p> |
| </div> |
| <div class="service-card fade-in"> |
| <div class="service-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg> |
| </div> |
| <h3>التصميم البصري</h3> |
| <p>نصمم هويات بصرية جذابة تعكس روح علامتك التجارية وتجذب انتباه جمهورك المستهدف.</p> |
| </div> |
| <div class="service-card fade-in"> |
| <div class="service-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg> |
| </div> |
| <h3>التطبيقات الذكية</h3> |
| <p>نطور تطبيقات متقدمة لأنظمة Android و iOS تلبي احتياجاتك الخاصة وتوفر تجربة استخدام سلسة.</p> |
| </div> |
| <div class="service-card fade-in"> |
| <div class="service-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> |
| </div> |
| <h3>التسويق الرقمي</h3> |
| <p>نخطط وننفذ حملات تسويقية فعالة تزيد من حضورك الرقمي وتصل لجمهورك المستهدف.</p> |
| </div> |
| <div class="service-card fade-in"> |
| <div class="service-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> |
| </div> |
| <h3>العلامات التجارية</h3> |
| <p>نساعدك في بناء علامة تجارية قوية ومميزة تميزك عن المنافسين وتبني علاقة وثيقة مع عملائك.</p> |
| </div> |
| <div class="service-card fade-in"> |
| <div class="service-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg> |
| </div> |
| <h3>الدعم التقني</h3> |
| <p>نقدم دعم فني متواصل وصيانة دورية لضمان استمرارية عمل مشاريعك بكفاءة عالية.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="gallery" id="gallery"> |
| <div class="section-header fade-in"> |
| <span class="section-tag">أعمالنا</span> |
| <h2>نماذج من إبداعاتنا</h2> |
| <p>نفخر بتقديم مجموعة من أعمالنا التي تعكس مستوى الجودة والإبداع الذي نسعى إليه</p> |
| </div> |
| <div class="gallery-masonry"> |
| <div class="gallery-item fade-in" onclick="openLightbox(this)"> |
| <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=800&fit=crop" alt="مشروع 1"> |
| <div class="gallery-overlay"><span>تطوير موقع شركة</span></div> |
| </div> |
| <div class="gallery-item fade-in" onclick="openLightbox(this)"> |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=600&h=400&fit=crop" alt="مشروع 2"> |
| <div class="gallery-overlay"><span>تصميم هوية بصرية</span></div> |
| </div> |
| <div class="gallery-item fade-in" onclick="openLightbox(this)"> |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=600&fit=crop" alt="مشروع 3"> |
| <div class="gallery-overlay"><span>تطبيق جوال</span></div> |
| </div> |
| <div class="gallery-item fade-in" onclick="openLightbox(this)"> |
| <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=500&fit=crop" alt="مشروع 4"> |
| <div class="gallery-overlay"><span>حملة تسويقية</span></div> |
| </div> |
| <div class="gallery-item fade-in" onclick="openLightbox(this)"> |
| <img src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=600&h=700&fit=crop" alt="مشروع 5"> |
| <div class="gallery-overlay"><span>متجر إلكتروني</span></div> |
| </div> |
| <div class="gallery-item fade-in" onclick="openLightbox(this)"> |
| <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=600&h=450&fit=crop" alt="مشروع 6"> |
| <div class="gallery-overlay"><span>منصة تعليمية</span></div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="video-section" id="video"> |
| <div class="section-header fade-in"> |
| <span class="section-tag">فيديو تعريفي</span> |
| <h2>شاهد قصتنا</h2> |
| <p>تعرف علينا أكثر من خلال هذا الفيديو القصير الذي يعرض رحلتنا وإنجازاتنا</p> |
| </div> |
| <div class="video-container fade-in"> |
| <video controls poster="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&h=600&fit=crop"> |
| <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4"> |
| متصفحك لا يدعم تشغيل الفيديو |
| </video> |
| </div> |
| </section> |
|
|
| |
| <section class="testimonials" id="testimonials"> |
| <div class="section-header fade-in"> |
| <span class="section-tag">آراء العملاء</span> |
| <h2>ماذا يقول عملاؤنا</h2> |
| <p>نفخر بثقة عملائنا ورضاهم عن خدماتنا. إليك بعض آرائهم</p> |
| </div> |
| <div class="testimonials-container"> |
| <div class="testimonial-card fade-in"> |
| <div class="testimonial-content"> |
| <p>"تجربة استثنائية من البداية للنهاية. الفريق محترف ومتعاون. أنصح الجميع بالتعامل معهم."</p> |
| </div> |
| <div class="testimonial-author"> |
| <div class="author-avatar">أ ح</div> |
| <div class="author-info"> |
| <h4>أحمد حسن</h4> |
| <span>مدير شركة التقنية</span> |
| </div> |
| </div> |
| </div> |
| <div class="testimonial-card fade-in"> |
| <div class="testimonial-content"> |
| <p>"النتائج تجاوزت توقعي. الموقع احترافي وسريع والتصميم جذاب جداً. شكراً جزيلاً!"</p> |
| </div> |
| <div class="testimonial-author"> |
| <div class="author-avatar">س م</div> |
| <div class="author-info"> |
| <h4>سارة محمد</h4> |
| <span>صاحبة متجر إلكتروني</span> |
| </div> |
| </div> |
| </div> |
| <div class="testimonial-card fade-in"> |
| <div class="testimonial-content"> |
| <p>"فريق مبدع يحول الأفكار إلى واقع. التعاون سلس والنتيجة مذهلة. أنتم الأفضل!"</p> |
| </div> |
| <div class="testimonial-author"> |
| <div class="author-avatar">خ د</div> |
| <div class="author-info"> |
| <h4>خالد الدوسري</h4> |
| <span>مؤسس شركة ناشئة</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="contact" id="contact"> |
| <div class="contact-container"> |
| <div class="contact-info fade-in"> |
| <h3>لنبدأ رحلة نجاحك اليوم</h3> |
| <p>نحن هنا للإجابة على استفساراتك ومناقشة مشروعك. تواصل معنا وسنكون سعداء بمساعدتك.</p> |
| <div class="contact-details"> |
| <div class="contact-item"> |
| <span class="icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> |
| </span> |
| <span>الرياض، المملكة العربية السعودية</span> |
| </div> |
| <div class="contact-item"> |
| <span class="icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg> |
| </span> |
| <span>+966 123 456 789</span> |
| </div> |
| <div class="contact-item"> |
| <span class="icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> |
| </span> |
| <span>info@n3m.com</span> |
| </div> |
| </div> |
| </div> |
| <form class="contact-form fade-in"> |
| <div class="form-group"> |
| <label for="name">الاسم الكامل</label> |
| <input type="text" id="name" placeholder="أدخل اسمك الكامل"> |
| </div> |
| <div class="form-group"> |
| <label for="email">البريد الإلكتروني</label> |
| <input type="email" id="email" placeholder="أدخل بريدك الإلكتروني"> |
| </div> |
| <div class="form-group"> |
| <label for="subject">الموضوع</label> |
| <input type="text" id="subject" placeholder="ما هو موضوع الرسالة؟"> |
| </div> |
| <div class="form-group"> |
| <label for="message">الرسالة</label> |
| <textarea id="message" placeholder="اكتب رسالتك هنا..."></textarea> |
| </div> |
| <button type="submit" class="btn btn-primary" style="width: 100%;"> |
| إرسال الرسالة |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg> |
| </button> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <footer> |
| <div class="footer-content"> |
| <div class="footer-brand"> |
| <span class="logo">نعم</span> |
| <p>نبتكر حلولاً رقمية استثنائية تساعدك على تحقيق أهدافك والنجاح في عالم الإنترنت.</p> |
| <div class="social-links"> |
| <a href="#" class="social-link"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg> |
| </a> |
| <a href="#" class="social-link"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> |
| </a> |
| <a href="#" class="social-link"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg> |
| </a> |
| </div> |
| </div> |
| <div class="footer-links"> |
| <h4>روابط سريعة</h4> |
| <ul> |
| <li><a href="#home">الرئيسية</a></li> |
| <li><a href="#about">من نحن</a></li> |
| <li><a href="#services">خدماتنا</a></li> |
| <li><a href="#gallery">أعمالنا</a></li> |
| </ul> |
| </div> |
| <div class="footer-links"> |
| <h4>خدماتنا</h4> |
| <ul> |
| <li><a href="#">تطوير المواقع</a></li> |
| <li><a href="#">التصميم البصري</a></li> |
| <li><a href="#">التطبيقات</a></li> |
| <li><a href="#">التسويق</a></li> |
| </ul> |
| </div> |
| <div class="footer-links"> |
| <h4>المعلومات</h4> |
| <ul> |
| <li><a href="#">سياسة الخصوصية</a></li> |
| <li><a href="#">الشروط والأحكام</a></li> |
| <li><a href="#">الأسئلة الشائعة</a></li> |
| <li><a href="#contact">اتصل بنا</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="footer-bottom"> |
| <p>جميع الحقوق محفوظة © 2025 نعم. صُمم بحب</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| window.addEventListener('load', () => { |
| setTimeout(() => { |
| document.getElementById('loading').classList.add('hidden'); |
| }, 1000); |
| }); |
| |
| |
| window.addEventListener('scroll', () => { |
| const navbar = document.getElementById('navbar'); |
| if (window.scrollY > 50) { |
| navbar.classList.add('scrolled'); |
| } else { |
| navbar.classList.remove('scrolled'); |
| } |
| }); |
| |
| |
| const menuToggle = document.getElementById('menu-toggle'); |
| const navLinks = document.getElementById('nav-links'); |
| |
| menuToggle.addEventListener('click', () => { |
| navLinks.classList.toggle('active'); |
| }); |
| |
| |
| document.querySelectorAll('.nav-links a').forEach(link => { |
| link.addEventListener('click', () => { |
| navLinks.classList.remove('active'); |
| }); |
| }); |
| |
| |
| const fadeElements = document.querySelectorAll('.fade-in'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('visible'); |
| } |
| }); |
| }, { |
| threshold: 0.1, |
| rootMargin: '0px 0px -50px 0px' |
| }); |
| |
| fadeElements.forEach(element => { |
| observer.observe(element); |
| }); |
| |
| |
| const counters = document.querySelectorAll('.stat-number'); |
| |
| const counterObserver = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| const counter = entry.target; |
| const target = parseInt(counter.getAttribute('data-count')); |
| const duration = 2000; |
| const increment = target / (duration / 16); |
| |
| let current = 0; |
| const updateCounter = () => { |
| current += increment; |
| if (current < target) { |
| counter.textContent = Math.floor(current); |
| requestAnimationFrame(updateCounter); |
| } else { |
| counter.textContent = target + '+'; |
| } |
| }; |
| |
| updateCounter(); |
| counterObserver.unobserve(counter); |
| } |
| }); |
| }, { threshold: 0.5 }); |
| |
| counters.forEach(counter => { |
| counterObserver.observe(counter); |
| }); |
| |
| |
| function openLightbox(element) { |
| const lightbox = document.getElementById('lightbox'); |
| const lightboxImg = document.getElementById('lightbox-img'); |
| const img = element.querySelector('img'); |
| |
| lightboxImg.src = img.src; |
| lightbox.classList.add('active'); |
| document.body.style.overflow = 'hidden'; |
| } |
| |
| function closeLightbox() { |
| const lightbox = document.getElementById('lightbox'); |
| lightbox.classList.remove('active'); |
| document.body.style.overflow = 'auto'; |
| } |
| |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.key === 'Escape') { |
| closeLightbox(); |
| } |
| }); |
| |
| |
| document.getElementById('lightbox').addEventListener('click', (e) => { |
| if (e.target.id === 'lightbox') { |
| closeLightbox(); |
| } |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ |
| behavior: 'smooth', |
| block: 'start' |
| }); |
| } |
| }); |
| }); |
| |
| |
| document.querySelector('.contact-form').addEventListener('submit', (e) => { |
| e.preventDefault(); |
| alert('شكراً لتواصلك معنا! سنرد على رسالتك في أقرب وقت ممكن.'); |
| }); |
| </script> |
| </body> |
| </html> |
