Skip to content

Commit

Permalink
#40: Minor tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
natesawant committed Apr 9, 2024
1 parent e5f157b commit f06c08c
Show file tree
Hide file tree
Showing 9 changed files with 33 additions and 25 deletions.
6 changes: 3 additions & 3 deletions website/src/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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' />
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/GetInTouch.tsx
Original file line number Diff line number Diff line change
@@ -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>
}
19 changes: 10 additions & 9 deletions website/src/components/HowItWorks.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions website/src/components/MailingList.tsx
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
}
6 changes: 3 additions & 3 deletions website/src/components/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import GetInTouch from './GetInTouch';
import CustomButton from './GetInTouch';
import TubenderLogo from '../images/new_logo.svg'

export default function Navbar() {
Expand All @@ -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>
}
5 changes: 3 additions & 2 deletions website/src/components/Timeline.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
10 changes: 5 additions & 5 deletions website/src/components/WhyTubender.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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." />
Expand All @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions website/src/images/left_arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions website/src/images/right_arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f06c08c

Please sign in to comment.