Screens

axhl · Mar 19, 2024 · 5d7554b · 5d7554b
1 parent fa95e7f
commit 5d7554b
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 15 deletions.
diff --git a/apps/website/public/invoicing.png b/apps/website/public/invoicing.png
diff --git a/apps/website/src/app/[locale]/engine/page.tsx b/apps/website/src/app/[locale]/engine/page.tsx
@@ -28,7 +28,7 @@ export default function Page({
         One API to rule them all.
       </h1>
 
-      <p className="text-[#707070] mt-4 mb-8 text-center max-w-[550px]">
+      <p className="text-[#707070] mt-4 mb-8 text-center max-w-[550px] font-mono">
         Midday Engine streamlines banking integrations with a single API,
         effortlessly connecting to multiple providers and get one unified
         format.

diff --git a/apps/website/src/components/footer-cta.tsx b/apps/website/src/components/footer-cta.tsx
@@ -14,7 +14,7 @@ export function FooterCTA() {
         instead.
       </p>
 
-      <div className="mt-10 mb-8">
+      <div className="mt-10 md:mb-8">
         <div className="flex items-center space-x-4">
           <Link href="/talk-to-us">
             <Button

diff --git a/apps/website/src/components/header.tsx b/apps/website/src/components/header.tsx
@@ -180,7 +180,7 @@ export function Header() {
               </motion.li>
 
               <motion.li
-                className="mt-auto border-t-[1px] pt-8"
+                className="mt-auto border-t-[1px] border-border pt-8"
                 variants={itemVariant}
               >
                 <Link

diff --git a/apps/website/src/components/screens.tsx b/apps/website/src/components/screens.tsx
@@ -162,7 +162,7 @@ export function Screens() {
   };
 
   return (
-    <div className="flex items-center justify-center mt-14 flex-col">
+    <div className="flex items-center justify-center mt-12 md:mt-14 flex-col">
       {renderActiveApp()}
 
       <div className="mt-8">

diff --git a/apps/website/src/components/section-five.tsx b/apps/website/src/components/section-five.tsx
@@ -34,7 +34,7 @@ export function SectionFive() {
         </motion.div>
 
         <div className="flex flex-col basis-1/2">
-          <h4 className="font-medium text-2xl mb-4">Vault</h4>
+          <h4 className="font-medium text-xl md:text-2xl mb-4">Vault</h4>
 
           <p className="text-[#878787] mb-4">
             Store your files securely in Midday.
@@ -53,7 +53,9 @@ export function SectionFive() {
         onMouseEnter={() => setActive2(true)}
         onMouseLeave={() => setActive2(false)}
       >
-        <h4 className="font-medium text-2xl mb-4">Seamless export</h4>
+        <h4 className="font-medium text-xl md:text-2xl mb-4">
+          Seamless export
+        </h4>
         <p className="text-[#878787]">
           Take the hassle out of preparing exports for your accountant. Just
           select any time period or transaction you want and hit export. We

diff --git a/apps/website/src/components/section-four.tsx b/apps/website/src/components/section-four.tsx
@@ -20,7 +20,10 @@ export function SectionFour() {
         onMouseEnter={() => setActive2(true)}
         onMouseLeave={() => setActive2(false)}
       >
-        <h4 className="font-medium text-2xl mb-4">Invoicing</h4>
+        <span className="text-primary border border-primary rounded-full self-start font-semibold px-3 text-xs py-1.5 mb-4">
+          Coming soon
+        </span>
+        <h4 className="font-medium text-xl md:text-2xl mb-4">Invoicing</h4>
         <p className="text-[#878787]">
           We’re working hard to give you the best invoice solution. It will
           feature web based invoices, live collaboration and project sync.
@@ -47,7 +50,7 @@ export function SectionFour() {
         onMouseLeave={() => setActive(false)}
       >
         <div className="flex flex-col md:basis-1/2">
-          <h4 className="font-medium text-2xl mb-4">Magic inbox</h4>
+          <h4 className="font-medium text-xl md:text-2xl mb-4">Magic inbox</h4>
 
           <p className="text-[#878787] mb-4">
             Automatic matching of incoming invoices or receipts to the right

diff --git a/apps/website/src/components/section-six.tsx b/apps/website/src/components/section-six.tsx
@@ -25,13 +25,16 @@ export function SectionSix() {
             darkSrc={ai}
             lightSrc={aiLight}
             height={405}
+            width={793}
             className="-mb-[1px] object-contain"
             alt="AI"
             quality={100}
           />
         </motion.div>
-        <div className="mt-6">
-          <h3 className="font-medium text-2xl	mb-4">Your Virtual CFO</h3>
+        <div className="mt-6 md:max-w-[40%] md:ml-8">
+          <h3 className="font-medium text-xl md:text-2xl	mb-4">
+            Your Virtual CFO
+          </h3>
 
           <p className="text-[#878787]">
             With Midday AI, you can ask anything and gain insights into your

diff --git a/apps/website/src/components/section-three.tsx b/apps/website/src/components/section-three.tsx
@@ -18,8 +18,8 @@ export function SectionThree() {
     >
       <div className="border border-border rounded-2xl container bg-white dark:bg-[#121212] p-8 md:p-10 md:pb-0 overflow-hidden">
         <div className="flex flex-col md:space-x-12 md:flex-row">
-          <div className="md:mt-6">
-            <h3 className="font-medium text-2xl	mb-4">
+          <div className="mt-6 md:max-w-[40%] md:mr-8 md:mb-8">
+            <h3 className="font-medium text-xl md:text-2xl	mb-4">
               Time track your projects
             </h3>
 

diff --git a/apps/website/src/components/section-two.tsx b/apps/website/src/components/section-two.tsx
@@ -32,8 +32,10 @@ export function SectionTwo() {
           />
         </motion.div>
 
-        <div className="mt-6">
-          <h3 className="font-medium text-2xl	mb-4">Financial overview</h3>
+        <div className="mt-6 md:max-w-[40%] md:ml-8 md:mb-8">
+          <h3 className="font-medium text-xl md:text-2xl mb-4">
+            Financial overview
+          </h3>
 
           <p className="text-[#878787] mb-4">
             Bring your own bank. We connect to over 20 000+ banks in 33

diff --git a/apps/website/src/components/social-links.tsx b/apps/website/src/components/social-links.tsx
@@ -5,7 +5,7 @@ import { FaDiscord } from "react-icons/fa6";
 
 export function SocialLinks() {
   return (
-    <ul className="flex space-x-4 items-center ml-5">
+    <ul className="flex space-x-4 items-center md:ml-5">
       <li>
         <a href="https://go.midday.ai/lS72Toq">
           <span className="sr-only">Twitter</span>