#40: Responsiveness changes

website/src/components/HowItWorks.tsx

@@ -27,8 +27,8 @@ export default function HowItWorks() {
                         <p className=' text-white-hover text-lg'>This step ensures accuracy and reduces the likelihood of errors during the bending process. It empowers users to create custom tubes tailored to their specific needs, whether for functional or artistic purposes.</p>
                     </div>
                 </div>
-                <div className=' flex flex-row items-center gap-16'>
-                    <div className=' w-3/5'>
+                <div className=' flex flex-col lg:flex-row items-center gap-16'>
+                    <div className=' w-full lg:w-3/5'>
                         <CustomButton fullWidth label='View our product' link='' />
                     </div>
                     <div className=' flex flex-row gap-10'>

website/src/components/MailingList.tsx

@@ -1,15 +1,15 @@
 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">
-        <div className=" flex flex-col gap-6 w-4/5 lg:w-1/3">
+    return <div className=" bg-off-white bg-arrow-background bg-cover flex flex-col px-8 justify-between lg:justify-evenly lg:flex-row py-32 gap-16 text-brand-blue">
+        <div className=" flex flex-col gap-6 w-full lg:w-1/3">
             <h1 className=" text-5xl font-semibold text-brand-blue">Get in touch</h1>
             <h2 className=" text-3xl font-semibold text-brand-blue">Interested in our product? </h2>
             <p className=" text-xl font-medium text-brand-blue-light">Get in touch with us to receive a quote or to learn more.</p>
         </div>
-        <form className="flex flex-col w-4/5 sm:w-2/3 lg:w-1/3 gap-5">
+        <form className="flex flex-col w-full sm:w-2/3 lg:w-1/3 gap-5">
             <div className="flex flex-col gap-4">
-                <div className=" grid grid-cols-2 gap-5">
+                <div className=" grid grid-cols-1 lg:grid-cols-2 gap-5">
                     <input type="text" placeholder="First Name" className=" p-6 rounded-3xl" />
                     <input type="text" placeholder="Last Name" className=" p-6 rounded-3xl" />
                     <input type="email" placeholder="Business Email" className=" p-6 rounded-3xl" />

website/src/components/Navbar.tsx

@@ -2,7 +2,7 @@ import CustomButton from './GetInTouch';
 import TubenderLogo from '../images/new_logo.svg'
 
 export default function Navbar() {
-    return <div className=" w-full h-28 px-6 pl-8 rounded-3xl bg-white flex flex-row justify-between items-center">
+    return <div className=" w-full p-6 pl-8 rounded-3xl bg-white flex flex-col gap-6 lg:flex-row justify-between items-center">
         <div className=' flex flex-row gap-14'>
             <div className=' flex flex-row items-center gap-2'>
                 <img src={TubenderLogo} alt="" className=' h-7' />

website/src/components/SplashScreen.tsx

@@ -5,7 +5,7 @@ export default function SplashScreen() {
         < h1 className=" text-brand-white text-4xl sm:text-6xl md:text-8xl" > we are <span className=" text-brand-blue-temp" > tubender</span></h1 >
         <div className=" absolute bottom-24">
             <a href="#why">
-                <button className=" hover:bg-white-hover bg-brand-white w-24 h-24 lg:w-24 lg:h-24 rounded-full flex justify-center items-center"><img src={DownArrow} alt="" /></button>
+                <button className=" hover:bg-white-hover bg-brand-white w-16 h-16 lg:w-24 lg:h-24 rounded-full flex justify-center items-center"><img src={DownArrow} alt="" className=' w-8 lg:w-16' /></button>
             </a>
         </div>
     </div >

website/src/components/WhyTubender.tsx

@@ -29,12 +29,11 @@ export default function WhyTubender() {
                     <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>
                     <CustomButton label='Our projects' link='' />
                 </div>
-                <div className=' grid grid-cols-2 w-full xl:w-1/2 gap-28'>
+                <div className=' grid grid-cols-2 w-full xl:w-1/2 gap-28 pr-8'>
                     <InfoCell symbol={Complex} title="Complex" body="Tubender allows complex shapes via software-controlled freeform bending with CAD." />
                     <InfoCell symbol={Automatic} title="Automatic" body="Automated bending streamlines production, reducing labor with software control." />
                     <InfoCell symbol={Portable} title="Portable" body="Our portability empowers users to bend tubes anywhere, optimizing workspace flexibility and convenience." />
                     <InfoCell symbol={Affordable} title="Affordable" body="Tubender's affordability democratizes tube bending, making CNC technology accessible to small businesses and hobbyists." />
-
                 </div>
             </div>
             <div className=" flex flex-row flex-wrap xl:flex-nowrap gap-36">