521 lines
34 KiB
HTML
521 lines
34 KiB
HTML
{% load static i18n %}
|
||
<!DOCTYPE html>
|
||
<html lang="{{ current_lang }}" dir="{% if current_lang == 'ar' %}rtl{% else %}ltr{% endif %}">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{% if settings %}{{ settings.company_name|default:"Tenhal" }}{% else %}Tenhal{% endif %} | {% trans 'AI Product and Services' %}</title>
|
||
|
||
<!-- Fonts: Cairo for Arabic, Inter for English -->
|
||
<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=Cairo:wght@300;400;600;700;800&family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
|
||
<!-- Favicon & Touch Icons -->
|
||
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/apple-touch-icon.png' %}">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicon-32x32.png' %}">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicon-16x16.png' %}">
|
||
<link rel="manifest" href="{% static 'images/site.webmanifest' %}">
|
||
|
||
<link rel="stylesheet" href="{% static 'css/main.css' %}">
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="container nav-inner">
|
||
|
||
<a href="/" class="logo" aria-label="Tenhal Home">
|
||
<div class="logo-wrapper">
|
||
<div class="brand-text">
|
||
<div class="arabic">تـنـحـل</div>
|
||
<div class="english">
|
||
<span>T</span><span>E</span><span>N</span><span>H</span><span>A</span><span>L</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="symbol">
|
||
<div class="b top-left"></div>
|
||
<div class="b top-right"></div>
|
||
<div class="b middle"></div>
|
||
<div class="b inner"></div>
|
||
<div class="b bottom-base"></div>
|
||
<div class="b right-wall"></div>
|
||
<div class="b stem"></div>
|
||
<div class="corner-arc"></div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div style="display: flex; align-items: center;">
|
||
<nav class="nav-links">
|
||
<a href="#services">{% trans "Services" %}</a>
|
||
<a href="#team">{% trans "Team" %}</a>
|
||
<a href="#products">{% trans "Products" %}</a>
|
||
<a href="#testimonials">{% trans "Testimonials" %}</a>
|
||
</nav>
|
||
|
||
<!-- LANGUAGE TOGGLE FORM -->
|
||
{% if current_lang == 'en' %}
|
||
<form action="{% url 'set_language' %}" method="post" style="display:inline;">{% csrf_token %}
|
||
<input name="language" type="hidden" value="ar">
|
||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||
|
||
|
||
<button class="lang-switch" type="submit" >
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6" height="20" width="20" style="color: inherit;">
|
||
<path fill-rule="evenodd" d="M9 2.25a.75.75 0 0 1 .75.75v1.506a49.384 49.384 0 0 1 5.343.371.75.75 0 1 1-.186 1.489c-.66-.083-1.323-.151-1.99-.206a18.67 18.67 0 0 1-2.97 6.323c.318.384.65.753 1 1.107a.75.75 0 0 1-1.07 1.052A18.902 18.902 0 0 1 9 13.687a18.823 18.823 0 0 1-5.656 4.482.75.75 0 0 1-.688-1.333 17.323 17.323 0 0 0 5.396-4.353A18.72 18.72 0 0 1 5.89 8.598a.75.75 0 0 1 1.388-.568A17.21 17.21 0 0 0 9 11.224a17.168 17.168 0 0 0 2.391-5.165 48.04 48.04 0 0 0-8.298.307.75.75 0 0 1-.186-1.489 49.159 49.159 0 0 1 5.343-.371V3A.75.75 0 0 1 9 2.25ZM15.75 9a.75.75 0 0 1 .68.433l5.25 11.25a.75.75 0 1 1-1.36.634l-1.198-2.567h-6.744l-1.198 2.567a.75.75 0 0 1-1.36-.634l5.25-11.25A.75.75 0 0 1 15.75 9Zm-2.672 8.25h5.344l-2.672-5.726-2.672 5.726Z" clip-rule="evenodd" />
|
||
</svg>
|
||
{% trans "Arabic" %}
|
||
</button>
|
||
|
||
|
||
</form>
|
||
{% else %}
|
||
<form action="{% url 'set_language' %}" method="post" style="display:inline;">{% csrf_token %}
|
||
<input name="language" type="hidden" value="en">
|
||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||
<button class="lang-switch" type="submit">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6" height="20" width="20" style="color: inherit;">
|
||
<path fill-rule="evenodd" d="M9 2.25a.75.75 0 0 1 .75.75v1.506a49.384 49.384 0 0 1 5.343.371.75.75 0 1 1-.186 1.489c-.66-.083-1.323-.151-1.99-.206a18.67 18.67 0 0 1-2.97 6.323c.318.384.65.753 1 1.107a.75.75 0 0 1-1.07 1.052A18.902 18.902 0 0 1 9 13.687a18.823 18.823 0 0 1-5.656 4.482.75.75 0 0 1-.688-1.333 17.323 17.323 0 0 0 5.396-4.353A18.72 18.72 0 0 1 5.89 8.598a.75.75 0 0 1 1.388-.568A17.21 17.21 0 0 0 9 11.224a17.168 17.168 0 0 0 2.391-5.165 48.04 48.04 0 0 0-8.298.307.75.75 0 0 1-.186-1.489 49.159 49.159 0 0 1 5.343-.371V3A.75.75 0 0 1 9 2.25ZM15.75 9a.75.75 0 0 1 .68.433l5.25 11.25a.75.75 0 1 1-1.36.634l-1.198-2.567h-6.744l-1.198 2.567a.75.75 0 0 1-1.36-.634l5.25-11.25A.75.75 0 0 1 15.75 9Zm-2.672 8.25h5.344l-2.672-5.726-2.672 5.726Z" clip-rule="evenodd" />
|
||
</svg>
|
||
{% trans "English" %}
|
||
</button>
|
||
</form>
|
||
{% endif %}
|
||
<!-- END LANGUAGE TOGGLE -->
|
||
|
||
<div class="nav-cta">
|
||
<a href="#contact" class="btn btn-primary">{% trans "Get Started" %}</a>
|
||
</div>
|
||
<button class="mobile-toggle" onclick="toggleMenu()" aria-label="Toggle Menu">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="nav-overlay" id="mobile-nav">
|
||
<a href="#services" onclick="toggleMenu()">{% trans "Services" %}</a>
|
||
<a href="#team" onclick="toggleMenu()">{% trans "Team" %}</a>
|
||
<a href="#products" onclick="toggleMenu()">{% trans "Products" %}</a>
|
||
<a href="#testimonials" onclick="toggleMenu()">{% trans "Testimonials" %}</a>
|
||
<a href="#contact" onclick="toggleMenu()">{% trans "Contact" %}</a>
|
||
</div>
|
||
|
||
<section class="hero">
|
||
<div class="container hero-grid">
|
||
<div class="reveal">
|
||
<div class="badge">{% trans "Digital Transformation Partner" %}</div>
|
||
<h1>
|
||
{% if current_lang == 'ar' %}تمكين المستقبل الرقمي للمملكة{% else %}Empowering the Kingdom’s Digital Future.{% endif %}
|
||
</h1>
|
||
<p class="lead" style="margin-bottom: 2.5rem;">
|
||
{% if current_lang == 'ar' %}نحن نقدم خبرة هندسية عالمية وحلول ذكاء اصطناعي محلية لمساعدة الشركات السعودية على النمو والابتكار.{% else %}We deliver world-class engineering expertise and localized AI solutions to help Saudi enterprises scale, innovate, and lead the next era of technology.{% endif %}
|
||
</p>
|
||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||
<a href="#services" class="btn btn-primary btn-lg">{% trans "Our Services" %}</a>
|
||
<a href="#contact" class="btn btn-outline btn-lg">{% trans "Contact Sales" %}</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual reveal">
|
||
<div class="hero-visual-bg"></div>
|
||
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85%; height: 75%; background: white; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column;">
|
||
<div style="height: 30px; background: #fdfdfd; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 12px; gap: 6px;">
|
||
<div style="width: 8px; height: 8px; border-radius: 50%; background: #09090b;"></div>
|
||
<div style="width: 8px; height: 8px; border-radius: 50%; background: #09090b;"></div>
|
||
<div style="width: 8px; height: 8px; border-radius: 50%; background: #09090b;"></div>
|
||
</div>
|
||
<div style="flex: 1; position: relative;">
|
||
{% if settings and settings.hero_image %}
|
||
<img src="{{ settings.hero_image.url }}" alt="Tenhal Software Platform" class="hero-img">
|
||
{% else %}
|
||
<img src="https://picsum.photos/seed/tech/600/400" alt="Placeholder" class="hero-img">
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="partners-section">
|
||
<!-- Added ID 'marquee-track' to this div -->
|
||
<div id="marquee-track" class="marquee-track">
|
||
{% for partner in partners %}
|
||
{% if partner.logo %}
|
||
<img src="{{ partner.logo.url }}" alt="{{ partner.name_en }}" class="partner-logo">
|
||
{% else %}
|
||
<span class="partner-item">{% if current_lang == 'ar' %}{{ partner.name_ar }}{% else %}{{ partner.name_en }}{% endif %}</span>
|
||
{% endif %}
|
||
{% empty %}
|
||
<span class="partner-item">KAAUH</span><span class="partner-item">Hammadi Hospital</span>
|
||
{% endfor %}
|
||
|
||
<!-- Remove the manual repeat block below -->
|
||
<!-- Javascript will now handle repeating the content to fill the width -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Services Section -->
|
||
<section id="services" style="padding: var(--section-spacing) 0;">
|
||
<div class="container">
|
||
<div class="reveal">
|
||
<div class="section-header">
|
||
<div>
|
||
<div class="badge">{% trans "Our Expertise" %}</div>
|
||
<h2>{% trans "Engineering Services" %}</h2>
|
||
</div>
|
||
<div class="carousel-controls">
|
||
<button class="slider-btn" onclick="scrollCarousel('services-track', -1)" aria-label="Previous Service">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
|
||
</button>
|
||
<button class="slider-btn" onclick="scrollCarousel('services-track', 1)" aria-label="Next Service">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="carousel-container reveal">
|
||
<div id="services-track" class="carousel-track services-track">
|
||
{% for service in expertise %}
|
||
<div class="carousel-item">
|
||
<div class="card">
|
||
<div class="card-icon">
|
||
{{ service.icon_svg|safe }}
|
||
</div>
|
||
<h3>{% if current_lang == 'ar' %}{{ service.title_ar }}{% else %}{{ service.title_en }}{% endif %}</h3>
|
||
<p>{% if current_lang == 'ar' %}{{ service.description_ar }}{% else %}{{ service.description_en }}{% endif %}</p>
|
||
</div>
|
||
</div>
|
||
{% empty %}
|
||
<p>{% trans "No expertise listed yet." %}</p>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Products Section -->
|
||
<section id="products" class="product-section">
|
||
<div class="container">
|
||
<div class="reveal" style="margin-bottom: 3rem; text-align: center;">
|
||
<div class="badge" style="background: #27272a; color: white; border: 1px solid #3f3f46;">{% trans "Software Products" %}</div>
|
||
<h2 style="margin-top: 1rem;">{% trans "Proprietary Solutions" %}</h2>
|
||
</div>
|
||
|
||
<div class="slider-controls reveal">
|
||
<div class="slider-indicators" id="slider-indicators">
|
||
{% for product in products %}
|
||
<div class="indicator {% if forloop.first %}active{% endif %}" data-index="{{ forloop.counter0 }}"></div>
|
||
{% endfor %}
|
||
</div>
|
||
<div style="width: 1rem;"></div>
|
||
<button class="slider-btn" id="prev-btn" aria-label="Previous Product">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
|
||
</button>
|
||
<button class="slider-btn" id="next-btn" aria-label="Next Product">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="product-slider-wrapper">
|
||
{% for product in products %}
|
||
<div class="product-slide {% if forloop.first %}active{% endif %}">
|
||
<div class="product-text">
|
||
<h2 style="color: white; margin-bottom: 0.5rem;">{% if current_lang == 'ar' %}{{ product.name_ar }}{% else %}{{ product.name_en }}{% endif %}</h2>
|
||
<div class="badge" style="background: #3f3f46; color: white; margin-bottom: 1.5rem;">{% trans "Enterprise Solution" %}</div>
|
||
<p style="color: #a1a1aa; margin-bottom: 2rem;">{% if current_lang == 'ar' %}{{ product.description_ar }}{% else %}{{ product.description_en }}{% endif %}</p>
|
||
<ul class="feature-list">
|
||
{% if current_lang == 'ar' %}
|
||
{% for feature in product.features_ar %}
|
||
<li><svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> {{ feature }}</li>
|
||
{% endfor %}
|
||
{% else %}
|
||
{% for feature in product.features_en %}
|
||
<li><svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> {{ feature }}</li>
|
||
{% endfor %}
|
||
{% endif %}
|
||
</ul>
|
||
{% if product.link %}
|
||
<a href="{{ product.link }}" target="_blank" class="btn" style="background: white; color: black; margin-top: 2rem;">{% trans "Request Demo" %}</a>
|
||
{% else %}
|
||
<a href="#contact" class="btn" style="background: white; color: black; margin-top: 2rem;">{% trans "Request Demo" %}</a>
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% if product.link %}
|
||
<a href="{{ product.link }}" target="_blank">
|
||
<div class="product-ui-mockup">
|
||
<div style="display: flex; gap: 6px; margin-bottom: 0.5rem;">
|
||
<div style="width: 8px; height: 8px; border-radius: 50%; background: #52525b;"></div>
|
||
<div style="width: 8px; height: 8px; border-radius: 50%; background: #52525b;"></div>
|
||
</div>
|
||
{% if product.image %}
|
||
<div style="display: flex; flex-direction: column; gap: 10px; flex: 1;">
|
||
<div style="display: flex; gap: 10px; height: 100%;">
|
||
<div style="width: 30%; background: #3f3f46; border-radius: 4px;"></div>
|
||
<div style="width: 70%; display: flex; flex-direction: column; gap: 8px;">
|
||
<div style="height: 40px; background: #52525b; border-radius: 4px;"></div>
|
||
<div style="flex: 1; background: #3f3f46; border-radius: 4px; overflow: hidden;">
|
||
<img src="{{ product.image.url }}" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.8;" alt="Mockup">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif%}
|
||
</div>
|
||
</a>
|
||
|
||
{% endif%}
|
||
|
||
</div>
|
||
{% empty %}
|
||
<div class="product-slide active" style="text-align:center;">{% trans "No products available." %}</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Team Section -->
|
||
<section id="team" style="padding: var(--section-spacing) 0; background: var(--secondary);">
|
||
<div class="container">
|
||
<div class="reveal">
|
||
<div class="section-header">
|
||
<div>
|
||
<div class="badge">{% trans "Leadership" %}</div>
|
||
<h2>{% trans "Meet Team" %}</h2>
|
||
</div>
|
||
<div class="carousel-controls">
|
||
<button class="slider-btn" onclick="scrollCarousel('team-track', -1)" aria-label="Previous Team Member">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
|
||
</button>
|
||
<button class="slider-btn" onclick="scrollCarousel('team-track', 1)" aria-label="Next Team Member">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="carousel-container reveal">
|
||
<div id="team-track" class="carousel-track team-track">
|
||
{% for member in team %}
|
||
<div class="carousel-item">
|
||
<div class="team-card card">
|
||
<div class="team-img-wrapper">
|
||
{% if member.photo %}
|
||
<img src="{{ member.photo.url }}" alt="{% if current_lang == 'ar' %}{{ member.name_ar }}{% else %}{{ member.name_en }}{% endif %}">
|
||
{% else %}
|
||
<img src="https://picsum.photos/seed/{{ member.id }}/200/200" alt="Placeholder">
|
||
{% endif %}
|
||
</div>
|
||
<p style="font-size: 0.75rem; font-weight: 700; color: #71717a; text-transform: uppercase;">{% if current_lang == 'ar' %}{{ member.role_ar }}{% else %}{{ member.role_en }}{% endif %}</p>
|
||
<h3>{% if current_lang == 'ar' %}{{ member.name_ar }}{% else %}{{ member.name_en }}{% endif %}</h3>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Testimonials Section -->
|
||
<section id="testimonials" style="padding: var(--section-spacing) 0;">
|
||
<div class="container">
|
||
<div class="reveal">
|
||
<div class="section-header">
|
||
<div>
|
||
<div class="badge">{% trans "Success Stories" %}</div>
|
||
<h2>{% trans "Trusted by Leaders" %}</h2>
|
||
</div>
|
||
<div class="carousel-controls">
|
||
<button class="slider-btn" onclick="scrollCarousel('testimonials-track', -1)" aria-label="Previous Testimonial">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
|
||
</button>
|
||
<button class="slider-btn" onclick="scrollCarousel('testimonials-track', 1)" aria-label="Next Testimonial">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="carousel-container reveal">
|
||
<div id="testimonials-track" class="carousel-track testimonials-track">
|
||
{% for testimonial in testimonials %}
|
||
<div class="carousel-item">
|
||
<div class="card">
|
||
{% if testimonial.client_photo %}
|
||
<img src="{{ testimonial.client_photo.url }}" alt="{% if current_lang == 'ar' %}{{ testimonial.client_name_ar }}{% else %}{{ testimonial.client_name_en }}{% endif %}" class="testimonial-img">
|
||
{% else %}
|
||
<img src="https://picsum.photos/seed/{{ testimonial.id }}/150/150" alt="Placeholder" class="testimonial-img">
|
||
{% endif %}
|
||
<p class="testimonial-text">"{{ testimonial.feedback_en }}"</p>
|
||
<div class="testimonial-author">
|
||
<span class="testimonial-author-name">{% if current_lang == 'ar' %}{{ testimonial.client_name_ar }}{% else %}{{ testimonial.client_name_en }}{% endif %}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" style="padding: var(--section-spacing) 0;">
|
||
<div class="container">
|
||
<div class="contact-wrapper reveal">
|
||
<div class="contact-info">
|
||
<h2 style="margin-bottom: 1rem;">{% trans "Ready to build?" %}</h2>
|
||
<p style="margin-bottom: 2rem; color: var(--muted-foreground);">{% trans "Our solutions architects typically respond to project inquiries within 24 business hours." %}</p>
|
||
|
||
<div class="contact-details-grid" style="display: grid; gap: 1.5rem; margin-top: 2rem;">
|
||
{% if settings %}
|
||
{% if settings.company_address_en %}
|
||
<div>
|
||
<div style="font-size: 0.75rem; font-weight: 700; color: var(--primary); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem;">{% trans "Address" %}</div>
|
||
<div style="font-size: 0.9rem; white-space: pre-line;">
|
||
{% if current_lang == 'ar' %}{{ settings.company_address_ar }}{% else %}{{ settings.company_address_en }}{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if settings.company_phone %}
|
||
<div>
|
||
<div style="font-size: 0.75rem; font-weight: 700; color: var(--primary); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem;">{% trans "Call Us" %}</div>
|
||
{% for phone in settings.company_phone %}
|
||
<div style="font-size: 0.9rem;">{{ phone }}</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if settings.company_email %}
|
||
<div>
|
||
<div style="font-size: 0.75rem; font-weight: 700; color: var(--primary); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem;">{% trans "Email Us" %}</div>
|
||
{% for email in settings.company_email %}
|
||
<div style="font-size: 0.9rem;">{{ email }}</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div>
|
||
<div style="font-size: 0.75rem; font-weight: 700; color: var(--primary); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem;">{% trans "Working Hours" %}</div>
|
||
<div style="font-size: 0.9rem;">{% trans "Sunday - Thursday" %}</div>
|
||
<div style="font-size: 0.9rem;">9:00AM - 05:00PM</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-form-box">
|
||
<form id="contactForm" method="POST" action="{% url 'submit_inquiry' %}">
|
||
{% csrf_token %}
|
||
<label class="form-label">{% trans "Full Name" %}</label>
|
||
<input type="text" name="name" class="form-control" placeholder="{% trans 'Your full name' %}" required>
|
||
<label class="form-label">{% trans "Work Email" %}</label>
|
||
<input type="email" name="email" class="form-control" placeholder="name@company.com" required>
|
||
<label class="form-label">{% trans "Message" %}</label>
|
||
<textarea name="message" class="form-control" placeholder="{% trans 'Tell us about your project...' %}" style="min-height: 120px;"></textarea>
|
||
<button type="submit" class="btn btn-primary" style="width: 100%; height: 3.5rem; font-weight: 600;">{% trans "Send Message" %}</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Toast Notification -->
|
||
<div id="toast" style="position: fixed; bottom: 20px; right: 20px; background: #18181b; color: white; padding: 1rem 2rem; border-radius: var(--radius); transform: translateY(150%); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 2000; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
|
||
{% trans "Message sent successfully!" %}
|
||
</div>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div>
|
||
<a href="#" class="logo" style="display: block; margin-bottom: 1.5rem;">TENHAL</a>
|
||
<p style="font-size: 0.875rem; max-width: 300px;">{% trans "Empowering global enterprises through elite engineering and AI products." %}</p>
|
||
</div>
|
||
<div>
|
||
<h4 style="font-size: 0.875rem; margin-bottom: 1.25rem;">{% trans "Expertise" %}</h4>
|
||
{% if expertise %}
|
||
<ul style="list-style: none;" class="footer-links">
|
||
{% if current_lang == "en" %}
|
||
{% for expertise in expertise %}
|
||
<li><a href="#services">{{ expertise.title_en |title}}</a></li>
|
||
{% endfor %}
|
||
{% else %}
|
||
|
||
<li><a href="#services">{{ expertise.title_ar }}</a></li>
|
||
|
||
{% endif %}
|
||
</ul>
|
||
{% endif %}
|
||
</div>
|
||
<div>
|
||
<h4 style="font-size: 0.875rem; margin-bottom: 1.25rem;">{% trans "Products" %}</h4>
|
||
<ul style="list-style: none;" class="footer-links">
|
||
{% if current_lang == "en" %}
|
||
{% for product in products %}
|
||
<li><a href="{{ product.link }}" target="_blank">{{ product.name_en }}</a></li>
|
||
{% endfor %}
|
||
{% else %}
|
||
{% for product in products %}
|
||
<li><a href="{{ product.link }}" target="_blank">{{ product.name_ar }}</a></li>
|
||
{% endfor %}
|
||
{% endif %}
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="font-size: 0.875rem; margin-bottom: 1.25rem;">{% trans "Company" %}</h4>
|
||
<ul style="list-style: none; display: flex; align-items: center; gap: 1rem; padding: 0;" class="footer-links">
|
||
<li style="margin-inline-end: 0.5rem;"><a href="#team">{% trans "About Us" %}</a></li>
|
||
|
||
{% if settings.linkedin_url %}
|
||
<li>
|
||
<a href="{{ settings.linkedin_url }}" target="_blank" aria-label="LinkedIn">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
{% endif %}
|
||
|
||
{% if settings.twitter_url %}
|
||
<li>
|
||
<a href="{{ settings.twitter_url }}" target="_blank" aria-label="Twitter">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
{% endif %}
|
||
|
||
{% if settings.facebook_url %}
|
||
<li>
|
||
<a href="{{ settings.facebook_url }}" target="_blank" aria-label="Facebook">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.592 1.323-1.324v-21.35c0-.732-.593-1.325-1.325-1.325z"/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
{% endif %}
|
||
|
||
{% if settings.instagram_url %}
|
||
<li>
|
||
<a href="{{ settings.instagram_url }}" target="_blank" aria-label="Instagram">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
{% endif %}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div style="padding-top: 2rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--muted-foreground); display: flex; justify-content: space-between;">
|
||
<p>© {% now "Y" %} tenhal.sa</p>
|
||
<p>{% trans "Built with Engineering Excellence" %}</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="{% static 'js/main.js' %}"></script>
|
||
</body>
|
||
</html> |