Spaces:
Running
Running
| --- | |
| import '../styles/global.css'; | |
| export interface Props { | |
| title: string; | |
| description?: string; | |
| lang?: string; | |
| } | |
| const { title, description = "Blueprint Engineering Consultancy - Professional engineering services in Ras Al Khaimah", lang = "ar" } = Astro.props; | |
| const isRtl = lang === 'ar' || lang === 'ur' || lang === 'ps'; | |
| --- | |
| <html lang={lang} dir={isRtl ? 'rtl' : 'ltr'} class="dark"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta name="description" content={description} /> | |
| <meta name="generator" content={Astro.generator} /> | |
| <!-- Open Graph / Facebook --> | |
| <meta property="og:type" content="website" /> | |
| <meta property="og:url" content={Astro.url} /> | |
| <meta property="og:title" content={title} /> | |
| <meta property="og:description" content={description} /> | |
| <meta property="og:image" content="/og-image.jpg" /> | |
| <!-- Twitter --> | |
| <meta property="twitter:card" content="summary_large_image" /> | |
| <meta property="twitter:url" content={Astro.url} /> | |
| <meta property="twitter:title" content={title} /> | |
| <meta property="twitter:description" content={description} /> | |
| <meta property="twitter:image" content="/og-image.jpg" /> | |
| <!-- Favicon --> | |
| <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> | |
| <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <!-- AOS CSS --> | |
| <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" /> | |
| <title>{title}</title> | |
| </head> | |
| <body class="bg-white dark:bg-blueprint-primary text-blueprint-dark dark:text-white"> | |
| <!-- Loading Screen --> | |
| <div class="loading-overlay" id="loading"> | |
| <div class="blueprint-logo-loading"> | |
| <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | |
| <rect x="10" y="10" width="80" height="60" stroke-width="3" fill="none"/> | |
| <rect x="20" y="20" width="25" height="20" stroke-width="2" fill="none"/> | |
| <rect x="55" y="20" width="25" height="20" stroke-width="2" fill="none"/> | |
| <rect x="20" y="45" width="60" height="15" stroke-width="2" fill="none"/> | |
| <circle cx="25" cy="85" r="3"/> | |
| <circle cx="50" cy="85" r="3"/> | |
| <circle cx="75" cy="85" r="3"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <slot /> | |
| <!-- AOS JavaScript --> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js" is:inline></script> | |
| <script is:inline> | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-out-cubic', | |
| once: true, | |
| offset: 50 | |
| }); | |
| // Loading screen | |
| window.addEventListener('load', () => { | |
| const loading = document.getElementById('loading'); | |
| if (loading) { | |
| setTimeout(() => { | |
| loading.classList.add('fade-out'); | |
| setTimeout(() => { | |
| loading.style.display = 'none'; | |
| }, 500); | |
| }, 1500); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| 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' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Auto-detect browser language and redirect if needed | |
| function detectAndRedirectLanguage() { | |
| const currentPath = window.location.pathname; | |
| const supportedLangs = ['ar', 'en', 'zh', 'ja', 'ru', 'hi', 'ur', 'bn', 'ml', 'fr', 'fil', 'es', 'ta', 'ne', 'ps', 'si', 'id', 'te']; | |
| const browserLang = navigator.language.split('-')[0]; | |
| // Check if we're on the root path and browser language is supported but not Arabic | |
| if (currentPath === '/' && supportedLangs.includes(browserLang) && browserLang !== 'ar') { | |
| // Don't redirect automatically, let user choose | |
| return; | |
| } | |
| } | |
| // Run language detection | |
| detectAndRedirectLanguage(); | |
| // Add scroll-based header effects | |
| let lastScrollY = window.scrollY; | |
| const header = document.querySelector('header'); | |
| window.addEventListener('scroll', () => { | |
| const currentScrollY = window.scrollY; | |
| if (header) { | |
| if (currentScrollY > 100) { | |
| header.classList.add('bg-blueprint-primary/95'); | |
| } else { | |
| header.classList.remove('bg-blueprint-primary/95'); | |
| } | |
| } | |
| lastScrollY = currentScrollY; | |
| }); | |
| </script> | |
| </body> | |
| </html> |