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,111 @@
+import Image from "next/image";
+
+import aboutBg from "@/public/assets/images/our-mission-bg.png";
+import avatar from "@/public/assets/avatars/avatar.png";
+import avatar1 from "@/public/assets/avatars/avatar_1.png";
+import avatar2 from "@/public/assets/avatars/avatar_2.png";
+import avatar3 from "@/public/assets/avatars/avatar_3.png";
+
+import TeamMemberCard from "@/components/about/TeamMemberCard";
+
+const AboutPage = () => {
+  return (
+    <div>
+      <section className="relative overflow-hidden w-full min-h-[600px] sm:min-h-[700px] md:aspect-[5/3] md:max-h-[900px] -mt-[75px] pt-[75px]">
+        <div
+          className="absolute inset-0 sm:top-[-75px] top-[-35px] overflow-hidden"
+          style={{
+            WebkitMaskImage:
+              "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%)",
+            maskImage:
+              "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%)",
+          }}
+        >
+          <Image
+            src={aboutBg}
+            alt="About background"
+            fill
+            className="object-cover h-full"
+            style={{ objectPosition: "50% 20%" }}
+            priority
+          />
+          {/* Mobile darkening overlay */}
+          <div className="absolute inset-0 bg-black/35 md:bg-black/0" />
+          <div className="pointer-events-none absolute left-1/2 top-[-36%] w-[260%] h-[62%] -translate-x-1/2 bg-[radial-gradient(circle_at_50%_-70%,rgba(127,19,236,0.88),rgba(127,19,236,0.52)_58%,rgba(25,16,34,0)_88%)] blur-[180px] opacity-95" />
+          <div className="pointer-events-none absolute left-1/2 bottom-[-18%] w-[240%] h-[36%] -translate-x-1/2 bg-[radial-gradient(circle_at_50%_135%,rgba(127,19,236,0.82),rgba(127,19,236,0.36)_46%,rgba(25,16,34,0)_86%)] blur-[140px] opacity-[0.9]" />
+        </div>
+
+        <div className="relative z-10 w-full h-full flex items-center justify-center px-6 py-12 sm:py-12 md:py-8">
+          <div className="max-w-4xl text-center">
+            <h1 className="text-3xl sm:text-4xl lg:text-6xl font-mono font-extrabold text-white drop-shadow-[0_0_20px_rgba(127,19,236,0.7)]">
+              Our Mission
+            </h1>
+            <p className="mt-4 sm:mt-6 text-sm sm:text-base font-mono leading-relaxed px-4">
+              Us as human, we better work as a collective no matter the language
+              or background we have. However we at LAN Codes believe we can
+              bring one more player to the team, AI. Acceleration of machine
+              learning language (MLL) models. "AI", is scary. In some way "I
+              Robot" it may seem more real to some. However, for players in LAN
+              Codes there is nothing that scares us. We are attempting to use
+              our critical thinking and MLL's efficiency to remove the busy work
+              and reduce human errors. While working on creating these systems
+              our results will produce cost effective security with
+              uncompromising safety. We believe that safety should not be a
+              privilege.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section 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 px-4 sm:px-6 lg:px-8 pb-4 pt-4 max-w-[82.5%]">
+          <div className="text-center mb-4">
+            <h2 className="text-2xl sm:text-5xl font-mono">Founder</h2>
+          </div>
+
+          <div className="flex flex-col md:flex-row md:items-center md:justify-center gap-8 md:gap-12 max-w-3xl mx-auto">
+            <TeamMemberCard
+              avatar={avatar2}
+              name="Milan Vucetic"
+              position="Founder"
+            />
+            <p className="font-mono text-sm sm:text-base leading-relaxed text-white/90 text-center md:max-w-xl">
+              I was always told you cannot reinvent the wheel, but you can make
+              it better. While working in reactive security prevention, then
+              moved towards proactive security prevention and a sprinkle of
+              inspiration, I managed to find a gap in many security doors, and
+              better yet a solution to tighten them up. With that goal I have
+              managed to organize the team of fearless people and with their
+              help LAN Codes became a reality from just an idea on a napkin.
+            </p>
+          </div>
+
+          <div className="mt-6 text-center">
+            <h3 className="text-xl sm:text-4xl font-mono">Meet the team</h3>
+          </div>
+
+          <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-12 max-w-3xl mx-auto justify-items-center">
+            <TeamMemberCard
+              avatar={avatar1}
+              name="Tevin Gary-Vincent"
+              position="Head of Cybersecurity"
+            />
+            <TeamMemberCard
+              avatar={avatar}
+              name="Nenad Zivotic"
+              position="Front-end Developer"
+            />
+            <TeamMemberCard
+              avatar={avatar3}
+              name="Stefan Djukelic"
+              position="Back-end Developer"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default AboutPage;