repositioning cards and text and making it more responsive

talkdai · Jun 12, 2024 · 10b1583 · 10b1583
1 parent 535560b
commit 10b1583
Showing 1 changed file with 15 additions and 18 deletions.
diff --git a/src/components/SectionHero.tsx b/src/components/SectionHero.tsx
@@ -1,65 +1,62 @@
-import { Cards } from "./Card";
+// import { Cards } from "./Card";
 import { Container } from "./container";
 
 export function SectionHero() {
   return (
-    <section className="w-full mb-40 lg:max-w-[1440px] h-auto bg-black bg-no-repeat bg-cover bg-center talkdai-hero text-white">
+    <section className="w-full  max-w-[1440px] max-h-[2146px] bg-black bg-no-repeat bg-cover bg-center talkdai-hero text-white">
       <Container>
-        <div className=" w-full max-w-[954px] mx-auto text-center px-4">
-          <div className="mb-24">
+        <div className=" w-full max-w-[954px] min-h-[168px] mt-[178px] mx-auto text-center px-4">
+        <div className=" mb-32">
             <h1
-              className=" font-semibold md:text-[46px]"
-              style={{ lineHeight: 1.2 }}
-            >
-              <span className=" text-primary-gray">
+              className=" font-semibold text-center text-2xl md:text-[46px]  text-primary-gray md:font-bold"
+              style={{ lineHeight: 1.2 }}>
+              <span >
                 talkd is an open-source software that enables you to{" "}
               </span>
               <span className=" text-primary-purple">
                 easily deploy any LLM available through LangChain.
               </span>
             </h1>
-            <p
-              className="text-[26px] mx-auto max-w-[675px] text-primary-gray mt-6"
+            <p className="text-sm md:text-[26px] mx-auto max-w-[675px] max-h-[62px] text-primary-gray mt-[32px]"
               style={{ lineHeight: 1.2 }}
             >
               We’re currently in beta, working on making it as easy as possible
               to deploy your own LLM.{" "}
             </p>
           </div>
 
-          <div className="w-full max-w-[997px] h-auto flex flex-col md:flex-row justify-center gap-6 font-normal font-ubuntu-mono mb-6">
+          <div className="w-full mx-auto flex flex-col md:flex-row justify-center gap-6 font-ubuntu-mono mb-6">
             <a
               href="https://github.com/talkdai/dialog"
               target="_blank"
               rel="noopener noreferrer"
-              className="p-4 border-2 border-gray-500 rounded-md gap-6 text-left flex flex-col items-start"
+              className="max-w-[397px] max-h-[218px] px-4 py-6 border-2 pb-8 border-primary-gray rounded-md justify-start gap-6 text-left flex flex-col items-start"
             >
               <h2 className="text-2xl font-semibold text-primary-gray font-ubuntu-mono">
                 Dialog
               </h2>
-              <p className="w-[362px] text-primary-gray md:text-2xl mt-2">
+              <p className="max-w-[362px] overflow-hidden text-primary-gray md:text-[24px] text-base">
                 An extensible LLM API that enables you to easily deploy any LLM.
               </p>
             </a>
             <a
               href="https://github.com/talkdai/dialog-whatsapp"
               target="_blank"
               rel="noopener noreferrer"
-              className="p-4 border-2 border-gray-500 rounded-md gap-6 text-left flex flex-col items-start"
+              className="max-w-[397px] max-h-[218px] px-4 py-6 border-2 pb-8 border-primary-gray rounded-md justify-start gap-6 text-left flex flex-col items-start"
             >
-              <h2 className="text-2xl font-bold text-primary-gray">
+              <h2 className="text-2xl font-semibold text-primary-gray font-ubuntu-mono">
                 Whatsapp Plugin
               </h2>
-              <p className="w-[362px] text-primary-gray md:text-2xl mt-2">
+              <p className="max-w-[362px] overflow-hidden text-primary-gray md:text-[24px] text-base">
                 Our first plugin, enables users to launch Dialog with WhatsApp.
               </p>
             </a>
           </div>
 
           {/* <div className=" w-full max-w-[954px] mx-auto text-center px-4 text-primary-gray mt-32">
             <h1
-              className=" font-semibold md:text-[46px]"
-              style={{ lineHeight: 1.2 }}
+              className=" font-semibold md:text-[46px] leading-[55.67px]"
             >
               What our customers say about us
             </h1>