Merge pull request #1 from Chefies/feat/image-change

Feat/image change and download link
Chefies · Jun 20, 2024 · 30cb43d · 30cb43d
2 parents 04d9b5e + 12f36d7
commit 30cb43d
Show file tree

Hide file tree

Showing 18 changed files with 58 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html class="scroll-smooth" lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/chefies.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Chefies</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/chefies.png b/public/chefies.png
diff --git a/src/assets/edit-password.png b/src/assets/edit-password.png
diff --git a/src/assets/edit-profile.png b/src/assets/edit-profile.png
diff --git a/src/assets/get-suggestions.png b/src/assets/get-suggestions.png
diff --git a/src/assets/login.png b/src/assets/login.png
diff --git a/src/assets/logout.png b/src/assets/logout.png
diff --git a/src/assets/register.png b/src/assets/register.png
diff --git a/src/assets/save-recipes.png b/src/assets/save-recipes.png
diff --git a/src/assets/settings.png b/src/assets/settings.png
diff --git a/src/assets/splash.png b/src/assets/splash.png
diff --git a/src/assets/take-photo.png b/src/assets/take-photo.png
diff --git a/src/assets/unavailable.png b/src/assets/unavailable.png
diff --git a/src/assets/verify-ingredients.png b/src/assets/verify-ingredients.png
diff --git a/src/assets/what-ingredients.png b/src/assets/what-ingredients.png
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
@@ -1,5 +1,8 @@
 import { useState } from "react";
-import phoneImage from "../assets/phone.png";
+import takePhotoImage from "../assets/take-photo.png";
+import verifyIngredientsImage from "../assets/verify-ingredients.png";
+import getSuggestionsImage from "../assets/get-suggestions.png";
+import saveRecipesImage from "../assets/save-recipes.png";
 import Step from "./Step";
 import { LuChevronLeftCircle, LuChevronRightCircle } from "react-icons/lu";
 
@@ -15,20 +18,36 @@ function Features() {
 
         {currentIdx == 0 && (
           <Step
-            image={phoneImage}
+            image={takePhotoImage}
             description="Take a picture of your ingredients"
           />
         )}
 
         {currentIdx == 1 && (
           <Step
-            image={phoneImage}
-            description="Find healthy recipes for available ingredients"
+            image={verifyIngredientsImage}
+            description="Verify detected ingredients"
             className={currentIdx == 1 ? "opacity-100" : "opacity-0"}
           />
         )}
+
+        {currentIdx == 2 && (
+          <Step
+            image={getSuggestionsImage}
+            description="Find healthy recipes for available ingredients"
+            className={currentIdx == 2 ? "opacity-100" : "opacity-0"}
+          />
+        )}
+
+        {currentIdx == 3 && (
+          <Step
+            image={saveRecipesImage}
+            description="Save interesting recipes"
+            className={currentIdx == 3 ? "opacity-100" : "opacity-0"}
+          />
+        )}
 
-        <button onClick={() => setIdx(Math.min(currentIdx + 1, 1))}>
+        <button onClick={() => setIdx(Math.min(currentIdx + 1, 3))}>
           <LuChevronRightCircle className="w-12 h-12" />
         </button>
       </div>

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -1,11 +1,11 @@
-import { IoMdDownload } from "react-icons/io";
-import phoneImage from "../assets/phone.png";
+import { IoLogoAndroid } from "react-icons/io";
+import phoneImage from "../assets/what-ingredients.png";
 
 function Hero() {
   return (
     <div className="flex md:flex-row-reverse flex-col justify-center gap-16 mx-auto">
       <div className="p-4 drop-shadow-xl mx-auto">
-        <img src={phoneImage} className="h-[60vh]" />
+        <img src={phoneImage} alt="Hai Chef, what ingredients do you have today?" className="h-[60vh]" />
       </div>
 
       <div className="flex flex-col md:justify-center md:text-end uppercase gap-4 max-w-lg">
@@ -15,9 +15,14 @@ function Hero() {
           healthy recipes with the ingredients you have, we got it covered!
         </p>
         <p>Powered by AI.</p>
-        <button className="bg-primary text-white px-16 py-4 w-fit rounded-2xl ml-auto uppercase flex gap-2 items-center justify-center">
-          <IoMdDownload className="w-6 h-6" />
-          <p className="pt-1 font-bold">Download</p>
+        <button
+          className="bg-primary text-white px-16 py-4 w-fit rounded-2xl ml-auto uppercase flex gap-2 items-center justify-center"
+          onClick={() => {
+            window.open("https://sendgb.com/jEgcfze9BtC", "_blank")
+          }}
+        >
+          <IoLogoAndroid className="w-6 h-6" />
+          <p className="pt-1 font-bold">Download APK</p>
         </button>
       </div>
     </div>

diff --git a/src/components/Screenshots.tsx b/src/components/Screenshots.tsx
@@ -1,19 +1,30 @@
 import Step from "./Step";
-import phoneImage from "../assets/phone.png";
+import splashImage from "../assets/splash.png";
+import loginImage from "../assets/login.png";
+import registerImage from "../assets/register.png";
+import takePhotoImage from "../assets/take-photo.png";
+import verifyImage from "../assets/verify-ingredients.png";
+import suggestionImage from "../assets/get-suggestions.png";
+import unavailableImage from "../assets/unavailable.png";
+import settingsImage from "../assets/settings.png";
+import editProfileImage from "../assets/edit-profile.png"
+import editPassword from "../assets/edit-password.png";
 
 function Screenshots() {
   return (
     <div className="flex flex-col gap-8 items-center">
       <h2 className="text-4xl uppercase text-center font-bold">Screenshots</h2>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 w-full gap-4 container place-items-center">
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
-        <Step image={phoneImage} />
+        <Step image={splashImage} />
+        <Step image={loginImage} />
+        <Step image={registerImage} />
+        <Step image={takePhotoImage} />
+        <Step image={verifyImage} />
+        <Step image={suggestionImage} />
+        <Step image={unavailableImage} />
+        <Step image={settingsImage} />
+        <Step image={editProfileImage} />
+        <Step image={editPassword} />
       </div>
     </div>
   );