Skip to content

Commit 4d48b1b

Browse files
JuliaGalhardiJuliaGalhardi
authored
Merge branch 'dev' into feature/about-us
2 parents cdf33b3 + 3350110 commit 4d48b1b

6 files changed

Lines changed: 211 additions & 7 deletions

File tree

‎package-lock.json‎

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@lottiefiles/dotlottie-react": "^0.13.5",
1314
"@tailwindcss/vite": "^4.1.5",
1415
"@tanstack/react-query": "^5.75.1",
1516
"axios": "^1.9.0",

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

Lines changed: 84 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,26 @@ import izabel from '@/assets/izabel.jfif'
88
import rubio from '@/assets/rubio.jfif'
99
import julia from '@/assets/julia.jfif'
1010
import sakamoto from '@/assets/Sakamoto.jfif'
11+
import { Accordion, AccordionItem } from '@/shared/components/accordion'
12+
import { DotLottieReact } from '@lottiefiles/dotlottie-react'
13+
14+
const faqs = [
15+
{
16+
title: 'What kind of file can I upload?',
17+
content:
18+
'Currently, you can upload PDF files. We are working on adding support for other file types in the future.'
19+
},
20+
{
21+
title: 'Can I create more than one model?',
22+
content:
23+
'Yes, you can create multiple models with different knowledge bases.'
24+
},
25+
{
26+
title: 'Do I need to code?',
27+
content:
28+
'No, you only need to upload the files and we take care of the rest.'
29+
}
30+
]
1131

