Merge pull request #51 from GenerateNU/website

Website Landing Page

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "web-vitals": "^3.5.2"
+  }
+}

website/package.json

@@ -12,7 +12,7 @@
     "@types/react-dom": "^18.2.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
@@ -39,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.3"
   }
 }

website/src/App.tsx

@@ -1,26 +1,14 @@
+// src/App.tsx
+
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import AboutPage from './components/AboutPage';
 
-function App() {
+const App: React.FC = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className=" h-full w-full">
+      <AboutPage />
     </div>
   );
-}
+};
 
 export default App;

website/src/components/AboutPage.tsx

@@ -0,0 +1,15 @@
+import SplashScreen from './SplashScreen';
+import WhyTubender from './WhyTubender';
+import HowItWorks from './HowItWorks';
+import Footer from './Footer';
+import MailingList from './MailingList';
+
+export default function AboutPage() {
+    return <div className=' w-full h-full'>
+        <SplashScreen />
+        <WhyTubender />
+        <HowItWorks />
+        <MailingList />
+        <Footer />
+    </div>
+}

website/src/components/Footer.tsx

@@ -0,0 +1,52 @@
+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 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-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' />
+                <h1 className=' text-4xl'>tubender</h1>
+            </div>
+            <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" />
+            <CustomButton fullWidth label='Subscribe' link='' />
+        </div>
+        <div>
+            <h3 className=' text-2xl font-semibold'>Company</h3>
+            <ul className=' flex flex-col gap-3 pt-6'>
+                <li className=' text-lg text-off-white'><a href="">About us</a></li>
+                <li className=' text-lg text-off-white'><a href="">Brand values</a></li>
+                <li className=' text-lg text-off-white'><a href="">Privacy policy</a></li>
+                <li className=' text-lg text-off-white'><a href="">Terms & conditions</a></li>
+            </ul>
+        </div>
+        <div>
+            <h3 className=' text-2xl font-semibold'>Products</h3>
+            <ul className=' flex flex-col gap-3 pt-6'>
+                <li className=' text-lg text-off-white'><a href="">Machinery</a></li>
+                <li className=' text-lg text-off-white'><a href="">Software</a></li>
+                <li className=' text-lg text-off-white'><a href="">Web application</a></li>
+                <li className=' text-lg text-off-white'><a href="">Testimonials</a></li>
+                <li className=' text-lg text-off-white'><a href="">Competitors</a></li>
+            </ul>
+        </div>
+        <div>
+            <h3 className=' text-2xl font-semibold'>Resources</h3>
+            <ul className=' flex flex-col gap-3 pt-6'>
+                <li className=' text-lg text-off-white'><a href="">Download Tubender app</a></li>
+                <li className=' text-lg text-off-white'><a href="">Download Tubender software</a></li>
+                <li className=' text-lg text-off-white'><a href="">Download Tubender manual</a></li>
+                <div className='flex flex-row gap-6 pt-4'>
+                    <img src={Facebook} alt="" />
+                    <img src={Twitter} alt="" />
+                    <img src={Instagram} alt="" />
+                </div>
+            </ul>
+        </div>
+    </div>
+}

website/src/components/GetInTouch.tsx

@@ -0,0 +1,3 @@
+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>
+}

website/src/components/HowItWorks.tsx

@@ -0,0 +1,42 @@
+import StockPhoto from '../images/image2.png'
+import CustomButton from './GetInTouch';
+import Timeline from './Timeline';
+import LeftArrow from '../images/left_arrow.svg'
+import RightArrow from '../images/right_arrow.svg'
+
+export default function HowItWorks() {
+    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>
+        </div>
+        <div className='pb-24 pt-16 w-4/5'>
+            <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 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>
+                        <p className=' text-white-hover text-lg'>Users leverage CAD software to develop intricate tube designs, specifying bends, angles, and dimensions. CAD software provides a powerful platform for precise design creation, allowing users to visualize and refine their designs before fabrication.</p>
+                    </div>
+                    <div className=' flex flex-col gap-3'>
+                        <h1 className=' text-xl font-semibold'>Benefits</h1>
+                        <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-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'>
+                        <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>
+        </div>
+    </div>
+}

