SUB-14: About Page

components/AboutPage/AboutCard.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+interface Props {
+  bodyText: string;
+  imgURL: string;
+  reverse?: boolean;
+  titleText: string;
+}
+
+export const AboutCard = ({
+  bodyText,
+  imgURL,
+  reverse = false,
+  titleText,
+}: Props) => {
+  if (!reverse) {
+    return (
+      <div className="flex w-full flex-col border">
+        <img
+          alt=""
+          className="aspect-video w-full object-cover"
+          src={imgURL}
+        ></img>
+        <div className="flex w-full flex-col justify-around gap-5 p-5 md:my-10 md:flex-row md:items-center">
+          <h2 className="md:w-1/5">{titleText}</h2>
+          <p className="md:w-3/5">{bodyText}</p>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="flex w-full flex-col border">
+        <div className="flex w-full flex-col justify-around gap-5 p-5 md:my-10 md:flex-row md:items-center">
+          <h2 className="md:w-1/5">{titleText}</h2>
+          <p className="md:w-3/5">{bodyText}</p>
+        </div>
+        <img
+          alt=""
+          className="aspect-video w-full object-cover"
+          src={imgURL}
+        ></img>
+      </div>
+    );
+  }
+};

components/AboutPage/AboutCardTall.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface Props {
+  bodyText: string;
+  imgURL: string;
+  reverse?: boolean;
+  titleText: string;
+}
+
+export const AboutCardTall = ({
+  bodyText,
+  imgURL,
+  reverse = false,
+  titleText,
+}: Props) => {
+  if (!reverse) {
+    return (
+      <div className="aspect-[1/2] w-full self-start border">
+        <img alt="" className="h-3/4 w-full object-cover" src={imgURL} />
+        <div className="flex w-full flex-col gap-5 p-5 md:px-12 md:py-10">
+          <h2>{titleText}</h2>
+          <p>{bodyText}</p>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="aspect-[1/2] w-full self-start border">
+        <div className="flex w-full flex-col gap-5 p-5 md:px-12 md:py-5">
+          <h2>{titleText}</h2>
+          <p>{bodyText}</p>
+        </div>
+        <img alt="" className="h-3/4 w-full object-cover" src={imgURL} />
+      </div>
+    );
+  }
+};

components/AboutPage/AboutCardWide.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+interface Props {
+  bodyText: string;
+  imgURL: string;
+  reverse?: boolean;
+  titleText: string;
+}
+
+export const AboutCardWide = ({
+  bodyText,
+  imgURL,
+  reverse = false,
+  titleText,
+}: Props) => {
+  if (!reverse) {
+    return (
+      <div className="flex aspect-auto h-fit w-full flex-col items-center overflow-hidden border md:h-[50svh] md:flex-row">
+        <img
+          alt=""
+          className="h-1/2 object-cover md:h-auto md:w-1/2"
+          src={imgURL}
+        />
+        <div className="h-1/2 w-full gap-10 p-5 md:h-auto md:w-1/2 md:p-20">
+          <h2 className="mb-5">{titleText}</h2>
+          <p>{bodyText}</p>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="flex aspect-auto h-1/2 w-full flex-col-reverse items-center overflow-hidden border md:h-[50svh] md:flex-row">
+        <div className="h-fit w-full gap-10 p-5 md:p-20">
+          <h2 className="mb-5">{titleText}</h2>
+          <p>{bodyText}</p>
+        </div>
+        <img
+          alt=""
+          className="h-1/2 object-cover md:h-auto md:w-1/2"
+          src={imgURL}
+        />
+      </div>
+    );
+  }
+};

pages/about.tsx

@@ -2,6 +2,10 @@ import type { NextPage } from "next";
 
 import Head from "next/head";
 
