diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 000000000..08e45a586 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 000000000..dd68d02f3 Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png index 679f6d349..fd0470973 100755 Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ diff --git a/public/assets/images/accesibility.png b/public/assets/images/accesibility.png new file mode 100644 index 000000000..c1fc6c1a8 Binary files /dev/null and b/public/assets/images/accesibility.png differ diff --git a/public/assets/images/affordable.png b/public/assets/images/affordable.png new file mode 100644 index 000000000..d1ea28a41 Binary files /dev/null and b/public/assets/images/affordable.png differ diff --git a/public/assets/images/automation.png b/public/assets/images/automation.png new file mode 100644 index 000000000..2240ed201 Binary files /dev/null and b/public/assets/images/automation.png differ diff --git a/public/assets/images/flexibility.png b/public/assets/images/flexibility.png new file mode 100644 index 000000000..93830fe44 Binary files /dev/null and b/public/assets/images/flexibility.png differ diff --git a/public/assets/images/happyTeam.jpeg b/public/assets/images/happyTeam.jpeg index f51d6e5d6..d5f8bcf62 100644 Binary files a/public/assets/images/happyTeam.jpeg and b/public/assets/images/happyTeam.jpeg differ diff --git a/public/assets/images/integration.png b/public/assets/images/integration.png new file mode 100644 index 000000000..5ccd99c0d Binary files /dev/null and b/public/assets/images/integration.png differ diff --git a/public/assets/images/logo.png b/public/assets/images/logo.png index c0f557d56..545d33efc 100644 Binary files a/public/assets/images/logo.png and b/public/assets/images/logo.png differ diff --git a/public/assets/images/open.png b/public/assets/images/open.png new file mode 100644 index 000000000..1037e539b Binary files /dev/null and b/public/assets/images/open.png differ diff --git a/public/assets/images/p.jpeg b/public/assets/images/p.jpeg new file mode 100644 index 000000000..f51d6e5d6 Binary files /dev/null and b/public/assets/images/p.jpeg differ diff --git a/public/assets/images/product1.jpg b/public/assets/images/product1.jpg index 2474eae99..16268f2e3 100644 Binary files a/public/assets/images/product1.jpg and b/public/assets/images/product1.jpg differ diff --git a/public/assets/images/product2.jpg b/public/assets/images/product2.jpg index 7353ad0aa..dd00a5a64 100644 Binary files a/public/assets/images/product2.jpg and b/public/assets/images/product2.jpg differ diff --git a/public/assets/images/team.png b/public/assets/images/team.png new file mode 100644 index 000000000..042cb6db0 Binary files /dev/null and b/public/assets/images/team.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png index 1dc780e95..45809d02a 100755 Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png index e6f32886f..fa6e2df6a 100755 Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 493db5697..506e0c2b5 100755 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 000000000..45dc8a206 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/src/components/About.tsx b/src/components/About.tsx index 6c513fd80..67b11442e 100644 --- a/src/components/About.tsx +++ b/src/components/About.tsx @@ -3,90 +3,66 @@ import React from 'react'; import config from '../config/index.json'; const About = () => { - const { company, about } = config; - const { logo, name: companyName } = company; - const { socialMedia, sections } = about; + const { about } = config; + const [firstItem, secondItem] = about.items; return ( -
-
-
- {companyName} -
-
- {sections.map((section, index) => ( - +
+

+ {about.title.split(' ').map((word, index) => ( + - {section.name} - + {word}{' '} + ))} +

+
+
+

+ {firstItem?.title} +

+

{firstItem?.description}

+
+
+ {firstItem?.title} +
-
- - - - - - - - - - +
+
+ {secondItem?.title} +
+
+
+

+ {secondItem?.title} +

+

{secondItem?.description}

+
+
+
+
+ Get in touch with us at - - - + focus@focuslabs.io
-
-

- © {new Date().getFullYear()} designed by{' '} - - Issaaf Kattan - -

-
-
+ ); }; + export default About; diff --git a/src/components/Features.tsx b/src/components/Features.tsx index f298ca118..fad3151cb 100644 --- a/src/components/Features.tsx +++ b/src/components/Features.tsx @@ -10,7 +10,7 @@ const Features = () => {

{title}

@@ -28,7 +28,7 @@ const Features = () => {
{ return ( <> { logo
- + Open main menu @@ -47,9 +45,9 @@ const Menu = () => {
{navigation.map((item) => ( { ))} - Call to action + {callToAction.text}
@@ -81,17 +79,13 @@ const Menu = () => { focus className="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden" > -
+
- + Close main menu @@ -100,9 +94,9 @@ const Menu = () => {
{navigation.map((item) => ( { ))}
{callToAction.text} diff --git a/src/components/MainHero.tsx b/src/components/MainHero.tsx index efffd8900..56233992c 100644 --- a/src/components/MainHero.tsx +++ b/src/components/MainHero.tsx @@ -9,7 +9,7 @@ const MainHero = () => {

{mainHero.title}{' '} - + {mainHero.subtitle}

@@ -20,7 +20,7 @@ const MainHero = () => {
{mainHero.primaryAction.text} @@ -28,7 +28,7 @@ const MainHero = () => {
{mainHero.secondaryAction.text} diff --git a/src/components/Pricing.tsx b/src/components/Pricing.tsx index fe7070ad8..0e05a07a9 100644 --- a/src/components/Pricing.tsx +++ b/src/components/Pricing.tsx @@ -5,37 +5,27 @@ import config from '../config/index.json'; const Pricing = () => { const { pricing } = config; const { items, title } = pricing; - const [firstPlan, secondPlan, thirdPlan] = items; + const [firstPlan, secondPlan] = items; return ( -
-
-

+
+
+

{title}

-
-
+
+
-
-
-
-
+
+
+
+
{firstPlan?.name}
-
    +
      {firstPlan?.features.map((feature) => (
    • {feature} @@ -43,33 +33,23 @@ const Pricing = () => { ))}
-
-
+
+
{firstPlan?.price} - {firstPlan?.priceDetails} + {firstPlan?.priceDetails}
-
-
-
+
+
+
{secondPlan?.name}
-
-
    +
    +
      {secondPlan?.features.map((feature) => (
    • {feature} @@ -77,43 +57,10 @@ const Pricing = () => { ))}
-
-
+
+
{secondPlan?.price} - {secondPlan?.priceDetails} -
-
-
-
-
-
- {thirdPlan?.name} -
-
    - {thirdPlan?.features.map((feature) => ( -
  • - {feature} -
    • - ))} -
-
-
-
- {thirdPlan?.price} - {thirdPlan?.priceDetails} + {secondPlan?.priceDetails}
diff --git a/src/components/Product.tsx b/src/components/Product.tsx index 22c4613f9..0a91c212d 100644 --- a/src/components/Product.tsx +++ b/src/components/Product.tsx @@ -11,12 +11,12 @@ const Product = () => {

{product.title.split(' ').map((word, index) => ( {word}{' '} diff --git a/src/components/Wave.tsx b/src/components/Wave.tsx index ce3dd3982..e8566075a 100644 --- a/src/components/Wave.tsx +++ b/src/components/Wave.tsx @@ -10,8 +10,8 @@ const Wave: FC = () => { const height = 600; let frequency = 0.013; const waves = { - frontWave: new WaveObj([0.0211, 0.028, 0.015], 'rgb(236, 71, 85, 0.1)'), - backWave: new WaveObj([0.0122, 0.018, 0.005], 'rgb(249, 168, 168, 0.1)'), + frontWave: new WaveObj([0.0211, 0.028, 0.015], 'rgb(160, 145, 253, 0.1)'), + backWave: new WaveObj([0.0122, 0.018, 0.005], 'rgb(124, 109, 251, 0.1)'), }; const render = () => { diff --git a/src/config/index.json b/src/config/index.json index d13cbad96..32e47fe67 100644 --- a/src/config/index.json +++ b/src/config/index.json @@ -1,6 +1,6 @@ { "company": { - "name": "React landing page 2021", + "name": "Focus", "logo": "/assets/images/logo.png" }, "navigation": [ @@ -23,62 +23,72 @@ } ], "callToAction": { - "text": "Get started", - "href": "#" + "text": "Demo", + "href": "https://drive.google.com/file/d/10YMAaYWrqMWCJkWQ5CmAeoVODPTUisms/view?resourcekey" }, "mainHero": { - "title": "Use me as your", - "subtitle": "landing page.", - "description": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.", + "title": "Making AI Devices for", + "subtitle": "Smart Business", + "description": "We are pioneering the future of IoT by embedding artificial intelligence at the core of everyday devices. Our mission is to transform passive devices into smart systems that not only collect data but also make intelligent decisions in real-time, enhancing efficiency and user experiences across various industries.", "img": "/assets/images/happyTeam.jpeg", "primaryAction": { - "text": "Get started", - "href": "#" + "text": "Watch Demo", + "href": "https://drive.google.com/file/d/10YMAaYWrqMWCJkWQ5CmAeoVODPTUisms/view?resourcekey" }, "secondaryAction": { "text": "Email us", - "href": "mailto:issaafakattan@gmail.com?subject=I like react landing page!" + "href": "mailto:kpandya8@asu.edu?subject=RE: Interested in Learning More About Focus AI" } }, "product": { - "title": "React landing page 2021", + "title": "Focus AI", "items": [ { - "title": "A plug n play template", - "description": "Just edit the config.json file with details about your company and voila your beautiful state of the art landing page is ready to go live! Remember to also update your assets, add any images you want to show to /assets/images and link them in the config.json", + "title": "Smart AI Powerd Device", + "description": "An AI powered device that transcribes conversations to provide insights and streamline workflows, enhancing efficiency in daily life and business.", "img": "/assets/images/product1.jpg" }, { "title": "Make it your own!", - "description": "Play around with the theme.ts file and configure the color palette to match the branding of your company! If you're feeling wild, maybe change some tailwind css as well!", + "description": "Utilizing an open-source system, our AI-based smart device empowers you to explore and create a broader range of applications that cater your requirenments, enhancing functionality and overall experience.", "img": "/assets/images/product2.jpg" } ] }, "features": { - "title": "Latest & greatest ", - "subtitle": "All the best technologies out there!", - "description": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.", + "title": "The Next Generation of Computing", + "subtitle": "Future of Computing = AI + IoT + Spatial Computing", + "description": "Our modular AI devices are designed to seamlessly interconnect, creating a robust ecosystem that adapts to and learns from human actions. By pioneering the concept of Large Action Models (LAMs), we aim to not only understand and execute tasks based on user interactions but also to expand into the realm of spatial computing, paving the way for more intuitive and immersive experiences.", "items": [ { - "name": "React.js", - "description": "React is a free and open-source front-end JavaScript library for building user interfaces or UI components.", - "icon": "/assets/images/react.png" + "name": "Integration ", + "description": "Seamlessly connects with tools like Slack, Notion, Jira, Zoom, Airtable, Trello, etc.", + "icon": "/assets/images/integration.png" }, { - "name": "Tailwind", - "description": "Tailwind CSS is a highly customizable, low-level CSS framework for quickly creating beautiful designs without any annoying opinionated stylesheet nonsense.", - "icon": "/assets/images/tailwindcss.svg" + "name": "Automation ", + "description": "Executes tasks efficiently on command", + "icon": "/assets/images/automation.png" }, { - "name": "Next.js", - "description": "Next.js is a framework for server-rendered React applications using Next.js.", - "icon": "/assets/images/nextjs.svg" + "name": "Accessibility ", + "description": "Enhances productivity with easy-to-use interfaces.", + "icon": "/assets/images/accesibility.png" }, { - "name": "Typescript", - "description": "TypeScript is a programming language developed and maintained by Microsoft.", - "icon": "/assets/images/ts.png" + "name": "Economical", + "description": "Customization options that reduce costs and optimize functionality", + "icon": "/assets/images/affordable.png" + }, + { + "name": "Flexibility", + "description": "Platform-agnostic, offering choice in LLM provider and integrations", + "icon": "/assets/images/flexibility.png" + }, + { + "name": "Open-Source", + "description": "Empowers developers to expand and innovate with more use-cases.", + "icon": "/assets/images/open.png" } ] }, @@ -86,68 +96,44 @@ "title": "Pricing", "items": [ { - "name": "Free", - "price": "$0", - "priceDetails": "for one user", + "name": "Device", + "price": "$45", + "priceDetails": "per unit", "features": [ - "1 user", - "Basic Support", - "1 GB of storage", - "Email support" + "1 Unit", + "Dimensions (2 x 3 x 1) inches ", + "Spatial Recording Supported", + "Weight: 30 grams", + "12 Hours per charge", + "1 Year Warranty", + "24 x 7 Support" ] }, { - "name": "Pro", - "price": "$15", - "priceDetails": "per user", + "name": "AI Plan", + "price": "$0.25", + "priceDetails": "per hour", "features": [ - "5 users", - "Priority Support", - "10 GB of storage", - "Phone and Email support" - ] - }, - { - "name": "Enterprise", - "price": "$29", - "priceDetails": "per user", - "features": [ - "50 users", - "24/7 Support", - "100 GB of storage", - "Phone and Email support" + "Unlimited AI processing", + "10+ integrations", + "16 GB of storage", + "Advanced Analytics", + "Custom AI Applications", + "24 x 7 Troubleshoot", + "Open-Source support" ] } ] }, "about": { - "sections": [ - { - "name": "Something", - "href": "#", - "content": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English." - }, - { - "name": "Something", - "href": "#", - "content": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English." - }, - { - "name": "Something", - "href": "#", - "content": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English." - }, + "title": "Dream Team", + "items": [ { - "name": "Something", - "href": "#", - "content": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English." + "title": "Student Venture", + "description": "This project is the ideation of the brightest minds from Luminosity Labs at Arizona State University, an interdisciplinary lab. Our team comprises nine students from engineering, marketing, and manufacturing. Our goal is to become pioneers in future computing.", + "img": "/assets/images/team.png" } - ], - "socialMedia": { - "github": "https://github.com/issaafalkattan", - "twitter": "https://twitter.com/issaafkattan", - "linkedin": "https://www.linkedin.com/in/issaaf-kattan/" - } + ] } } diff --git a/src/styles/main.css b/src/styles/main.css index 07481babb..68ed7ba24 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -4,17 +4,17 @@ :root { - --color-primary: #ec4755; - --color-secondary: #a12c34; - --color-tertiaty: #99a0a3; + --color-primary: #8A53E1; + --color-secondary: #AD91FD; + --color-tertiaty: #6BA1FB; } a { - @apply text-red-700; + @apply text-purple-300; } a:hover { - @apply border-b-2 border-red-700; + @apply border-b-2 border-purple-400; }