Finished about us page

Frontend/src/app/about-us/page.tsx

@@ -0,0 +1,17 @@
+import {
+  AboutUsOverviewContainer,
+  AboutUsSolutionContainer,
+  AboutUsMissionContainer,
+  AboutUsTeamContainer,
+} from "@/containers";
+
+export default function AboutUsPage() {
+  return (
+    <div className="flex flex-col">
+      <AboutUsOverviewContainer />
+      <AboutUsSolutionContainer />
+      <AboutUsMissionContainer />
+      <AboutUsTeamContainer />
+    </div>
+  );
+}

Frontend/src/containers/about-us-mission-container.tsx

@@ -0,0 +1,25 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { aboutUsData } from "@/data";
+
+/* This container renders contact us sections */
+export const AboutUsMissionContainer: FC = () => {
+  return (
+    <div className="grid md:grid-cols-2 gap-x-8 px-4 py-12">
+      <div>
+        <h2 className="text-center text-secondary">
+          {aboutUsData.missionHeading}
+        </h2>
+        <p className="leading-relaxed text-justify">{aboutUsData.missionParagraph}</p>
+      </div>
+      <div className="flex items-center">
+        <img
+          className="max-w-full rounded-lg"
+          src={aboutUsData.missionImage}
+          alt="Overview image"
+        />
+      </div>
+    </div>
+  );
+};

Frontend/src/containers/about-us-overview-container.tsx

@@ -0,0 +1,25 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { aboutUsData } from "@/data";
+
+/* This container renders contact us sections */
+export const AboutUsOverviewContainer: FC = () => {
+  return (
+    <div className="grid md:grid-cols-2 gap-x-8 px-4 py-12">
+      <div>
+        <h2 className="text-center text-secondary">
+          {aboutUsData.overviewHeading}
+        </h2>
+        <p className="leading-relaxed text-justify">{aboutUsData.overviewParagraph}</p>
+      </div>
+      <div className="flex items-center">
+        <img
+          className="max-w-full rounded-lg"
+          src={aboutUsData.overviewImage}
+          alt="Overview image"
+        />
+      </div>
+    </div>
+  );
+};

Frontend/src/containers/about-us-solution-container.tsx

@@ -0,0 +1,25 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { aboutUsData } from "@/data";
+
+/* This container renders contact us sections */
+export const AboutUsSolutionContainer: FC = () => {
+  return (
+    <div className="grid md:grid-cols-2 gap-x-8 bg-primary text-white px-4 py-12">
+      <div className="md:order-last">
+        <h2 className="text-center">
+          {aboutUsData.solutionHeading}
+        </h2>
+        <p className="leading-relaxed text-justify">{aboutUsData.solutionParagraph}</p>
+      </div>
+      <div className="flex items-center">
+        <img
+          className="max-w-full rounded-lg"
+          src={aboutUsData.solutionImage}
+          alt="Overview image"
+        />
+      </div>
+    </div>
+  );
+};

Frontend/src/containers/about-us-team-container.tsx