1232
function BackgroundBlobs() {
1333
return (
@@ -105,11 +125,58 @@ export function HomePage() {
105125
</a>
106126
</div>
107127
</motion.section>
108-
<section className="flex h-screen items-center justify-center">
109-
<h1>How Knowly works</h1>
110-
<div></div>
111-
<div></div>
112-
<div></div>
128+
129+
<section
130+
id="how-knowly-works"
131+
className="flex h-screen flex-col items-center justify-center"
132+
>
133+
<h1 className="text-6xl font-semibold">How Knowly Works</h1>
134+
<div className="flex w-full max-w-6xl justify-between gap-8">
135+
{/* Parte da Esquerda */}
136+
<div className="flex flex-col items-center">
137+
<div className="h-100 w-100">
138+
<DotLottieReact
139+
src="https://lottie.host/ade48407-0fab-452b-8257-6bde53c7dc0c/QXs4qptUZD.lottie"
140+
loop
141+
autoplay
142+
/>
143+
</div>
144+
<h1 className="mb-4 text-3xl font-semibold">You Upload</h1>
145+
<p className="text-center text-xl break-words text-white/50">
146+
Upload the PDF files you wish to make up the knowledge base
147+
</p>
148+
</div>
149+
{/* Parte do Meio */}
150+
<div className="flex flex-col items-center">
151+
<div className="h-100 w-100">
152+
<DotLottieReact
153+
src="https://lottie.host/e10d7ded-6bde-4049-afd0-1d902c61d1d2/oSwowUt9Qm.lottie"
154+
loop
155+
autoplay
156+
segment={[70, 278]}
157+
/>
158+
</div>
159+
<h1 className="mb-4 text-3xl font-semibold">We Build</h1>
160+
<p className="text-center text-xl break-words text-white/50">
161+
We use the files to train a Gen AI model
162+
</p>
163+
</div>
164+
165+
{/* Parte da Direita */}
166+
<div className="flex flex-col items-center">
167+
<div className="h-100 w-100">
168+
<DotLottieReact
169+
src="https://lottie.host/e84fe9c7-0ada-4dcb-a6c0-3e5ae46e1354/GgsWdQCrtV.lottie"
170+
loop
171+
autoplay
172+
/>
173+
</div>
174+
<h1 className="mb-4 text-3xl font-semibold">You Enjoy</h1>
175+
<p className="text-center text-xl break-words text-white/50">
176+
After the model is done, you can try it and use it as you wish
177+
</p>
178+
</div>
179+
</div>
113180
</section>
114181
<section className="flex h-screen items-center justify-center">
115182
<h1>Pricing</h1>
@@ -174,6 +241,18 @@ export function HomePage() {
174241
Vinícius Berti
175242
</span>
176243
</div>
244+
<section
245+
id="faq"
246+
className="flex h-screen flex-col items-center justify-center"
247+
>
248+
<h1 className="mb-12 text-6xl font-semibold">FAQ</h1>
249+
<Accordion className="w-250">
250+
{faqs.map((faq, i) => (
251+
<AccordionItem key={i} title={faq.title}>
252+
{faq.content}
253+
</AccordionItem>
254+
))}
255+
</Accordion>
177256
</section>
178257
</Layout>
179258
</Background>

‎src/shared/components/accordion.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React, { useState, useRef, useEffect } from 'react'
2+
import { cn } from '../utils/cn'
3+
4+
export type AccordionItemProps = {
5+
title: string
6+
children: React.ReactNode
7+
defaultOpen?: boolean
8+
className?: string
9+
}
10+
11+
export const AccordionItem = React.forwardRef<
12+
HTMLDivElement,
13+
AccordionItemProps
14+
>(({ title, children, defaultOpen = false, className }, ref) => {
15+
const [isOpen, setIsOpen] = useState(defaultOpen)
16+
const contentRef = useRef<HTMLDivElement>(null)
17+
const [maxHeight, setMaxHeight] = useState<string>('0px')
18+
19+
useEffect(() => {
20+
if (contentRef.current) {
21+
const scrollHeight = contentRef.current.scrollHeight
22+
setMaxHeight(isOpen ? `${scrollHeight}px` : '0px')
23+
}
24+
}, [isOpen, children])
25+
26+
return (
27+
<div
28+
ref={ref}
29+
className={cn(
30+
'border-b border-white/10 py-4 transition-colors',
31+
className
32+
)}
33+
>
34+
<button
35+
onClick={() => setIsOpen(!isOpen)}
36+
className="flex w-full items-center justify-between text-left"
37+
>
38+
<svg
39+
className={cn(
40+
'h-6 w-6 transform transition-transform',
41+
isOpen ? 'rotate-45 text-white' : 'text-white/80'
42+
)}
43+
fill="none"
44+
stroke="currentColor"
45+
viewBox="0 0 24 24"
46+
xmlns="http://www.w3.org/2000/svg"
47+
>
48+
<path
49+
strokeLinecap="round"
50+
strokeLinejoin="round"
51+
strokeWidth={2}
52+
d="M12 4v16m8-8H4"
53+
/>
54+
</svg>
55+
<span
56+
className={cn(
57+
'ml-2 flex-1 text-left font-semibold transition-colors',
58+
isOpen ? 'text-white' : 'text-white/80'
59+
)}
60+
>
61+
{title}
62+
</span>
63+
</button>
64+
65+
<div
66+
ref={contentRef}
67+
style={{ maxHeight }}
68+
className="transition-max-height overflow-hidden duration-300 ease-in-out"
69+
>
70+
<div className="mt-2 font-medium text-white/70">{children}</div>
71+
</div>
72+
</div>
73+
)
74+
})
75+
76+
AccordionItem.displayName = 'AccordionItem'
77+
78+
export type AccordionProps = {
79+
children: React.ReactElement<AccordionItemProps>[]
80+
className?: string
81+
}
82+
83+
export const Accordion: React.FC<AccordionProps> = ({
84+
children,
85+
className
86+
}) => {
87+
return (
88+
<div
89+
className={cn(
90+
'w-full rounded-2xl bg-[#2c2c54]/60 p-6 shadow-lg backdrop-blur-md',
91+
className
92+
)}
93+
>
94+
{React.Children.map(children, (child, idx) =>
95+
React.cloneElement(child, {
96+
key: idx
97+
})
98+
)}
99+
</div>
100+
)
101+
}
102+
103+
Accordion.displayName = 'Accordion'

‎src/shared/components/navbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ export function Navbar() {
2121
<p className="text-lg">Knowly</p>
2222
</div>
2323
<div className="flex items-center gap-8">
24-
<a href="">Our product</a>
24+
<a href="#how-knowly-works">Our product</a>
2525
<a href="#about-us">About us</a>
2626
<a href="">Pricing</a>
27-
<a href="">FAQ</a>
27+
<a href="#faq">FAQ</a>
2828
<Button className="px-6">Login</Button>
2929
</div>
3030
</div>

‎src/shared/styles/global.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,7 @@
2222
--color-blue-80: #8048a4;
2323
--color-blue-100: #5a3374;
2424
}
25+
26+
html {
27+
scroll-behavior: smooth;
28+
}

0 commit comments

Comments
 (0)