wip

midday-ai · Nov 15, 2024 · f845ad9 · f845ad9
1 parent 2b87299
commit f845ad9
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 70 deletions.
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@midday/tsconfig": "workspace:*",
     "@types/node": "^22.9.0",
-    "@types/react": "npm:[email protected]",
+    "@types/react": "18.3.12",
     "@types/react-dom": "npm:[email protected]"
   },
   "overrides": {

diff --git a/apps/website/src/components/section-four.tsx b/apps/website/src/components/section-four.tsx
@@ -1,57 +1,57 @@
 import Image from "next/image";
 import inbox from "public/inbox.png";
 import invoicing from "public/invoicing.png";
-import { CopyInput } from "./copy-input";
+import { CtaLink } from "./cta-link";
 
 export function SectionFour() {
   return (
-    <section className="flex justify-between space-y-12 md:space-y-0 md:space-x-8 flex-col md:flex-row overflow-hidden mb-12">
-      <div className="border border-border basis-1/3 bg-[#121212] p-10 md:text-center flex flex-col">
-        <span className="text-[#F5F5F3] border border-border rounded-full self-start font-medium font-mono px-3 text-xs py-1.5 mb-4 bg-[#1D1D1D]">
-          Coming soon
-        </span>
-        <h4 className="font-medium text-xl md:text-2xl mb-4">Invoicing</h4>
-        <p className="text-[#878787] mb-[35px] text-sm">
-          We’re working hard to give you the best invoice solution. It will
-          feature web based invoices, live collaboration and project sync.
-        </p>
-
-        <Image
-          src={invoicing}
-          quality={100}
-          className="object-contain mt-auto"
-          alt="Invoice"
-        />
-      </div>
-
+    <section className="flex justify-between space-y-12 md:space-y-0 md:space-x-8 flex-col md:flex-row overflow-hidden mb-12 group">
       <div className="border border-border md:basis-2/3 bg-[#121212] p-10 flex justify-between md:space-x-8 md:flex-row flex-col">
         <div className="flex flex-col md:basis-1/2">
-          <h4 className="font-medium text-xl md:text-2xl mb-4">Magic inbox</h4>
+          <h4 className="font-medium text-xl md:text-2xl mb-4">Invoicing</h4>
 
           <p className="text-[#878787] mb-4 text-sm">
-            Automatic matching of incoming invoices or receipts to the right
-            transaction.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+            eu porta neque. Duis sit amet erat nec ligula pretium ultricies in
+            ac urna. Quisque id pharetra lorem, sit amet cursus enim. Mauris a
+            dui volutpat, vehicula est pretium, lacinia felis. Sed nec ante
+            efficitur nunc sagittis sollicitudin quis ac augue.
           </p>
 
-          <ul className="list-decimal pl-4 space-y-3">
-            <li className="text-[#878787] text-sm">
-              Use your personalized email address for your invoices and
-              receipts.
-            </li>
-            <li className="text-[#878787] text-sm">
-              The invoice arrives in the inbox, with our AI solution the invoice
-              automatically matches with the right transaction.
-            </li>
-            <li className="text-[#878787] text-sm">
-              Your transaction now have the right basis/attachments for you to
-              export.
-            </li>
-          </ul>
+          <div className="flex flex-col space-y-2">
+            <div className="flex space-x-2 items-center mt-8 text-sm">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={18}
+                height={13}
+                fill="none"
+              >
+                <path
+                  fill="currentColor"
+                  d="M6.55 13 .85 7.3l1.425-1.425L6.55 10.15 15.725.975 17.15 2.4 6.55 13Z"
+                />
+              </svg>
+              <span className="text-[#878787]">Live time tracking</span>
+            </div>
+            <div className="flex space-x-2 items-center text-sm">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={18}
+                height={13}
+                fill="none"
+              >
+                <path
+                  fill="currentColor"
+                  d="M6.55 13 .85 7.3l1.425-1.425L6.55 10.15 15.725.975 17.15 2.4 6.55 13Z"
+                />
+              </svg>
+              <span className="text-[#878787]">Share with your clients</span>
+            </div>
 
-          <CopyInput
-            value="[email protected]"
-            className="max-w-[240px] mt-8"
-          />
+            <div className="absolute bottom-6 left-0">
+              <CtaLink text="Start tracking time now" />
+            </div>
+          </div>
         </div>
 
         <div className="md:basis-1/2 mt-8 md:mt-0 -bottom-[8px] relative">
@@ -63,6 +63,24 @@ export function SectionFour() {
           />
         </div>
       </div>
+
+      <div className="border border-border basis-1/3 bg-[#121212] p-10 md:text-center flex flex-col">
+        <span className="text-[#F5F5F3] border border-border rounded-full self-start font-medium font-mono px-3 text-xs py-1.5 mb-4 bg-[#1D1D1D]">
+          Coming soon
+        </span>
+        <h4 className="font-medium text-xl md:text-2xl mb-4">Magic inbox</h4>
+        <p className="text-[#878787] mb-[35px] text-sm">
+          We’re working hard to give you the best invoice solution. It will
+          feature web based invoices, live collaboration and project sync.
+        </p>
+
+        <Image
+          src={invoicing}
+          quality={100}
+          className="object-contain mt-auto"
+          alt="Invoice"
+        />
+      </div>
     </section>
   );
 }
diff --git a/apps/website/src/components/section-three.tsx b/apps/website/src/components/section-three.tsx
@@ -25,33 +25,35 @@ export function SectionThree() {
               efficiency and success.
             </p>
 
-            <div className="flex space-x-2 items-center mt-8 text-sm">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width={18}
-                height={13}
-                fill="none"
-              >
-                <path
-                  fill="currentColor"
-                  d="M6.55 13 .85 7.3l1.425-1.425L6.55 10.15 15.725.975 17.15 2.4 6.55 13Z"
-                />
-              </svg>
-              <span className="text-[#878787]">Live time tracking</span>
-            </div>
-            <div className="flex space-x-2 items-center mt-1 text-sm">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width={18}
-                height={13}
-                fill="none"
-              >
-                <path
-                  fill="currentColor"
-                  d="M6.55 13 .85 7.3l1.425-1.425L6.55 10.15 15.725.975 17.15 2.4 6.55 13Z"
-                />
-              </svg>
-              <span className="text-[#878787]">Share with your clients</span>
+            <div className="flex flex-col space-y-2">
+              <div className="flex space-x-2 items-center mt-8 text-sm">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={18}
+                  height={13}
+                  fill="none"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M6.55 13 .85 7.3l1.425-1.425L6.55 10.15 15.725.975 17.15 2.4 6.55 13Z"
+                  />
+                </svg>
+                <span className="text-[#878787]">Live time tracking</span>
+              </div>
+              <div className="flex space-x-2 items-center text-sm">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={18}
+                  height={13}
+                  fill="none"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M6.55 13 .85 7.3l1.425-1.425L6.55 10.15 15.725.975 17.15 2.4 6.55 13Z"
+                  />
+                </svg>
+                <span className="text-[#878787]">Share with your clients</span>
+              </div>
             </div>
 
             <div className="absolute bottom-6">

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   "dependencies": {
     "@biomejs/biome": "1.9.4",
     "@manypkg/cli": "^0.22.0",
-    "turbo": "2.2.3",
+    "turbo": "2.3.0",
     "typescript": "^5.6.3"
   },
   "packageManager": "[email protected]",