@@ -0,0 +1,30 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { aboutUsData } from "@/data";
+
+/* This container renders contact us sections */
+export const AboutUsTeamContainer: FC = () => {
+  return (
+    <div className="flex flex-col items-center bg-primary text-white px-4 py-12">
+      <h2 className="text-center">{aboutUsData.teamHeading}</h2>
+      <p className="leading-relaxed pb-3 sm:w-1/2 text-center">
+        {aboutUsData.teamParagraph}
+      </p>
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-x-8 gap-y-8">
+        {aboutUsData.teamMembers.map((item, index) => (
+          <div className="flex flex-col gap-y-4 items-center" key={index}>
+            <img
+              className="block rounded-lg w-full max-h-72 object-cover"
+              src={item.image}
+              alt="Overview image"
+            />
+            <span className="font-bold text-lg">{item.name}</span>
+            <span className="">{item.title}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

Frontend/src/containers/index.ts

@@ -1,3 +1,7 @@
 export { LayoutContainer } from "./layout-container";
 export { VideoStreamContainer } from "./video-stream-container";
 export { ContactUsContainer } from "./contact-us-container";
+export { AboutUsOverviewContainer } from "./about-us-overview-container";
+export { AboutUsSolutionContainer } from "./about-us-solution-container";
+export { AboutUsTeamContainer } from "./about-us-team-container";
+export { AboutUsMissionContainer } from "./about-us-mission-container";

Frontend/src/containers/layout-container.tsx

@@ -50,7 +50,7 @@ export const LayoutContainer = ({
     <ConfigProvider theme={antTheme}>
       {antStyleLoaded && (
         <Layout className="min-h-screen">
-          <Sider className="bg-primary" breakpoint="lg" collapsedWidth="0">
+          <Sider className="bg-primary" breakpoint="xl" collapsedWidth="0">
             <div className="flex justify-center p-2">
               <img
                 src="/images/logo-without-text.svg"

Frontend/src/data/about-us-data.tsx

@@ -0,0 +1,34 @@
+export const aboutUsData = {
+  overviewHeading: "Overview",
+  overviewParagraph:
+    "Developed by three Computer Science students at the University of Camerino—Nabil Mohammed, Leonardo Migliorelli, and Nicolò Rossini—our project addresses security challenges through an innovative camera security system. Leveraging Artificial Intelligence, our solution ensures the comprehensive protection of physical spaces. Continuous monitoring, scalability, and a user-friendly interface define its key features, making it adaptable for various environments. This collaborative effort aims to contribute to enhanced security measures, providing a reliable and efficient solution for residential, commercial, and public spaces. The development reflects our commitment to leveraging technology to address real-world issues, with future plans to further enhance the system's capabilities.",
+  overviewImage: "/images/overview.jpg",
+  solutionHeading: "Solution",
+  solutionParagraph:
+    "Experience the Future of Security: Elevate your standards with our cutting-edge solution, integrating advanced facial recognition, unauthorized person detection, access logging, and seamless remote accessibility. Our system is a paradigm shift, transcending traditional surveillance to create an intelligent security infrastructure tailored for the modern era. Don't settle for ordinary security; embrace innovation and ensure unparalleled protection for your spaces. It's not just about safeguarding today; it's about securing your tomorrow with precision, adaptability, and the peace of mind that comes from progressive security measures. Step into a realm where security is a dynamic force shaping the future—join us as we redefine standards and lead the way in comprehensive protection. Secure your tomorrow today with our visionary approach.",
+  solutionImage: "/images/solution.jpg",
+  missionHeading: "Mission",
+  missionParagraph:
+    "At CSS, our mission is to revolutionize security by providing cutting-edge solutions that transcend traditional surveillance. We are committed to empowering individuals and organizations with advanced technologies, including facial recognition, unauthorized person detection, access logging, and seamless remote accessibility. We believe in embracing innovation to create an intelligent security infrastructure tailored for the modern era. Our dedication extends beyond ordinary measures—we strive to ensure unparalleled protection for every space. By securing today with precision, adaptability, and peace of mind, we are not just enhancing security; we are pioneering the future of safeguarding the present. Join us on this mission as CSS redefines security standards and ushers in a new era of comprehensive protection.",
+  missionImage: "/images/mission.jpg",
+  teamHeading: "Team",
+  teamParagraph:
+    "We are a group of innovative, experienced, and proficient teams. You will love to collaborate with us.",
+  teamMembers: [
+    {
+      name: "Nabil Mohammed",
+      image: "/images/nabil.jpg",
+      title: "Frontend Engineer",
+    },
+    {
+      name: "Leonardo Migliorelli",
+      image: "/images/leonardo.jpg",
+      title: "Backend Engineer",
+    },
+    {
+      name: "Nicolò Rossini",
+      image: "/images/nabil.jpg",
+      title: "Machine Learning Engineer",
+    },
+  ],
+};

Frontend/src/data/index.ts

@@ -1,3 +1,7 @@
 export { loggedInNavBarItems, guestNavBarItems } from "./navbar-data";
-export { authorizedEntitiesData, authorizedEntitiesColumns } from "./authorized-entities-data";
-export {contactUsData} from "./contact-us-data"
+export {
+  authorizedEntitiesData,
+  authorizedEntitiesColumns,
+} from "./authorized-entities-data";
+export { contactUsData } from "./contact-us-data";
+export { aboutUsData } from "./about-us-data";