Merge pull request #30 from knowlyai/feature/how-knowly-works

Feature - Second home page version with "How Knowly Works" section

Author: enzosakamoto

package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-react": "^0.13.5",
     "@tailwindcss/vite": "^4.1.5",
     "@tanstack/react-query": "^5.75.1",
     "axios": "^1.9.0",

package.json

@@ -3,6 +3,7 @@ import { Background } from '@/shared/components/background'
 import { Layout } from '@/shared/components/layout'
 import { motion } from 'framer-motion'
 import { Button } from '@/shared/components/button'
+import { DotLottieReact } from '@lottiefiles/dotlottie-react'
 
 function BackgroundBlobs() {
   return (
@@ -100,11 +101,58 @@ export function HomePage() {
             </a>
           </div>
         </motion.section>
-        <section className="flex h-screen items-center justify-center">
-          <h1>How Knowly works</h1>
-          <div></div>
-          <div></div>
-          <div></div>
+
+        <section
+          id="how-knowly-works"
+          className="flex h-screen flex-col items-center justify-center"
+        >
+          <h1 className="text-6xl font-semibold">How Knowly Works</h1>
+          <div className="flex w-full max-w-6xl justify-between gap-8">
+            {/* Parte da Esquerda */}
+            <div className="flex flex-col items-center">
+              <div className="h-100 w-100">
+                <DotLottieReact
+                  src="https://lottie.host/ade48407-0fab-452b-8257-6bde53c7dc0c/QXs4qptUZD.lottie"
+                  loop
+                  autoplay
+                />
+              </div>
+              <h1 className="mb-4 text-3xl font-semibold">You Upload</h1>
+              <p className="text-center text-xl break-words text-white/50">
+                Upload the PDF files you wish to make up the knowledge base
+              </p>
+            </div>
+            {/* Parte do Meio */}
+            <div className="flex flex-col items-center">
+              <div className="h-100 w-100">
+                <DotLottieReact
+                  src="https://lottie.host/e10d7ded-6bde-4049-afd0-1d902c61d1d2/oSwowUt9Qm.lottie"
+                  loop
+                  autoplay
+                  segment={[70, 278]}
+                />
+              </div>
+              <h1 className="mb-4 text-3xl font-semibold">We Build</h1>
+              <p className="text-center text-xl break-words text-white/50">
+                We use the files to train a Gen AI model
+              </p>
+            </div>
+
+            {/* Parte da Direita */}
+            <div className="flex flex-col items-center">
+              <div className="h-100 w-100">
+                <DotLottieReact
+                  src="https://lottie.host/e84fe9c7-0ada-4dcb-a6c0-3e5ae46e1354/GgsWdQCrtV.lottie"
+                  loop
+                  autoplay
+                />
+              </div>
+              <h1 className="mb-4 text-3xl font-semibold">You Enjoy</h1>
+              <p className="text-center text-xl break-words text-white/50">
+                After the model is done, you can try it and use it as you wish
+              </p>
+            </div>
+          </div>
         </section>
         <section className="flex h-screen items-center justify-center">
           <h1>Pricing</h1>

src/features/home/pages/home-page.tsx

@@ -21,7 +21,7 @@ export function Navbar() {
           <p className="text-lg">Knowly</p>
         </div>
         <div className="flex items-center gap-8">
-          <a href="">Our product</a>
+          <a href="#how-knowly-works">Our product</a>
           <a href="">About us</a>
           <a href="">Pricing</a>
           <a href="">FAQ</a>

src/shared/components/navbar.tsx

@@ -22,3 +22,7 @@
   --color-blue-80: #8048a4;
   --color-blue-100: #5a3374;
 }
+
+html {
+  scroll-behavior: smooth;
+}