website/src/components/MailingList.tsx

@@ -0,0 +1,23 @@
+import CustomButton from "./GetInTouch";
+
+export default function MailingList() {
+    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-full sm:w-2/3 lg:w-1/3 gap-5">
+            <div className="flex flex-col gap-4">
+                <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" />
+                    <input type="text" placeholder="Phone Number" className=" p-6 rounded-3xl" />
+                </div>
+                <textarea placeholder="Send a message..." className=" h-52 align-top  p-6 rounded-3xl" />
+            </div>
+            <CustomButton fullWidth label="Submit" link="" />
+        </form>
+    </div>
+}

website/src/components/Navbar.tsx

@@ -0,0 +1,19 @@
+import CustomButton from './GetInTouch';
+import TubenderLogo from '../images/new_logo.svg'
+
+export default function Navbar() {
+    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' />
+                <h1 className=' text-brand-blue text-2xl'>tubender</h1>
+            </div>
+            <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>
+        <CustomButton label='Get in touch' link='' />
+    </div>
+}

website/src/components/SplashScreen.tsx

@@ -0,0 +1,12 @@
+import DownArrow from '../images/blue_arrow.svg'
+
+export default function SplashScreen() {
+    return <div className=" h-screen w-full flex flex-col justify-center items-center gap-20 bg-brand-blue-dark bg-opacity-95 bg-blend-darken bg-splash-background bg-cover">
+        < 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-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/Timeline.tsx

@@ -0,0 +1,36 @@
+import ComputerIcon from '../images/computer.svg'
+
+export default function Timeline() {
+    const TimelineStep = (props: { text: string }) => {
+        return <div className=" relative h-20 lg:h-48 flex justify-center" >
+            <div className=" flex justify-center items-baseline lg:items-center">
+                <div className=" w-10 h-10 bg-off-white rounded-full flex justify-center" />
+            </div>
+            <h3 className=" absolute bottom-0 text-nowrap text-off-white">{props.text}</h3>
+        </div>
+    }
+
+    const ConnectingLine = () => {
+        return <div className=" grow self-center border-dashed border-l-[1px] lg:border-l-0 lg:border-t-[1px]" />
+    }
+
+
+    return <div className=" w-full h-screen lg:h-auto">
+        <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 items-center" >
+                        <img src={ComputerIcon} alt="" className=' w-12 h-12 top-[72px]' />
+                    </div>
+                </div>
+                <h3 className=" absolute bottom-0 text-nowrap text-lg text-brand-white font-bold">Starting in CAD</h3>
+            </div>
+            <ConnectingLine />
+            <TimelineStep text='G-Code' />
+            <ConnectingLine />
+            <TimelineStep text='Machine Setup' />
+            <ConnectingLine />
+            <TimelineStep text='Precision Bending' />
+        </div>
+    </div>
+}

website/src/components/WhyTubender.tsx

@@ -0,0 +1,49 @@
+import Anvil from '../images/anvil_close_bg.svg'
+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 CustomButton from './GetInTouch';
+import Navbar from './Navbar'
+
+export default function WhyTubender() {
+    const InfoCell = (props: { symbol: string, title: string, body: string }) => {
+        return <div className=' flex flex-col gap-5'>
+            <div className=' bg-brand-blue-baby rounded-full w-24 h-24 flex justify-center items-center'>
+                <img src={props.symbol} alt="" className=' w-16 h-16' />
+            </div>
+            <h2 className=' text-2xl pb-6 font-medium text-brand-blue-dark'>{props.title}</h2>
+            <p className=' text-brand-blue text-lg'>{props.body}</p>
+            <a href="" className=' text-sm text-brand-blue-temp'>Learn more →</a>
+        </div>
+    }
+
+    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 ">
+            <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>
+                    <CustomButton label='Our projects' link='' />
+                </div>
+                <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">
+                <img src={Anvil} className=" w-full h-full rounded-2xl" />
+                <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>
+                    <CustomButton label='View product' link='' />
+                </div>
+            </div>
+        </div>
+    </div>
+}