From f06c08c6cd44420d192f8adbdcc86484263e8d8d Mon Sep 17 00:00:00 2001
From: Nate Sawant <natesawant@gmail.com>
Date: Tue, 9 Apr 2024 19:06:15 -0400
Subject: [PATCH] #40: Minor tweaks

---
 website/src/components/Footer.tsx      |  6 +++---
 website/src/components/GetInTouch.tsx  |  2 +-
 website/src/components/HowItWorks.tsx  | 19 ++++++++++---------
 website/src/components/MailingList.tsx |  4 ++--
 website/src/components/Navbar.tsx      |  6 +++---
 website/src/components/Timeline.tsx    |  5 +++--
 website/src/components/WhyTubender.tsx | 10 +++++-----
 website/src/images/left_arrow.svg      |  3 +++
 website/src/images/right_arrow.svg     |  3 +++
 9 files changed, 33 insertions(+), 25 deletions(-)
 create mode 100644 website/src/images/left_arrow.svg
 create mode 100644 website/src/images/right_arrow.svg

diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx
index a12e6d9..751540c 100644
--- a/website/src/components/Footer.tsx
+++ b/website/src/components/Footer.tsx
@@ -2,10 +2,10 @@ import Twitter from '../images/twitter.svg'
 import Facebook from '../images/facebook.svg'
 import Instagram from '../images/instagram.svg'
 import Logo from '../images/new_logo.svg'