+import { AboutCard } from "components/AboutPage/AboutCard";
+import { AboutCardTall } from "components/AboutPage/AboutCardTall";
+import { AboutCardWide } from "components/AboutPage/AboutCardWide";
+
 const DepositTest: NextPage = () => {
   return (
     <div className="flex min-h-[75svh] w-full flex-col items-center px-4">
@@ -10,7 +14,94 @@ const DepositTest: NextPage = () => {
         <meta content="Deposit Testing" name="description" />
       </Head>
 
-      <h1>About</h1>
+      <h1 className="my-28 ml-5 self-start text-xl md:my-52 md:ml-20 md:text-4xl">
+        About Substratum
+      </h1>
+      <hr className="w-screen"></hr>
+      <div
+        className="flex w-full flex-col items-center justify-around gap-16 fade-in md:w-4/5 md:gap-28"
+        id="body"
+      >
+        <div className="mb-32 mt-20 aspect-[16/9] w-full bg-green-100 bg-[url('/projects/zancanGM.png')] bg-cover bg-center bg-no-repeat md:mb-0">
+          <div className="relative left-[5%] top-[65%] flex w-[90%] flex-col gap-5 border bg-background p-5 text-foreground lg:left-1/2 lg:w-[45%] lg:px-10 lg:py-12">
+            <h2 className="text-xl md:text-4xl">About Substratum</h2>
+            <p className="text-sm">
+              Welcome to Substratum, the premier NFT platform that brings
+              together artists, collectors, and investors from all around the
+              world.
+            </p>
+          </div>
+        </div>
+        <div className="flex w-full flex-col border">
+          <AboutCard
+            bodyText="At Substratum, we believe that art is not just a creation, but an
+              experience. Our platform is designed to provide a seamless and
+              enjoyable experience for anyone who loves art and wants to be a
+              part of the NFT revolution."
+            imgURL="projects/focus.png"
+            titleText="Art as an Experience"
+          />
+        </div>
+        <div className="w-full">
+          <AboutCardWide
+            bodyText="Our mission is to empower artists by providing a platform to
+              showcase their work and reach a wider audience. We believe that
+              every artist deserves to be recognized for their unique talent and
+              creativity, and we strive to make that a reality."
+            imgURL="projects/haiku.png"
+            titleText="Empowering Artists"
+          />
+        </div>
+        <div className="w-full">
+          <AboutCardWide
+            bodyText="Our mission is to empower artists by providing a platform to
+              showcase their work and reach a wider audience. We believe that
+              every artist deserves to be recognized for their unique talent and
+              creativity, and we strive to make that a reality."
+            imgURL="projects/enso.jpeg"
+            reverse={true}
+            titleText="The Future of Art Collecting"
+          />
+        </div>
+        <div className="flex h-fit w-full flex-col justify-around md:h-[140svh] md:flex-row md:gap-10 ">
+          <div className="w-full md:w-1/3">
+            <AboutCardTall
+              bodyText="Our mission is to empower artists by providing a platform to
+              showcase their work and reach a wider audience. We believe that
+              every artist deserves to be recognized for their unique talent and
+              creativity, and we strive to make that a reality."
+              imgURL="projects/chainlife.png"
+              titleText="innovation and technology"
+            />
+          </div>
+          <div className="mt-20 w-full self-end md:mt-0 md:w-1/3">
+            <AboutCardTall
+              bodyText="At Substratum, our values are at the core of everything we do.
+              We believe in promoting creativity, inclusivity, and
+              transparency. We strive to create a platform that is accessible
+              to everyone, regardless of their background or experience. Our
+              commitment to these values drives us to constantly improve and
+              innovate, so that we can provide the best possible experience
+              for our community."
+              imgURL="projects/defocused.png"
+              titleText="Our Values"
+            />
+          </div>
+        </div>
+        <div className="my-10 flex h-fit w-full flex-col justify-center text-center md:w-2/3">
+          <h2>Join The Substratum Community</h2>
+          <p>
+            Whether you're an artist, collector, or investor, we invite you to
+            join the Substratum community. By joining our platform, you'll have
+            access to a vibrant community of like-minded individuals who share
+            your passion for art and NFTs. You'll also have the opportunity to
+            showcase your work, discover new artists, and expand your
+            collection. We believe that the Substratum community is one of the
+            strongest and most supportive in the NFT world, and we're excited to
+            welcome you to it.
+          </p>
+        </div>
+      </div>
     </div>
   );
 };

styles/globals.css

@@ -152,3 +152,17 @@ p {
   font-family: "basic-sans", sans-serif;
   font-size: 1.25rem; /* 20px */
 }
+
+@media (max-width: 768px) {
+  h1 {
+    font-size: 1.375rem; /* 22px */
+  }
+
+  h2 {
+    font-size: 1.25rem; /* 38px */
+  }
+
+  p {
+    font-size: 1rem; /* 16px */
+  }
+}

tailwind.config.js

@@ -12,6 +12,7 @@ export default {
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "fade-in": "fade-in 10s ease-out",
       },
       borderRadius: {
         xs: "1px",
@@ -88,6 +89,10 @@ export default {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        "fade-in": {
+          "0%": { opacity: "0%" },
+          "100%": { opacity: "100%" },
+        },
       },
       screens: {
         sm: "500px",