113 lines
5.0 KiB
TypeScript
113 lines
5.0 KiB
TypeScript
import Image from "next/image";
|
|
import { LockKeyhole, RotateCcw, Shield } from "lucide-react";
|
|
|
|
import heroBanner from "@/public/assets/images/homescreen_bg.png";
|
|
import FeatureCard from "@/components/FeatureCard";
|
|
import GetStartedButton from "@/components/navigation/GetStartedButton";
|
|
|
|
const HomePage = () => {
|
|
return (
|
|
<div>
|
|
<main>
|
|
<div>
|
|
<section className="relative overflow-hidden w-full min-h-[500px] sm:min-h-[600px] md:aspect-[16/9] md:max-h-[900px] -mt-[75px] pt-[75px] md:pt-[75px]">
|
|
{/* Background image */}
|
|
<div
|
|
className="absolute inset-0 top-[-75px] overflow-hidden"
|
|
style={{
|
|
WebkitMaskImage:
|
|
"linear-gradient(to bottom, rgba(0,0,0,0) 10%, rgba(0,0,0,0.3) 12%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%)",
|
|
maskImage:
|
|
"linear-gradient(to bottom, rgba(0,0,0,0) 10%, rgba(0,0,0,0.3) 12%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%)",
|
|
}}
|
|
>
|
|
<Image
|
|
src={heroBanner}
|
|
alt="Hero background"
|
|
fill
|
|
priority
|
|
className="object-cover h-full"
|
|
style={{ objectPosition: "50% 42.5%" }}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/3 via-black/6 to-black/9" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(127,19,236,0.03),rgba(16,0,40,0.06)_58%,rgba(0,0,0,0.12))]" />
|
|
{/* Mobile darkening overlay */}
|
|
<div className="absolute inset-0 bg-black/30 md:bg-black/0" />
|
|
</div>
|
|
|
|
<div className="relative z-10 w-full h-full flex items-center px-6 sm:px-10 md:pl-16 lg:pl-24 py-12 sm:py-12 md:py-8">
|
|
<div>
|
|
<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-6xl">
|
|
<span className="font-mono font-semibold w-[100px]">
|
|
Cost-Effective{" "}
|
|
</span>
|
|
<span className="text-[var(--color-8)] font-semibold">
|
|
Security
|
|
</span>
|
|
<br />
|
|
<span className="font-mono font-semibold w-[100px]">
|
|
Uncompromising{" "}
|
|
</span>
|
|
<span className="text-[var(--color-5)] font-semibold">
|
|
Safety
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="mt-2 font-bold max-w-4xl text-lg sm:text-xl md:text-2xl">
|
|
Security that is{" "}
|
|
<span className="text-[var(--color-9)]">tailored</span>
|
|
</p>
|
|
<p className="mb-2 font-bold max-w-4xl text-lg sm:text-xl md:text-2xl">
|
|
for{" "}
|
|
<span className="text-[var(--color-5)]">your business</span>{" "}
|
|
needs
|
|
</p>
|
|
|
|
<GetStartedButton />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section id="services" className="relative z-10 bg-[var(--color-1)]">
|
|
<div className="pointer-events-none absolute -top-16 left-0 right-0 h-16 bg-gradient-to-b from-transparent via-[var(--color-1)]/38 to-[var(--color-1)]" />
|
|
<div className="mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8 py-6 sm:py-16 md:py-20">
|
|
<div className="text-center">
|
|
<h2 className="text-2xl sm:text-3xl font-extrabold font-mono">
|
|
Comprehensive Cybersecurity Services
|
|
</h2>
|
|
<p className="mt-3 max-w-3xl mx-auto text-md sm:text-lg font-mono">
|
|
Lan Codes offers a range of services in one simple package
|
|
designed to protect your business from cyber threats, ensuring
|
|
data security and operational continuity.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-6 sm:mt-10 grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<FeatureCard
|
|
icon={<Shield color="green" size={30} />}
|
|
title="Risk Detection"
|
|
description="Be on top of your end users and ensure there are no weak links in the chain. Have active reminders on your high risk users."
|
|
/>
|
|
|
|
<FeatureCard
|
|
icon={<LockKeyhole color="red" size={30} />}
|
|
title="Data Encryption & Security"
|
|
description="Robust data encryption and security measures to protect sensitive information and ensure compliance with industry standard."
|
|
/>
|
|
|
|
<FeatureCard
|
|
icon={<RotateCcw color="purple" size={30} />}
|
|
title="24/7 Monitoring & Assistance"
|
|
description="Round-the-clock monitoring and assistance to address and resolve any security incidents, minimizing downtime and potential damage."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HomePage;
|