feat: center justify contribute section

infinyon · Jul 23, 2024 · 3a8eb3f · 3a8eb3f
1 parent fa38263
commit 3a8eb3f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/src/components/Landing/components/Contribute/ContributeCard.tsx b/src/components/Landing/components/Contribute/ContributeCard.tsx
@@ -8,12 +8,12 @@ export function ContributeCard(props: {
   ctaUrl: string;
 }): JSX.Element {
   return (
-    <article className="relative pl-16">
-      <dt className="text-base font-semibold leading-7 text-gray-900">
-        <div className="text-white p-2 absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-zinc-600">
+    <article className="px-4 flex justify-center items-center">
+      <dt className="grid grid-cols-[100px,auto] w-full md:w-[280px]">
+        <figure className="mx-auto m-0 col-start-1 col-end-1 text-white p-2 flex h-10 w-10 items-center justify-center rounded-lg bg-zinc-600">
           {props.icon}
-        </div>
-        <a className="text-gray-900 dark:text-gray-100" href={props.ctaUrl}>
+        </figure>
+        <a className="flex items-center col-start-2 col-end-2 text-gray-900 dark:text-gray-100" href={props.ctaUrl}>
           {props.title}
         </a>
       </dt>

diff --git a/src/components/Landing/components/Contribute/index.tsx b/src/components/Landing/components/Contribute/index.tsx
@@ -6,8 +6,9 @@ import Question from "./icons/Question";
 
 export function Contribute(): JSX.Element {
   return (
-    <section className="py-16 mx-auto w-8/12">
-      <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
+    <section className="py-10 max-w-[800px] mx-auto">
+      <h2 className="py-8 text-center">Contribute</h2>
+      <dl className="grid grid-cols-1 gap-x-8 gap-y-10 md:max-w-[1200px] md:grid-cols-2 md:gap-y-16">
         <ContributeCard
           icon={<Feature />}
           title="Request a feature"
@@ -24,7 +25,7 @@ export function Contribute(): JSX.Element {
         />
         <ContributeCard
           icon={<Question />}
-          title="Share Ideas and Ask Questions"
+          title="Share Ideas & Ask Questions"
           description="Create a discussion, ask a question to Fluvio authors"
           cta="Go to Discussions"
           ctaUrl="https://github.com/orgs/infinyon/discussions/new/choose"

diff --git a/src/components/Landing/components/GitHubInsights/index.tsx b/src/components/Landing/components/GitHubInsights/index.tsx
@@ -4,7 +4,7 @@ export function GitHubInsights(): JSX.Element {
   return (
     <section className="flex flex-col justify-evenly items-center p-6">
       <div className="flex flex-col items-center justify-center py-6">
-        <h3 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Help Wanted Issues</h3>
+        <h2>Help Wanted Issues</h2>
         <div className="p-4 flex justify-center items-center md:flex-row flex-col md:space-x-6 md:space-y-0 space-y-4">
           <IssuePreview id={3975} title="Add BASE OFFSET to show partition list" />
           <IssuePreview id={3968} title="Improve fluvio topic describe with additional information" />