-import GetInTouch from './GetInTouch'
+import CustomButton from './GetInTouch'
 
 export default function Footer() {
-    return <div className='w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between p-12 lg:p-24 gap-32 text-brand-white bg-brand-blue-dark bg-opacity-85 bg-blend-darken bg-splash-background bg-cover'>
+    return <div className='w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between p-12 lg:p-24 gap-32 text-brand-white bg-gradient-to-br from-[#272932] via-[#353A4E] to-[#272932]'>
         <div className=' flex flex-col gap-10'>
             <div className=' flex flex-row gap-4'>
                 <img src={Logo} alt="" className=' w-10' />
@@ -14,7 +14,7 @@ export default function Footer() {
             <h2 className=' font-semibold text-2xl'>Subscribe to our Newsletter</h2>
             <h3 className=' text-gray-400'>Subscribe to learn about our latest endeavors, news and updates.</h3>
             <input type="email" placeholder="Email" className=" p-6 rounded-3xl bg-brand-blue text-lg text-white" />
-            <GetInTouch fullWidth label='Subscribe' link='' />
+            <CustomButton fullWidth label='Subscribe' link='' />
         </div>
         <div>
             <h3 className=' text-2xl font-semibold'>Company</h3>
diff --git a/website/src/components/GetInTouch.tsx b/website/src/components/GetInTouch.tsx
index 2fb75bd..0aac5c8 100644
--- a/website/src/components/GetInTouch.tsx
+++ b/website/src/components/GetInTouch.tsx
@@ -1,3 +1,3 @@
-export default function GetInTouch(props: { fullWidth?: boolean, label: string, link: string }) {
+export default function CustomButton(props: { fullWidth?: boolean, label: string, link: string }) {
     return <a href={props.link}><button className={` h-16 ${props.fullWidth ? 'w-full' : 'w-48'} bg-brand-blue-temp rounded-2xl text-lg font-semibold text-brand-white hover:text-brand-white-hover`}>{props.label}</button></a>
 }
\ No newline at end of file
diff --git a/website/src/components/HowItWorks.tsx b/website/src/components/HowItWorks.tsx
index 099aa49..c73f712 100644
--- a/website/src/components/HowItWorks.tsx
+++ b/website/src/components/HowItWorks.tsx
@@ -1,10 +1,11 @@
 import StockPhoto from '../images/image2.png'
-import GetInTouch from './GetInTouch';
+import CustomButton from './GetInTouch';
 import Timeline from './Timeline';
-import Arrow from '../images/blue_arrow.svg'
+import LeftArrow from '../images/left_arrow.svg'
+import RightArrow from '../images/right_arrow.svg'
 
 export default function HowItWorks() {
-    return <div className=" bg-brand-blue text-brand-white flex flex-col justify-center items-center p-8 md:p-28 pb-40 w-full">
+    return <div className="  bg-gradient-to-br from-[#272932] via-[#353A4E] to-[#272932] text-brand-white flex flex-col justify-center items-center p-8 md:p-28 pb-40 w-full">
         <div className=' flex flex-col gap-5'>
             <h2 className=" text-4xl text-center font-semibold">How does Tubender work?</h2>
             <h3 className=" text-lg text-center text-off-white">Let's break down the process</h3>
@@ -13,9 +14,9 @@ export default function HowItWorks() {
             <Timeline />
         </div>
         <h1 className=' text-left w-full font-semibold text-5xl pb-10'>Starting in CAD</h1>
-        <div className=' flex flex-row flex-wrap justify-between w-full'>
-            <img src={StockPhoto} alt="" />
-            <div className=' w-full xl:w-5/12 flex flex-col justify-between'>
+        <div className=' flex flex-row flex-wrap gap-12 w-full'>
+            <img src={StockPhoto} alt="" className=' grow h-full' />
+            <div className=' w-full xl:w-5/12 flex flex-col justify-between gap-12'>
                 <div className=' flex flex-col gap-6'>
                     <div className=' flex flex-col gap-3'>
                         <h1 className=' text-xl font-semibold'>Functionality</h1>
@@ -28,11 +29,11 @@ export default function HowItWorks() {
                 </div>
                 <div className=' flex flex-row items-center gap-16'>
                     <div className=' w-3/5'>
-                        <GetInTouch fullWidth label='View our product' link='' />
+                        <CustomButton fullWidth label='View our product' link='' />
                     </div>
                     <div className=' flex flex-row gap-10'>
-                        <a href="" className=' flex justify-center items-center w-14 h-14 bg-gray-300 rounded-full'><img src={Arrow} alt="" className=' w-5' /></a>
-                        <a href="" className=' flex justify-center items-center w-14 h-14 bg-gray-300 rounded-full'><img src={Arrow} alt="" className=' w-5' /></a>
+                        <a href="" className=' flex justify-center items-center w-14 h-14 bg-gray-300 rounded-full'><img src={LeftArrow} alt="" className=' w-5' /></a>
+                        <a href="" className=' flex justify-center items-center w-14 h-14 bg-gray-300 rounded-full'><img src={RightArrow} alt="" className=' w-5' /></a>
                     </div>
                 </div>
             </div>
diff --git a/website/src/components/MailingList.tsx b/website/src/components/MailingList.tsx
index 38a0660..7b9863d 100644
--- a/website/src/components/MailingList.tsx
+++ b/website/src/components/MailingList.tsx
@@ -1,4 +1,4 @@
-import GetInTouch from "./GetInTouch";
+import CustomButton from "./GetInTouch";
 
 export default function MailingList() {
     return <div className=" bg-off-white bg-arrow-background bg-cover flex flex-col justify-between lg:justify-evenly lg:flex-row py-32 gap-16 text-brand-blue">
@@ -17,7 +17,7 @@ export default function MailingList() {
                 </div>
                 <textarea placeholder="Send a message..." className=" h-52 align-top  p-6 rounded-3xl" />
             </div>
-            <GetInTouch fullWidth label="Submit" link="" />
+            <CustomButton fullWidth label="Submit" link="" />
         </form>
     </div>
 }
\ No newline at end of file
diff --git a/website/src/components/Navbar.tsx b/website/src/components/Navbar.tsx
index 4d346d0..722a5d5 100644
--- a/website/src/components/Navbar.tsx
+++ b/website/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import GetInTouch from './GetInTouch';
+import CustomButton from './GetInTouch';
 import TubenderLogo from '../images/new_logo.svg'
 
 export default function Navbar() {
@@ -8,12 +8,12 @@ export default function Navbar() {
                 <img src={TubenderLogo} alt="" className=' h-7' />
                 <h1 className=' text-brand-blue text-2xl'>tubender</h1>
             </div>
-            <div className=' flex flex-row gap-3'>
+            <div className=' hidden lg:flex flex-row gap-3'>
                 <a href="" className=' text-brand-blue-light text-lg font-semibold px-5'>Company</a>
                 <a href="" className=' text-brand-blue-light text-lg font-semibold px-5'>Products</a>
                 <a href="" className=' text-brand-blue-light text-lg font-semibold px-5'>Projects</a>
             </div>
         </div>
-        <GetInTouch label='Get in touch' link='' />
+        <CustomButton label='Get in touch' link='' />
     </div>
 }
\ No newline at end of file
diff --git a/website/src/components/Timeline.tsx b/website/src/components/Timeline.tsx
index 33c0589..923a1b2 100644
--- a/website/src/components/Timeline.tsx
+++ b/website/src/components/Timeline.tsx
@@ -19,9 +19,10 @@ export default function Timeline() {
         <div className=" w-full h-5/6 lg:h-auto flex flex-col lg:flex-row justify-evenly items-center gap-4">
             <div className=" relative h-36 lg:h-48 flex justify-center" >
                 <div className=" flex justify-center items-baseline lg:items-center">
-                    <div className=" w-24 h-24 bg-white drop-shadow-2xl rounded-full flex justify-center" />
+                    <div className=" w-24 h-24 bg-white drop-shadow-2xl rounded-full flex justify-center items-center" >
+                        <img src={ComputerIcon} alt="" className=' w-12 h-12 top-[72px]' />
+                    </div>
                 </div>
-                <img src={ComputerIcon} alt="" className=' w-12 h-12 absolute top-[72px]' />
                 <h3 className=" absolute bottom-0 text-nowrap text-lg text-brand-white font-bold">Starting in CAD</h3>
             </div>
             <ConnectingLine />
diff --git a/website/src/components/WhyTubender.tsx b/website/src/components/WhyTubender.tsx
index 137c5b3..d86d978 100644
--- a/website/src/components/WhyTubender.tsx
+++ b/website/src/components/WhyTubender.tsx
@@ -3,7 +3,7 @@ import Complex from '../images/complex_symbol.svg'
 import Automatic from '../images/automatic_symbol.svg'
 import Portable from '../images/portable_symbol.svg'
 import Affordable from '../images/affordable_symbol.svg'
-import GetInTouch from './GetInTouch';
+import CustomButton from './GetInTouch';
 import Navbar from './Navbar'
 
 export default function WhyTubender() {
@@ -18,16 +18,16 @@ export default function WhyTubender() {
         </div>
     }
 
-    return <div className=' flex flex-col bg-off-white'>
+    return <div className=' flex flex-col bg-off-white' id='why'>
         <div className=' pt-14 px-9 drop-shadow-md'>
             <Navbar />
         </div>
-        <div className=" flex flex-col p-8 md:px-40 py-32 gap-28 " id='why'>
+        <div className=" flex flex-col p-8 md:px-40 py-32 gap-28 ">
             <div className=" flex flex-row flex-wrap gap-32 justify-between">
                 <div className=' w-full xl:w-1/3 flex flex-col gap-11'>
                     <h2 className=' text-5xl font-semibold text-brand-blue-dark'>What we do</h2>
                     <p className=' text-2xl text-brand-blue'>Our mission at Tubender is to democratize manufacturing by making automatic metal tube bending machines smaller, more affordable, and easier to use. We empower makers of all experience levels to create incredible products with precision and accessibility, ensuring that technical expertise is never a barrier.</p>
-                    <GetInTouch label='Our projects' link='' />
+                    <CustomButton label='Our projects' link='' />
                 </div>
                 <div className=' grid grid-cols-2 w-full xl:w-1/2 gap-28'>
                     <InfoCell symbol={Complex} title="Complex" body="Tubender allows complex shapes via software-controlled freeform bending with CAD." />
@@ -42,7 +42,7 @@ export default function WhyTubender() {
                 <div className=" flex flex-col gap-11">
                     <h2 className=' text-5xl font-semibold'>Why Tubender?</h2>
                     <p className=' text-lg text-brand-blue'>Tubender offers an innovative solution for precision metal tube bending, catering to small businesses, contractors, and hobbyists. Our portable CNC machines eliminate the need for specialized tooling, providing unparalleled flexibility at a fraction of the cost. Tubender empowers workshops to produce custom tubes in-house.</p>
-                    <GetInTouch label='View product' link='' />
+                    <CustomButton label='View product' link='' />
                 </div>
             </div>
         </div>
diff --git a/website/src/images/left_arrow.svg b/website/src/images/left_arrow.svg
new file mode 100644
index 0000000..0ccd5f8
--- /dev/null
+++ b/website/src/images/left_arrow.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.54907 16.9916L0.819225 10.2618C0.485052 9.92721 0.29735 9.47366 0.29735 9.00077C0.29735 8.52788 0.485052 8.07433 0.819225 7.73974L7.54788 1.00871C7.88264 0.673944 8.33668 0.485878 8.8101 0.485878C9.28352 0.485878 9.73756 0.673944 10.0723 1.00871C10.4071 1.34347 10.5951 1.7975 10.5951 2.27092C10.5951 2.74435 10.4071 3.19838 10.0723 3.53314L6.38916 7.2163L20.1118 7.2163C20.585 7.2163 21.0389 7.4043 21.3736 7.73896C21.7082 8.07361 21.8962 8.5275 21.8962 9.00077C21.8962 9.47404 21.7082 9.92793 21.3736 10.2626C21.0389 10.5972 20.585 10.7852 20.1118 10.7852L6.38916 10.7852L10.0711 14.4684C10.4057 14.8032 10.5936 15.2571 10.5935 15.7304C10.5934 16.2038 10.4053 16.6576 10.0705 16.9922C9.73577 17.3268 9.2818 17.5148 8.80849 17.5146C8.33518 17.5145 7.88129 17.3264 7.54669 16.9916H7.54907Z" fill="white"/>
+</svg>
diff --git a/website/src/images/right_arrow.svg b/website/src/images/right_arrow.svg
new file mode 100644
index 0000000..07dca87
--- /dev/null
+++ b/website/src/images/right_arrow.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4617 1.00835L21.1915 7.7382C21.5257 8.07279 21.7134 8.52634 21.7134 8.99923C21.7134 9.47212 21.5257 9.92567 21.1915 10.2603L14.4629 16.9913C14.1281 17.3261 13.6741 17.5141 13.2006 17.5141C12.7272 17.5141 12.2732 17.3261 11.9384 16.9913C11.6037 16.6565 11.4156 16.2025 11.4156 15.7291C11.4156 15.2557 11.6037 14.8016 11.9384 14.4669L15.6216 10.7837H1.89898C1.4257 10.7837 0.971816 10.5957 0.637162 10.261C0.302509 9.92639 0.114502 9.4725 0.114502 8.99923C0.114502 8.52596 0.302509 8.07207 0.637162 7.73742C0.971816 7.40276 1.4257 7.21476 1.89898 7.21476H15.6216L11.9396 3.5316C11.605 3.19684 11.4171 2.74287 11.4172 2.26956C11.4173 1.79624 11.6054 1.34236 11.9402 1.00776C12.275 0.673155 12.7289 0.48524 13.2023 0.485352C13.6756 0.485463 14.1294 0.673593 14.4641 1.00835H14.4617Z" fill="white"/>
+</svg>