Created About Us Page

components/aboutus/ad-section/index.tsx

@@ -0,0 +1,18 @@
+import Image from "next/image";
+
+const AdSec = () => {
+  return (
+    <div className="flex justify-center items-center p-10 gap-28">
+      <div className="w-full md:w-2/5 font-lato text-5xl font-normal tracking-normal leading-tight">
+        <p>All of our work and vision is defined by phrase</p>
+        <span className="text-[#1EEBBA] font-bold">{`"Being Productive"`}</span>
+      </div>
+      <div className="w-96 h-96 hidden md:block">
+        {/* <Image src="./Workflow.svg" alt="altImg" fill={true} /> */}
+        <img src="/Workflow.svg" alt="laptop" />
+      </div>
+    </div>
+  );
+};
+
+export default AdSec;

components/aboutus/our-community/index.tsx

@@ -0,0 +1,53 @@
+import Image from "next/image";
+
+const OurCommunity = () => {
+  return (
+    <div className="flex flex-col p-10 min-h-screen items-center gap-10">
+      <div className="flex absolute justify-between w-[100vw] h-[100vh] overflow-hidden">
+        <Image
+          src="/AboutUsDesignEcllipseFull.svg"
+          alt="aboutus"
+          height={800}
+          width={800}
+          className="absolute -right-[10%] "
+        />
+        <Image
+          src="/AboutUsDesignGradientFull.svg"
+          alt="aboutus"
+          height={800}
+          width={800}
+          className="absolute -right-[10%]  "
+        />
+      </div>
+      <div>
+        <h1 className="font-medium text-5xl tracking-normal font-lato">
+          Our <span className="text-[#6B4CFF]">Community</span>
+        </h1>
+      </div>
+      <div className="flex flex-col justify-center items-center gap-20 w-[90%] pt-10">
+        <div className="max-w-4xl">
+          <p className="font-lato font-normal text-3xl text-justify">
+            Vibinex is a community of tech enthusiasts. There are three main
+            participants in the community:
+          </p>
+        </div>
+        <div className="flex flex-col justify-center items-center w-full md:w-[90%]">
+          <ul className="flex flex-col gap-6 max-w-full md:max-w-4xl font-lato font-normal text-3xl text-justify">
+            <li>
+              Senior software architects and engineers, engineering managers and
+              CTOs.
+            </li>
+            <li>
+              <b>Co-reviewers club:</b> Independent hackers and hobby developers
+              (especially of open-source projects) who like to receive inputs
+              and feedback from others on their code.
+            </li>
+            <li>Contributors to the Vibinex project.</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OurCommunity;

components/aboutus/our-investors/index.tsx

@@ -0,0 +1,53 @@
+import Image from "next/image";
+import { Investors } from "../../../utils/about";
+
+const OurInvestors = () => {
+  return (
+    <div className="flex flex-col p-10 min-h-screen items-center gap-10">
+      <div className="flex absolute justify-between w-[100vw] h-[100vh] overflow-hidden">
+        <Image
+          src="/AboutUsDesignGradientFull.svg"
+          alt="aboutus"
+          height={800}
+          width={800}
+          className="absolute  -left-[20%]"
+        />
+
+        <Image
+          src="/AboutUsDesignStarBig.svg"
+          alt="aboutus"
+          height={600}
+          width={600}
+          className="absolute -right-[5%] "
+        />
+      </div>
+      <div>
+        <h1 className="font-medium text-5xl tracking-normal font-lato">
+          Our <span className="text-[#6B4CFF]">Investors</span>
+        </h1>
+      </div>
+      <div className="flex flex-col justify-center items-center gap-20 w-[90%]">
+        <div className="max-w-4xl">
+          <p className="font-lato font-normal text-3xl text-center">
+            We are backed by a group of visionary investors who believe in our
+            mission and support our growth and innovation in the field of code
+            review automation.
+          </p>
+        </div>
+        <div className="flex flex-wrap justify-evenly gap-44 p-5">
+          {Investors.map((member) => (
+            <div key={member.id} className="flex relative h-48 w-52">
+              <Image
+                src={member.img}
+                alt={`investor ${member.id}`}
+                fill={true}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OurInvestors;

components/aboutus/our-principles/index.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+import { Principles } from "../../../utils/about";
+
+const OurPrinciples = () => {
+  return (
+    <div className="flex flex-col items-center p-10 min-h-screen">
+      <div>
+        <h1 className="font-medium text-5xl tracking-normal font-lato">
+          Our <span className="text-[#6B4CFF]">Core Principles</span>
+        </h1>
+      </div>
+      <div className="w-5xl flex flex-wrap justify-center gap-14 items-center pt-0  md:pt-28">
+        {Principles.map((item) => (
+          <div
+            key={item.title}
+            className="flex flex-col justify-between items-center h-[500px] w-96 p-5"
+          >
+            <div className="glow-effect h-72 w-72 md:h-96 md:w-96">
+              <Image src={item.img} alt={item.title} fill={true} />
+            </div>
+            <div className="flex flex-col gap-4 justify-center items-center">
+              <div className="font-semibold text-3xl text-[#1EEBBA] font-lato glow">
+                {item.title}
+              </div>
+              <div className="text-xl text-justify font-lato">{item.body}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default OurPrinciples;

components/aboutus/our-team/FlipCard.module.css

@@ -0,0 +1,11 @@
+.perspective {
+  perspective: 1000px;
+}
+
+.backfacehidden {
+  backface-visibility: hidden;
+}
+
+.rotate180 {
+  transform: rotateY(180deg);
+}

components/aboutus/our-team/FlipCard.tsx

@@ -0,0 +1,66 @@
+import { BsLinkedin } from "react-icons/bs";
+import { BiEnvelope } from "react-icons/bi";
+import { BsGithub } from "react-icons/bs";
+import Image from "next/image";
+
+interface Member {
+  image: string;
+  name: string;
+  role: string;
+  github: string;
+  linkedIn: string;
+  mailId: string;
+}
+
+const FlipCard = ({ member }: { member: Member }) => {
+  return (
+    <div
+      className={`flex flex-col md:flex-row justify-start bg-gradient-to-r from-[#3f4041] to-[#253d4d] rounded-lg p-2.5 shadow-lg w-[25rem] h-[12rem] text-white font-lato`}
+    >
+      <div className="flex flex-col justify-between px-[1.2rem] py-[1rem] w-56">
+        <div className="flex-2">
+          <h3 className="text-[1.7rem] font-semibold m-0">{member.name}</h3>
+          <p className="text-[1rem] font-normal m-0  text-[#1EEBBA]">
+            {member.role}
+          </p>
+        </div>
+        <div className="flex gap-4 mt-4">
+          <a
+            href={member.linkedIn}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-6 h-6 hover:opacity-45"
+          >
+            <BsLinkedin size={20} />
+          </a>
+          <a
+            href={member.mailId}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-6 h-6 hover:opacity-45"
+          >
+            <BiEnvelope size={20} />
+          </a>
+          <a
+            href={member.github}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-6 h-6 hover:opacity-45"
+          >
+            <BsGithub size={20} />
+          </a>
+        </div>
+      </div>
+      <div className="absolute md:relative w-[11rem] h-[12.3rem] md:w-[16rem] md:h-[17.6rem] ml-32 md:ml-0 -mt-[0.45rem] -mr-4 md:-mr-[12rem] md:-mt-[5.5rem]">
+        <Image
+          src={member.image}
+          alt={member.name}
+          fill
+          className="rounded-full ml-4"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FlipCard;

components/aboutus/our-team/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import FlipCard from "./FlipCard";
+import { teamMembers } from "../../../utils/about";
+import Image from "next/image";
+
+const OurTeam = () => {
+  return (
+    <div className="flex flex-col items-center min-h-screen pt-20 p-10">
+      <div className="flex absolute justify-between w-[100vw] h-[100vh] overflow-hidden">
+        <Image
+          src="/AboutUsDesignEcllipseHalf.svg"
+          alt="aboutus"
+          height={500}
+          width={500}
+          className="absolute left-0 -top-[5%]"
+        />
+        <Image
+          src="/AboutUsDesignGradient.svg"
+          alt="aboutus"
+          height={500}
+          width={500}
+          className="absolute -right-[10%] -top-[5%]"
+        />
+      </div>
+      <div>
+        <h1 className="font-medium text-5xl tracking-normal font-lato">
+          Our <span className="text-[#6B4CFF]">Team</span>
+        </h1>
+      </div>
+      <div className="font-lato font-normal text-3xl text-center mt-10">
+        We are a team of passionate individuals who are working towards a common
+        goal.
+      </div>
+      <div className="w-full flex flex-wrap justify-center gap-20 md:gap-48 items-center p-5 mt-24">
+        {teamMembers.map((member) => (
+          <FlipCard key={member.name} member={member} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default OurTeam;

components/aboutus/product-vision/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Image from "next/image";
+
+const ProductVision = () => {
+  return (
+    <div className="flex flex-col items-center p-10 min-h-screen gap-6">
+      <div className="flex absolute justify-between w-[100vw] h-[100vh] overflow-hidden -left-[10%]">
+        <Image
+          src="/AboutUsDesignCircles.svg"
+          alt="aboutus"
+          fill={true}
+          className="absolute -top-[20%] "
+        />
+      </div>
+      <div>
+        <h1 className="font-medium text-5xl tracking-normal font-lato">
+          Product <span className="text-[#6B4CFF]">Vision</span>
+        </h1>
+      </div>
+      <p className="font-lato text-center text-2xl w-full md:w-[40%] px-10">
+        To revolutionize the way software is being built to reduce the cost of
+        innovation.
+      </p>
+    </div>
+  );
+};
+
+export default ProductVision;

components/aboutus/purpose/index.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import Image from "next/image";
+
+const PurposeOfCompany = () => {
+  return (
+    <div className="flex flex-col items-center justify-start md:justify-center min-h-screen gap-6">
+      <div className="flex absolute justify-between w-[100vw] h-[100vh] overflow-hidden">
+        <Image
+          src="/AboutUsDesignGradientFull.svg"
+          alt="aboutus"
+          height={800}
+          width={800}
+          className="absolute -top-[20%] -left-[10%]"
+        />
+
+        <Image
+          src="/AboutUsDesignEcllipseFull.svg"
+          alt="aboutus"
+          height={800}
+          width={800}
+          className="absolute -right-[10%] "
+        />
+        <Image
+          src="/AboutUsDesignGradientFull.svg"
+          alt="aboutus"
+          height={800}
+          width={800}
+          className="absolute -right-[10%]  "
+        />
+        <Image
+          src="/AboutUsDesignStars.svg"
+          alt="aboutus"
+          height={75}
+          width={75}
+          className="absolute left-[15%] bottom-[15%] md:bottom-[25%]"
+        />
+      </div>
+      <div className="pt-28 md:pt-0">
+        <h1 className="font-medium p-10 md:p-0 text-7xl tracking-normal font-lato">
+          Purpose of <span className="text-[#6B4CFF]">the Company</span>
+        </h1>
+      </div>
+      <p className="font-lato text-center text-2xl w-[90%] md:w-[40%] px-10">
+        To revolutionize the way software is being built to reduce the cost of
+        innovation.
+      </p>
+    </div>
+  );
+};
+
+export default PurposeOfCompany;

next.config.js

@@ -42,7 +42,12 @@ const nextConfig = {
 				protocol: 'https',
 				hostname: 'github.com', // GitHub README images
 				pathname: '/Alokit-Innovations/.github/assets/**'
-			}
+			},
+			{
+				protocol: 'https',
+				hostname: 'via.placeholder.com', // Placeholder images
+				pathname: '/**',
+			},
 		],
 	},
 	webpack: (config, { isServer }) => {