diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..dae9017 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,17 @@ +{ + "name": "Tubender", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "web-vitals": "^3.5.2" + } + }, + "node_modules/web-vitals": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.2.tgz", + "integrity": "sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..6ee0685 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "web-vitals": "^3.5.2" + } +} diff --git a/website/package-lock.json b/website/package-lock.json index 1b2f365..7b633cb 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -17,9 +17,12 @@ "@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" + }, + "devDependencies": { + "tailwindcss": "^3.4.3" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -16473,9 +16476,9 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, "node_modules/tailwindcss": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", - "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz", + "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==", "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -16485,7 +16488,7 @@ "fast-glob": "^3.3.0", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.19.1", + "jiti": "^1.21.0", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", diff --git a/website/package.json b/website/package.json index 76db444..a75445b 100644 --- a/website/package.json +++ b/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" } } diff --git a/website/src/App.tsx b/website/src/App.tsx index a53698a..bf5f1bc 100644 --- a/website/src/App.tsx +++ b/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 ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+
+
); -} +}; export default App; diff --git a/website/src/anvil_close_no_bg.svg b/website/src/anvil_close_no_bg.svg new file mode 100644 index 0000000..7c0a4bf --- /dev/null +++ b/website/src/anvil_close_no_bg.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/components/AboutPage.tsx b/website/src/components/AboutPage.tsx new file mode 100644 index 0000000..c8df673 --- /dev/null +++ b/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
+ + + + +
+
+} \ No newline at end of file diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx new file mode 100644 index 0000000..751540c --- /dev/null +++ b/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
+
+
+ +

tubender

+
+

Subscribe to our Newsletter

+

Subscribe to learn about our latest endeavors, news and updates.

+ + +
+
+

Company

+ +
+
+

Products

+ +
+
+

Resources

+ +
+
+} \ No newline at end of file diff --git a/website/src/components/GetInTouch.tsx b/website/src/components/GetInTouch.tsx new file mode 100644 index 0000000..0aac5c8 --- /dev/null +++ b/website/src/components/GetInTouch.tsx @@ -0,0 +1,3 @@ +export default function CustomButton(props: { fullWidth?: boolean, label: string, link: string }) { + return +} \ No newline at end of file diff --git a/website/src/components/HowItWorks.tsx b/website/src/components/HowItWorks.tsx new file mode 100644 index 0000000..f18a6c8 --- /dev/null +++ b/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
+
+

How does Tubender work?

+

Let's break down the process

+
+
+ +
+

Starting in CAD

+
+ +
+
+
+

Functionality

+

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.

+
+
+

Benefits

+

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.

+
+
+
+
+ +
+
+ + +
+
+
+
+
+} \ No newline at end of file diff --git a/website/src/components/MailingList.tsx b/website/src/components/MailingList.tsx new file mode 100644 index 0000000..14a2582 --- /dev/null +++ b/website/src/components/MailingList.tsx @@ -0,0 +1,23 @@ +import CustomButton from "./GetInTouch"; + +export default function MailingList() { + return
+
+

Get in touch

+

Interested in our product?

+

Get in touch with us to receive a quote or to learn more.

+
+
+
+
+ + + + +
+