project setup

2025-11-02 10:00:53 +01:00
parent 75bd171804
commit 7cb4c5345e
51 changed files with 3616 additions and 0 deletions
@@ -0,0 +1,112 @@
+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;