SWSWEB-37 | test three column and background image wrapper

Author: rebeccahongsf

app/globals.css

@@ -22,6 +22,9 @@
 @utility grid-cols-2-1 {
   grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
 }
+@utility grid-cols-2-3 {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+}
 @utility grid-cols-3-1 {
   grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
 }

app/page.tsx

@@ -1,9 +1,11 @@
-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";
+import ActionLink from '@components/elements/action-link';
+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 ThreeColumn from '@components/paragraphs/rows/three-column';
+import TwoColumn from '@components/paragraphs/rows/two-column';
+import Image from 'next/image';
 
 export default function Home() {
   return (
@@ -21,7 +23,7 @@ export default function Home() {
         bgColor="bg-black"
       >
         <TwoColumn
-          column_widths="33-67"
+          column_widths="40-60"
           left={
             <div className="text-white">
               <Text variant="card" className="rs-mb-8">
@@ -48,6 +50,48 @@ export default function Home() {
             </div>
           }
         />
+        <div className="mx-auto w-fit">
+          <ActionLink
+            href="/"
+            className="transition-all ease-in-out duration-500 underline underline-offset-2 decoration-2 text-white decoration-digital-red-light hocus:text-black hocus:bg-white/80 hocus:decoration-black"
+          >
+            Learn more about our work
+          </ActionLink>
+        </div>
+      </BgImageWrapper>
+      <BgImageWrapper bgColor="bg-sandstone-light">
+        <div className="w-full cc xl:mx-0 xl:p-0 xl:max-w-[1000px]">
+          <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>
+        <ThreeColumn
+          left={
+            <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>
+          }
+          main={
+            <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>
+          }
+          right={
+            <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>
+          }
+        />
       </BgImageWrapper>
     </GlobalPage>
   );

src/components/elements/action-link.tsx

@@ -1,21 +1,28 @@
-import {ChevronRightIcon} from "@heroicons/react/20/solid";
-import {HtmlHTMLAttributes} from "react";
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
+import { HtmlHTMLAttributes } from "react";
 import twMerge from "@lib/utils/twMerge";
 import Link from "next/link";
-import {getLinkHref} from "@components/elements/link";
+import { getLinkHref } from "@components/elements/link";
 
 type Props = HtmlHTMLAttributes<HTMLAnchorElement> & {
   /**
    * Link url.
    */
-  href: string
-}
+  href: string;
+};
 
-const ActionLink = ({href, children, ...props}: Props) => {
+const ActionLink = ({ href, children, ...props }: Props) => {
   return (
-    <Link {...props} href={getLinkHref(href)} className={twMerge("group relative pr-[25px]", props.className)}>
+    <Link
+      {...props}
+      href={getLinkHref(href)}
+      className={twMerge("group relative", props.className)}
+    >
       {children}
-      <ChevronRightIcon height={25} className="ml-2 inline-block transition-all group-hocus-visible:translate-x-1" />
+      <ChevronRightIcon
+        height={25}
+        className="ml-2 inline-block transition-all group-hocus-visible:translate-x-1"
+      />
     </Link>
   );
 };

src/components/paragraphs/rows/three-column.tsx

@@ -26,7 +26,7 @@ const ThreeColumn = ({
   return (
     <div
       className={twMerge(
-        clsx("mb-32", {
+        clsx("mb-32 @container", {
           "px-5 pb-20 pt-20": !!bg_color,
           "pt-0": top_padding === "none",
           "pt-40": top_padding === "more",
@@ -43,7 +43,7 @@ const ThreeColumn = ({
       )}
       data-columns="3"
     >
-      <div className="centered grid gap-10 @4xl:grid-cols-2 @6xl:gap-20 @9xl:grid-cols-3">
+      <div className="centered grid gap-10 @4xl:grid-cols-2 @6xl:gap-38 @6xl:grid-cols-3">
         <OneColumn
           top_padding="none"
           bottom_margin="none"

src/components/paragraphs/rows/two-column.tsx

@@ -4,7 +4,7 @@ import {clsx} from "clsx";
 import {ReactNode} from "react";
 
 export interface TwoColumnProps extends LayoutProps {
-  column_widths?: "33-67" | "67-33"
+  column_widths?: "33-67" | "67-33" | "40-60"
   vertical_dividers?: boolean
 }
 
@@ -46,9 +46,10 @@ const TwoColumn = ({
     >
       <div
         className={twMerge(
-          "centered grid gap-10 @6xl:gap-20",
+          "centered grid gap-10 @6xl:gap-38",
           clsx({
             "@6xl:grid-cols-2": !column_widths,
+            "@6xl:grid-cols-2-3": column_widths === "40-60",
             "@6xl:grid-cols-1-2": column_widths === "33-67",
             "@6xl:grid-cols-2-1": column_widths === "67-33",
           }),