Code dump

package.json

@@ -9,9 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@apollo/client": "^3.13.9",
+    "@apollo/experimental-nextjs-app-support": "^0.12.3",
+    "graphql": "^16.11.0",
     "next": "15.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
     "react-places-autocomplete": "^7.3.0"
   },
   "devDependencies": {

src/app/page.tsx

@@ -4,7 +4,34 @@ import InlineLink from "../components/InlineLink";
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 
-export default function Home() {
+import { getClient } from "@/lib/graphqlClient";
+import { gql } from "@apollo/client";
+
+const HOME_GET_DATA_QUERY = gql`
+  query {
+    homePage {
+      headline
+      section1Header
+      section1Body
+      section1Cta
+      section2Header
+      section2Body
+      section2Cta
+      section3Header
+      section3Body
+      section3Cta
+      section4Header
+      section4Body
+      section4Cta
+    }
+  }
+`;
+
+export default async function Home() {
+  const { data } = await getClient().query({
+    query: HOME_GET_DATA_QUERY,
+  });
+
   return (
     <>
         <Navbar collapseHeight={730} />
@@ -16,35 +43,38 @@ export default function Home() {
         />
         <div className="pt-4">
           <InfoCard
-            title="Members"
+            title={data.homePage.section1Header}
+            learnMoreUrl={data.homePage.section1Cta}
             imageUrl="/images/members-stock.jpg"
           >
-            Aenean et nulla nec dolor finibus dictum. Vestibulum ultrices aliquam sapien. Cras at nunc tincidunt, tristique metus nec, auctor ipsum. Mauris maximus justo sit amet lorem semper, ac accumsan turpis tempor. Proin id maximus libero. Fusce ac elementum risus. Suspendisse tincidunt rutrum eros eu facilisis. Nulla efficitur ac tortor ut elementum. Etiam sed elementum urna, a rhoncus lacus. Pellentesque vitae eros diam. Suspendisse sem purus, dictum id fringilla vel, malesuada sed odio. Nunc ut odio id purus tempus placerat quis vel ex. Maecenas tincidunt ante metus, eu interdum felis vehicula eu. Nulla pellentesque mi id velit vulputate tristique. Donec consectetur tempus interdum. Sed tellus lectus, ornare at sem vitae, tempor lobortis eros. Nam at eleifend eros, quis porta dolor. Aliquam mollis sapien vitae ex eleifend commodo. Integer vel pellentesque eros. Morbi tincidunt ipsum id dolor consectetur mollis ut vitae leo. Proin iaculis vel.
+            {data.homePage.section1Body}
           </InfoCard>
         </div>
         <div className='bg-atmosphere rounded-3xl'>
           <InfoCard
-            title="Employers"
+            title={data.homePage.section2Header}
+            learnMoreUrl={data.homePage.section2Cta}
             imageUrl='/images/employers-stock.jpg'
-            learnMoreUrl="https://github.com/orgs/Britton-Benefits/repositories"
             invert
           >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel elit pellentesque, pulvinar ipsum et, rutrum neque. Donec ullamcorper suscipit laoreet. Sed posuere placerat vestibulum. Nulla ornare tristique felis sit amet maximus. Aliquam convallis mi et turpis venenatis iaculis. Aliquam erat volutpat. Suspendisse felis elit, semper efficitur blandit ut, eleifend at est. Vestibulum vulputate volutpat mattis. Suspendisse bibendum, dolor in rutrum commodo, nulla augue feugiat nibh, vestibulum imperdiet turpis massa consequat risus. Fusce fringilla, libero nec efficitur eleifend, ligula elit commodo lacus, sed facilisis orci ligula quis felis. Praesent malesuada, velit consequat ultrices ultricies, elit sapien pretium sapien, at consectetur nunc nisi quis est. Ut interdum urna non ligula cursus ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut laoreet vehicula felis, in tincidunt ante porta et.
+            {data.homePage.section2Body}
           </InfoCard>
         </div>
         <InfoCard
-          title="Providers"
+          title={data.homePage.section3Header}
+          learnMoreUrl={data.homePage.section3Cta}
           imageUrl="/images/providers-stock.jpg"
         >
-          We offer a wide range of <InlineLink>online services</InlineLink> to help streamline and automate the benefit process for you and your employees. This means easier access to the benefit information you need and faster action on individual claims. By logging in to any of the services we provide, you can look up <InlineLink>in-network providers</InlineLink> through our list of PPOs, file insurance claims and review a claim's status, research which type of plan is best for you, and control your health care costs by selecting a PPO that's actively competing for your business.
+          {data.homePage.section3Body}
         </InfoCard>
         <div className='bg-platinum rounded-3xl'>
           <InfoCard
-            title="Brokers"
+            title={data.homePage.section4Header}
+            learnMoreUrl={data.homePage.section4Cta}
             imageUrl="/images/brokers-stock.jpg"
             invert
           >
-            At Britton Benefit Services, LLC we are leading the third-party benefits industry by working hard to make <InlineLink>employee benefits</InlineLink> more affordable for you and your employees. As a third-party administrator, we negotiate with leading PPOs and other organizations to help you find the best program for your employees without sacrificing the bottom line. This creates a major cost savings that you can pass on to your employees.
+            {data.homePage.section4Body}
           </InfoCard>
         </div>
         <Footer />

src/components/InfoCard.tsx

@@ -2,6 +2,9 @@ import Link from 'next/link';
 import { Schibsted_Grotesk } from 'next/font/google'
 import classnames from 'classnames';
 
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+
 
 const font = Schibsted_Grotesk({ subsets: ['latin'] })
 
@@ -10,7 +13,7 @@ interface InfoCardProps {
     imageUrl: string;
     learnMoreUrl?: string;
     invert?: boolean;
-    children: React.ReactNode;
+    children: string;
 }
 
 const InfoCard: React.FC<InfoCardProps> = (
@@ -80,7 +83,7 @@ const InfoCard: React.FC<InfoCardProps> = (
                                 "rounded-r-2xl rounded-out-lt-2xl" : invert,
                             }
                         )}>
-                            {children}
+                            <ReactMarkdown>{children}</ReactMarkdown>
                         </div>
                     </div>
                     <div className={classnames(

src/lib/graphqlClient.ts

@@ -0,0 +1,11 @@
+  import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
+  import { registerApolloClient } from "@apollo/client-integration-nextjs";
+
+  export const { getClient } = registerApolloClient(() => {
+    return new ApolloClient({
+      cache: new InMemoryCache(),
+      link: new HttpLink({
+        uri: "http://api:3000/graphql",
+      }),
+    });
+  });

tailwind.config.ts

@@ -1,20 +1,20 @@
-import fluid, { extract, screens, fontSize } from 'fluid-tailwind'
+// import fluid, { extract, screens, fontSize } from 'fluid-tailwind'
 
-module.exports = {
-  // Define content paths for Tailwind CSS to scan for classes
-  content: {
-    files: [
-            './src/components/**/*.{tsx}',
-            './src/app/**/*.{tsx}',
-        ],
-    extract, // Use the extract function from fluid-tailwind
-  },
-  theme: {
-    extend: {},
-    screens, // Integrate fluid-tailwind's screens for responsive breakpoints
-    fontSize, // Integrate fluid-tailwind's font sizes for fluid typography
-  },
-  plugins: [
-    fluid, // Include the fluid-tailwind plugin
-  ],
-};
+// module.exports = {
+//   // Define content paths for Tailwind CSS to scan for classes
+//   content: {
+//     files: [
+//             './src/components/**/*.{tsx}',
+//             './src/app/**/*.{tsx}',
+//         ],
+//     extract, // Use the extract function from fluid-tailwind
+//   },
+//   theme: {
+//     extend: {},
+//     screens, // Integrate fluid-tailwind's screens for responsive breakpoints
+//     fontSize, // Integrate fluid-tailwind's font sizes for fluid typography
+//   },
+//   plugins: [
+//     fluid, // Include the fluid-tailwind plugin
+//   ],
+// };