Home & Style

app/layout.tsx

@@ -4,7 +4,7 @@ import "styles/global.css"
 
 import Footer from "components/Footer"
 import Nav from "components/Nav"
-import { WipTag } from "components/WipTag"
+// import { WipTag } from "components/WipTag"
 
 // import Transitions, { Animate } from "components/Transition"
 // import DomEvents from "components/Transition/DomEvents"
@@ -37,7 +37,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         {/* <Animate className="flex-1"> */}
         {children}
         {/* </Animate> */}
-        <WipTag />
+        {/* <WipTag /> */}
         {/* </Transitions> */}
         <Footer />
       </body>

components/Footer/Renderer.tsx

@@ -6,7 +6,7 @@ export const FooterRenderer: React.FC<FooterProps> = ({ nav, content }) => {
   const column1 = content.data.page.sections.find((section: any) => section.title === "column1")
   const column2 = content.data.page.sections.find((section: any) => section.title === "column2")
   return (
-    <footer className="prose max-w-none bg-theme-navy-500 text-white">
+    <footer className="prose -mb-5 max-w-none bg-theme-navy-500 text-white">
       {/* three columns 40 / 40 / 20 */}
       {/* one col on mobile */}
       <div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-6">

components/Nav/Renderer.tsx

@@ -30,7 +30,9 @@ export const DesktopNavStatic: React.FC<NavProps> = ({ navInfo }) => {
           } else {
             return (
               <li className="mr-4" key={li}>
-                <a href={link.path}>{link.title}</a>
+                <a href={link.path} className="transition-colors hover:text-primary-500">
+                  {link.title}
+                </a>
               </li>
             )
           }

components/Nav/SubNavList.tsx

@@ -23,7 +23,7 @@ export const SubNavList: React.FC<{ title: string; subLinks: Array<LinkSpec> }>
             return (
               <DropdownMenu.Item
                 key={li}
-                className="group relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] text-[13px] leading-none outline-none"
+                className="group relative flex h-[2rem] select-none items-center rounded-[3px] px-[5px] leading-none outline-none transition-colors hover:text-primary-500"
               >
                 <a href={link.path} className="flex items-center">
                   {link.title}

components/Pages/Home/Renderer.tsx

@@ -97,16 +97,18 @@ export const Renderer: React.FC<HomeProps> = ({ pageInfo }) => {
           ))}
         </div>
       </div>
-      <article className="prose flex max-w-none flex-col p-4">
+      <article className="prose flex max-w-none flex-col p-4" id="home-case-studies">
         {caseStudies.map((caseStudy: any, i: number) => (
           <div
             key={i}
-            className="align-center prose flex min-h-[75vh] w-full min-w-full items-center border-b-2 lg:flex-row"
+            className={`align-center prose flex min-h-[75vh] w-full min-w-full items-center justify-center gap-8 px-12 lg:flex-row
+                ${i % 2 === 1 ? "bg-theme-canvas-100/25" : ""}
+              `}
           >
-            <div className="max-w-[40%]">
+            <div className={`max-w-[40%]`}>
               <TinaMarkdown content={i % 2 === 0 ? caseStudy.Image : caseStudy.Text} />
             </div>
-            <div className="max-w-[40%]">
+            <div className={`max-w-[40%]`}>
               <TinaMarkdown content={i % 2 === 0 ? caseStudy.Text : caseStudy.Image} />
             </div>
           </div>

content/page/home.mdx

@@ -60,12 +60,24 @@ sections:
     body: |
       ![](</uploads/Farmers Market Drone Shot.jpg>)
   - title: Case Study - 1 - Text
-    body: |
-      Case study coming soon...
+    body: >
+      #### CASE STUDY
+
+
+      ### Understanding the grocery landscape across different states and places
+      in the US
+
+
+      [Read More](/post/landscape)
   - title: Case Study - 2 - Text
     body: |
-      asdf
+      #### CASE STUDY
+
+      ### Where, and who, does poor food access impact the most?
+
+      [Read More](/posts/where-and-who)
   - title: Case Study - 2 - Image
     body: |
       ![](</uploads/Person Holding Orange Fruits.jpg>)
 ---
+

styles/global.css

@@ -1,3 +1,17 @@
 footer img {
   max-width: 50%;
+}
+#home-case-studies img {
+  /* shaodw */
+  box-shadow: 0.5rem 0.5rem 10px 0 rgba(0, 0, 0, 0.15);
+}
+
+#home-case-studies h4 {
+  @apply text-theme-navy-500 text-xl
+}
+#home-case-studies h3 {
+  @apply text-theme-navy-500 text-3xl
+}
+#home-case-studies a {
+  @apply bg-theme-canvas-100 rounded-xl px-2 py-1 no-underline hover:text-primary-500 transition-colors
 }

tailwind.config.js

@@ -26,6 +26,7 @@ module.exports = {
         ...violet,
         theme: {
           navy: {
+            300: "#0a192f",
             500: "#00152c",
           },
           canvas: {