SWSWEB-37 | add background image section and test images

Author: rebeccahongsf

.yarn/releases/yarn-stable-temp.cjs

@@ -0,0 +1 @@
+nodeLinker: node-modules

.yarnrc.yml

@@ -1,9 +1,38 @@
+import { H1, H2 } from "@components/elements/headers";
+import { Text } from "@components/elements/text";
 import GlobalPage from "@components/layouts/global-page";
+import { BgImageWrapper } from "@components/paragraphs/bg-image-section";
+import TwoColumn from "@components/paragraphs/rows/two-column";
+import Image from "next/image";
 
 export default function Home() {
   return (
     <GlobalPage>
-      
+      <H1 className="sr-only">Stanford Web Services Home</H1>
+      <div className="w-full cc xl:p-0 xl:mx-auto xl:max-w-[1000px] rs-mt-6 rs-mb-7">
+        <Text size={4} font="serif">Vestibulum massa nibh, fermentum ut orci iaculis, placerat viverra augue. In mauris sapien, vulputate non eros ac, malesuada.</Text>
+      </div>
+      <BgImageWrapper src="/images/stanford_dish.jpg" hasBgImage bgColor="bg-black">
+        <TwoColumn column_widths="33-67" left={(
+          <div className="text-white">
+            <Text variant="card" className="rs-mb-8">Lasting Partnerships</Text>
+            <H2 className="font-serif font-normal type-3">Momentum</H2>
+            <Text>
+              Mauris vel nunc rutrum, semper neque a, venenatis metus. Nulla egestas, enim ut blandit pulvinar, lorem tellus pulvinar ex, a eleifend ante arcu et nulla. Fusce et cursus libero. Nullam vitae lacus quis augue semper luctus nec non ex. 
+            </Text>
+          </div>)} right={(
+            <div>
+              <Image
+                className="object-cover"
+                src="/images/stanford_momentum.png"
+                alt="Screenshot of the Stanford Momentum website" 
+                height={738}
+                width={768}
+              />
+            </div>
+          )}
+        />
+      </BgImageWrapper>
     </GlobalPage>
   );
 }

app/page.tsx

@@ -0,0 +1,53 @@
+import { HTMLAttributes } from "react";
+import Image from "next/image";
+import { clsx } from "clsx";
+
+type BgImageWrapperProps = HTMLAttributes<HTMLDivElement> & {
+  bgColor?: string;
+  hasBgImage?: boolean;
+  src?: string;
+  alt?: string;
+};
+
+export const BgImageWrapper = ({
+  className,
+  children,
+  bgColor,
+  hasBgImage = false,
+  src,
+  alt,
+  ...props
+}: BgImageWrapperProps) => {
+  return (
+    <div
+      {...props}
+      className={clsx("relative rs-mb-5 w-full", bgColor, className)}
+    >
+      <div className="cc rs-pb-7 rs-pt-6">
+        {hasBgImage && src && (
+          <div className="size-full absolute top-0 left-0 z-0">
+            <Image
+              className="ed11y-ignore object-cover z-0"
+              src={src}
+              alt={alt || ""}
+              loading={"lazy"}
+              fill
+              sizes="100vw"
+            />
+            <div
+              className={clsx(
+                "absolute size-full opacity-80 z-10 backdrop-blur-sm",
+                bgColor,
+              )}
+            />
+          </div>
+        )}
+        <div
+          className="relative z-50 w-full"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

public/images/stanford_dish.jpg

@@ -26,7 +26,7 @@ const TwoColumn = ({
   return (
     <div
       className={twMerge(
-        "mb-32",
+        "mb-32 @container",
         clsx({
           gutters: !bg_color,
           "px-5 pb-20 pt-20": !!bg_color,
@@ -46,8 +46,9 @@ const TwoColumn = ({
     >
       <div
         className={twMerge(
-          "centered grid gap-10 @6xl:grid-cols-2 @6xl:gap-20",
+          "centered grid gap-10 @6xl:gap-20",
           clsx({
+            "@6xl:grid-cols-2": !column_widths,
             "@6xl:grid-cols-1-2": column_widths === "33-67",
             "@6xl:grid-cols-2-1": column_widths === "67-33",
           }),