Reviewed Case Study (#8)

* Add mobile responsive Reviewed case study page --------- Co-authored-by: Sunjay Armstead <[email protected]>
sarmstead · Feb 6, 2024 · a3db858 · a3db858
1 parent ed42336
commit a3db858
Show file tree

Hide file tree

Showing 18 changed files with 398 additions and 35 deletions.
diff --git a/app/components/ContactSection/index.tsx b/app/components/ContactSection/index.tsx
@@ -0,0 +1,9 @@
+import ContactForm from "~components/ContactForm/ContactForm";
+
+const ContactSection = () => (
+  <section className="px-5 md:px-10 lg:px-0 pt-12 pb-24 lg:pt-16 max-w-innerContainer m-auto">
+    <ContactForm />
+  </section>
+);
+
+export default ContactSection;
diff --git a/app/components/PageHeader/index.stories.ts b/app/components/PageHeader/index.stories.ts
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import PageHeader from "~components/PageHeader";
+
+const meta = {
+  component: PageHeader,
+  argTypes: {
+    lightBackground: {
+      control: "text",
+      description: "Tailwind class for light mode",
+    },
+    darkBackground: {
+      control: "text",
+      description: "Tailwind class for dark mode",
+    },
+    title: {
+      control: "text",
+      description: "Title of header",
+    },
+    subtitle: {
+      control: "text",
+      description: "Subtitle of header",
+    },
+  },
+  args: {
+    lightBackground: "bg-black",
+    darkBackground: "dark:bg-prettyDark",
+    title: "A case study: Lorem Ipsum",
+    subtitle:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof PageHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
diff --git a/app/components/PageHeader/index.tsx b/app/components/PageHeader/index.tsx
@@ -0,0 +1,26 @@
+type HeaderProps = {
+  lightBackground?: string;
+  darkBackground?: string;
+  title: string;
+  subtitle: string;
+};
+
+const PageHeader = ({
+  lightBackground = "bg-black",
+  darkBackground = "dark:bg-prettyDark",
+  title,
+  subtitle,
+}: HeaderProps) => {
+  return (
+    <header
+      className={`${lightBackground} ${darkBackground} min-h-[350px] flex flex-col justify-center px-5 md:px-10 lg:px-0`}
+    >
+      <div className="w-full max-w-innerContainer mx-auto flex flex-col gap-4">
+        <h1 className="font-serif text-white text-4xl lg:text-5xl">{title}</h1>
+        <p className="text-base text-white w-full max-w-[589px]">{subtitle}</p>
+      </div>
+    </header>
+  );
+};
+
+export default PageHeader;
diff --git a/app/components/TopNav/TopNav.tsx b/app/components/TopNav/TopNav.tsx
@@ -67,7 +67,7 @@ const TopNav = () => {
   };
 
   return (
-    <header>
+    <header className="z-10">
       <nav className="relative">
         <section className="fixed top-0 lg:relative flex items-center justify-between w-full p-5 lg:max-w-[1280px] lg:m-auto bg-white dark:bg-black drop-shadow-md lg:drop-shadow-none">
           <Link href="/">

diff --git a/app/components/ViewLink/ViewLink.stories.ts b/app/components/ViewLink/ViewLink.stories.ts
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import ViewLink from "~components/ViewLink/ViewLink";
+
+const meta = {
+  component: ViewLink,
+  argTypes: {
+    href: {
+      control: "text",
+      description: "URL of the link",
+    },
+    target: {
+      control: "text",
+      description: "The browsing context of the link",
+    },
+    title: {
+      control: "text",
+      description: "Title of the link",
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ViewLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    href: "#",
+    target: "_blank",
+    title: "View Case Study",
+  },
+};
diff --git a/app/components/ViewLink/ViewLink.tsx b/app/components/ViewLink/ViewLink.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useAppSelector } from "~/store/hooks";
+import { colorSwitcher } from "~/utils";
+import { Icon } from "~icon/index";
+
+type ViewLinkProps = {
+  href: string;
+  title: string;
+  target?: "_self" | "_blank" | "_parent" | "_top";
+};
+
+const ViewLink = ({ href, target = "_blank", title }: ViewLinkProps) => {
+  const theme = useAppSelector((state) => state.theme.value);
+
+  return (
+    <a
+      href={href}
+      target={target}
+      className="text-blooper dark:text-purps uppercase tracking-wider font-bold flex items center gap-2 border-b border-transparent hover:border-b hover:border-blooper dark:hover:border-purps w-fit"
+    >
+      {title}
+      <Icon
+        name="arrowright"
+        fill={colorSwitcher(theme, "#7BA0FF", "#0B2ACC")}
+        className="w-6"
+      />
+    </a>
+  );
+};
+
+export default ViewLink;
diff --git a/app/home/About.tsx b/app/home/About.tsx
@@ -7,7 +7,7 @@ import circleHeadshot from "~assets/images/headshot--circle.png";
 export const About = () => (
   <section
     id="about"
-    className="px-5 py-12 grid gap-6 md:py-16 md:items-center md:grid-cols-[293px_1fr] max-w-[954px]"
+    className="px-5 md:px-10 lg:px-0 py-12 grid gap-6 md:py-16 md:items-center md:grid-cols-[293px_1fr] max-w-innerContainer"
   >
     <Image
       src={rectangleHeadshot}

diff --git a/app/home/Contact.tsx b/app/home/Contact.tsx
diff --git a/app/home/Work.tsx b/app/home/Work.tsx
@@ -1,14 +1,9 @@
 "use client";
 
 import { useAppSelector } from "~/store/hooks";
-import { Icon } from "~icon/index";
 import { Logo } from "~logo/index";
 import { colorSwitcher } from "~/utils";
-
-type CaseStudyProps = {
-  href: string;
-  theme: string;
-};
+import ViewLink from "~components/ViewLink/ViewLink";
 
 export const Work = () => {
   const theme = useAppSelector((state) => state.theme.value);
@@ -34,7 +29,7 @@ export const Work = () => {
             expanding list of email newsletters. Design and engineering to the
             rescue!
           </p>
-          <CaseStudyLink href="/work/reviewed" theme={theme} />
+          <ViewLink href="/work/reviewed" title="View Case Study" />
         </article>
         <article className="flex flex-col gap-3">
           <Logo
@@ -48,7 +43,7 @@ export const Work = () => {
             was making changes to its Webflow site, all of its blog meta
             descriptions disappeared! ChatGPT, meet Webflow.
           </p>
-          <CaseStudyLink href="/work/webflow" theme={theme} />
+          <ViewLink href="/work/webflow" title="View Case Study" />
         </article>
         <article className="flex flex-col gap-3">
           <Logo
@@ -62,24 +57,9 @@ export const Work = () => {
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
             aliquip ex ea commodo consequat.
           </p>
-          <CaseStudyLink href="/work/abate" theme={theme} />
+          <ViewLink href="/work/abate" title="View Case Study" />
         </article>
       </div>
     </section>
   );
 };
-
-const CaseStudyLink = ({ href, theme }: CaseStudyProps) => (
-  <a
-    href={href}
-    target="_blank"
-    className="text-blooper dark:text-purps uppercase tracking-wider font-bold flex items center gap-2 border-b border-transparent hover:border-b hover:border-blooper dark:hover:border-purps w-fit"
-  >
-    View Case Study
-    <Icon
-      name="arrowright"
-      fill={colorSwitcher(theme, "#7BA0FF", "#0B2ACC")}
-      className="w-6"
-    />
-  </a>
-);
diff --git a/app/page.tsx b/app/page.tsx
@@ -3,7 +3,7 @@ import { Metadata } from "next";
 import { Hero } from "~/home/Hero";
 import { About } from "~/home/About";
 import { Work } from "~/home/Work";
-import { Contact } from "~/home/Contact";
+import ContactSection from "~components/ContactSection";
 
 export const metadata: Metadata = {
   title: "Sunjay Armstead | Home",
@@ -17,7 +17,7 @@ export default function Home() {
       <Hero />
       <About />
       <Work />
-      <Contact />
+      <ContactSection />
     </div>
   );
 }
diff --git a/app/work/layout.tsx b/app/work/layout.tsx
@@ -0,0 +1,15 @@
+import "~/globals.css";
+import ContactSection from "~components/ContactSection";
+
+export default function WorkLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mx-auto">
+      {children}
+      <ContactSection />
+    </section>
+  );
+}
diff --git a/app/work/reviewed/Arrow.tsx b/app/work/reviewed/Arrow.tsx
@@ -0,0 +1,20 @@
+type ArrowProps = {
+  fill: string;
+};
+
+const Arrow = ({ fill }: ArrowProps) => (
+  <svg
+    width="15"
+    height="29"
+    viewBox="0 0 15 29"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.79289 28.7071C7.18342 29.0976 7.81658 29.0976 8.20711 28.7071L14.5711 22.3431C14.9616 21.9526 14.9616 21.3195 14.5711 20.9289C14.1805 20.5384 13.5474 20.5384 13.1569 20.9289L7.5 26.5858L1.84314 20.9289C1.45262 20.5384 0.819456 20.5384 0.428931 20.9289C0.038407 21.3195 0.0384069 21.9526 0.428931 22.3431L6.79289 28.7071ZM6.5 -4.37114e-08L6.5 28L8.5 28L8.5 4.37114e-08L6.5 -4.37114e-08Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Arrow;
diff --git a/app/work/reviewed/Figure.tsx b/app/work/reviewed/Figure.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import Stem from "~/work/reviewed/Stem";
+import Arrow from "~/work/reviewed/Arrow";
+import { useAppSelector } from "~/store/hooks";
+import { colorSwitcher } from "~/utils";
+
+const Figure = () => {
+  const theme = useAppSelector((state) => state.theme.value);
+  return (
+    <figure className="mx-auto max-w-innerContainer pb-16 px-5 md:px-10 lg:px-0">
+      <figcaption className="uppercase tracking-wider mb-4 text-black dark:text-white">
+        <strong>Figure 1 -</strong>&nbsp;Data Flow Diagram
+      </figcaption>
+      <div className="w-40 border-t-black dark:border-t-white border mb-10"></div>
+      <section className="flex flex-col justify-center lg:flex-row">
+        <div className="flex flex-col lg:flex-row items-center gap-2 lg:mr-4">
+          <div className="flex flex-col items-center gap-2">
+            <p className="uppercase tracking-wider text-center text-black dark:text-white">
+              Content CMS
+              <br />
+              (Reviewed Team)
+            </p>
+            <div className="w-24 h-20 bg-figureGray dark:bg-almostDark"></div>
+          </div>
+          <div className="flex flex-col lg:flex-row items-center gap-2 mb-2 lg:mb-0 lg:mt-14 lg:-ml-7">
+            <div className="lg:rotate-90 lg:w-7 lg:flex lg:justify-center">
+              <Stem stroke={colorSwitcher(theme, "white", "black")} />
+            </div>
+            <p className="uppercase tracking-wider text-center lg:w-max text-black dark:text-white">
+              Form Data
+            </p>
+            <div className="lg:-rotate-90">
+              <Arrow fill={colorSwitcher(theme, "white", "black")} />
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col lg:flex-row items-center gap-2">
+          <div className="flex flex-col items-center gap-2">
+            <p className="uppercase tracking-wider text-center text-black dark:text-white">
+              Front End
+              <br />
+              (User-Facing)
+            </p>
+            <div className="w-[358px] max-w-full h-72 bg-figureGray dark:bg-almostDark flex items-center justify-center">
+              <div className="bg-white dark:bg-figureGray w-[272px] max-w-full h-[212px] flex items-center justify-center">
+                <p className="uppercase tracking-wider text-center">
+                  Newsletter
+                  <br />
+                  (Signup Form)
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col lg:flex-row items-center gap-2 lg:mt-14 lg:-mr-3">
+            <div className="lg:rotate-90 lg:w-7 lg:flex lg:justify-center">
+              <Stem stroke={colorSwitcher(theme, "white", "black")} />
+            </div>
+            <p className="uppercase tracking-wider text-center lg:w-max text-black dark:text-white">
+              User Data
+            </p>
+            <div className="lg:-rotate-90 lg:w-7 lg:flex lg:justify-center">
+              <Arrow fill={colorSwitcher(theme, "white", "black")} />
+            </div>
+          </div>
+          <div className="flex flex-col items-center gap-2 lg:min-h-[136px] lg:justify-end">
+            <p className="uppercase tracking-wider text-center text-black dark:text-white">
+              Email Service
+            </p>
+            <div className="w-24 h-20 bg-figureGray dark:bg-almostDark"></div>
+          </div>
+        </div>
+      </section>
+    </figure>
+  );
+};
+
+export default Figure;
diff --git a/app/work/reviewed/Stem.tsx b/app/work/reviewed/Stem.tsx
@@ -0,0 +1,17 @@
+type StemProps = {
+  stroke: string;
+};
+
+const Stem = ({ stroke }: StemProps) => (
+  <svg
+    width="3"
+    height="28"
+    viewBox="0 0 3 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M1.5 0L1.5 28" stroke={stroke} strokeWidth="2" />
+  </svg>
+);
+
+export default Stem;