AKOR Security

Create a dark-themed single-page landing site for "AKOR — Intelligent Security Systems" using React, Tailwind CSS, and the Sora font (Google Fonts: Sora:wght@300;400;500;600;700).

Design system (CSS custom properties, HSL): --background: 0 0% 10%, --foreground: 0 0% 96% --primary: 119 99% 46% (vivid green), --primary-foreground: 0 0% 4% --muted-foreground: 0 0% 60%, --border: 0 0% 20% --hero-bg: 0 0% 8%, --nav-button: 0 0% 18% Body: bg-background text-foreground font-sora antialiased Global animation: animate-fade-up — a keyframe that fades in from opacity:0 translateY(16px) to opacity:1 translateY(0) over ~600ms ease-out, with animation-fill-mode: forwards.

Section 1 — Fixed Navbar: Fixed top, full-width, z-50, horizontal flex, px-8 lg:px-16 py-5. Left: A small 32×32 rounded green (bg-primary) icon box with an inline SVG hexagon, plus the text "AKOR" in text-xl font-semibold tracking-tight text-foreground. Center (hidden on mobile): Nav links — "Services", "About Us", "Projects", "Team", "Contacts" — styled text-sm text-muted-foreground uppercase tracking-widest, hover → text-foreground. Right (hidden on mobile): "Get Quote" button with bg-nav-button text-foreground hover:bg-nav-button/80 active:scale-[0.97], rounded-lg uppercase text-xs tracking-widest px-6 h-11.

Section 2 — Hero (full viewport): min-h-screen flex flex-col justify-end bg-hero-bg overflow-hidden. Background: an autoplaying, looping, muted <video> covering the entire section via absolute inset-0 w-full h-full object-cover. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260322_013248_a74099a8-be2b-4164-a823-eddd5e149fa1.mp4 Content sits at the bottom-left: relative z-10 px-8 lg:px-16 pb-20 lg:pb-28 pt-32. H1: "Intelligent\nSecurity Systems" (line break after "Intelligent"). Styled text-5xl sm:text-6xl lg:text-[5.5rem] font-light leading-[0.95] tracking-tight text-foreground. Animates in with animate-fade-up delay 0.2s. Subtext: "Innovative security, automation, and AI solutions for businesses and smart cities". Styled text-muted-foreground text-base lg:text-lg max-w-xl mb-10. Delay 0.45s. Two CTAs side by side (flex flex-wrap gap-8, delay 0.65s): "Get Consultation" — green button: bg-primary text-primary-foreground font-semibold hover:bg-primary/90 active:scale-[0.97] rounded-lg px-8 uppercase text-xs tracking-widest h-11. "Learn More" — plain text link: uppercase text-xs tracking-widest text-foreground border-b border-primary pb-1 hover:text-primary transition-colors active:scale-[0.97].

Section 3 — Services (dark foreground background): bg-foreground (white/light background inverted — since foreground = 0 0% 96%, this section has a near-white bg with dark text via text-background). Top: label "Services" in text-muted-foreground/60 text-xs uppercase tracking-[0.25em] mb-8, then a full-width 1px divider bg-muted-foreground/20 mb-16. Two-column layout: flex flex-col lg:flex-row gap-16 lg:gap-24. Left column (38%): vertically centered heading "Security, automation, and AI, helping businesses enhance efficiency" in text-3xl sm:text-4xl leading-[1.15] tracking-tight text-background font-normal. Below it, a "Get Consultation" green button (same style as hero). Right column (62%): 4 service cards in a 2×2 grid (grid-cols-1 sm:grid-cols-2), split into two rows with a horizontal 1px divider between them. Each card has pl-8 border-l border-border/20 and contains: A 64×64 icon image (object-contain) A number label in text-muted-foreground/40 text-xs Title in text-xl font-medium leading-tight text-background whitespace-pre-line Description in text-muted-foreground/50 text-sm leading-relaxed Card data: Card 1: "AI-Driven\nSecurity Solutions" — icon: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260322_015134_c80a3c98-609e-4526-b79e-94dc96cd34e8.png Card 2: "Smart Building\nAutomation" — icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260322_014934_6e2804d7-d219-461d-98d5-36140fc90c4c.png&w=1280&q=85 Card 3: "AI Consulting\nand Integration" — icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260322_014626_97cccc38-534a-4c9d-a801-68a449da9d0c.png&w=1920&q=85 Card 4: "Training\nand Support" — icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260322_014849_570d4eeb-9613-4b19-a084-46c7a2665243.png&w=1280&q=85

Section 4 — About Us (black background): bg-black pt-12 lg:pt-16 pb-24 lg:pb-32 px-8 lg:px-16. Top: "About Us" label + divider (same style as Services). Two-column layout (flex-col lg:flex-row gap-12 lg:gap-0 items-stretch): Left (45%): an autoplaying, looping, muted video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260322_011532_86f9b93a-2ffc-42fd-8735-12a4c55ab536.mp4, styled w-full h-auto rounded-sm. Vertical 1px divider between columns (hidden on mobile): w-px bg-muted-foreground/20 mx-10 mt-8. Right (flex-1, min-h-[500px] lg:min-h-[600px], flex flex-col justify-between): Top: heading "AI-powered security, automation for businesses and smart infrastructures" in text-3xl sm:text-4xl leading-[1.15] tracking-tight text-foreground font-normal. Bottom (mt-auto): paragraph about mission + "Get Quote" green button (px-10).