Skip to content

Commit c00e198

Browse files
hi02102002hi02102002
authored
Merge pull request #71 from Dialogue-Bot/DIAL-42-implement-test-your-bot
feat: done landing page
2 parents 80f0464 + 2195d3b commit c00e198

File tree

11 files changed

+162
-11
lines changed

11 files changed

+162
-11
lines changed

‎client/src/components/layouts/publish/footer.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { LogoText } from '@/components/ui'
2+
import { Bot, FacebookIcon, GithubIcon, InstagramIcon } from 'lucide-react'
3+
import { useTranslation } from 'react-i18next'
4+
5+
const Footer = () => {
6+
const { t } = useTranslation('layout')
7+
return (
8+
<footer className='bg-blue-500 py-10 md:py-20 text-white'>
9+
<div className='container'>
10+
<div className='flex justify-between'>
11+
<div className='space-y-4 max-w-96'>
12+
<div className='flex items-center gap-1'>
13+
<Bot size={32} className='text-white' />
14+
<LogoText className='text-white text-xl' />
15+
</div>
16+
<p className='font-medium'>{t('public_layout.footer_subtitle')}</p>
17+
</div>
18+
<div className='flex flex-col gap-3'>
19+
<span className='font-medium'>
20+
{t('public_layout.footer_built_by')}
21+
</span>
22+
<div className='flex items-center gap-3'>
23+
<GithubIcon />
24+
<FacebookIcon />
25+
<InstagramIcon />
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</footer>
31+
)
32+
}
33+
34+
export default Footer

‎client/src/components/layouts/publish/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import Header from './header'
21
import { Outlet } from 'react-router-dom'
2+
import Footer from './footer'
3+
import Header from './header'
34

45
export const Layout = () => {
56
return (
67
<>
78
<Header />
89
<Outlet />
10+
<Footer />
911
</>
1012
)
1113
}

‎client/src/components/pages/landing-page/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './hero'
22
export * from './integrations'
3+
export * from './join-newsletter'
34
export * from './reviews'

‎client/src/components/pages/landing-page/integrations.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useGSAP } from '@gsap/react'
88
import gsap from 'gsap'
99
import { ScrollTrigger } from 'gsap/all'
1010
import { useRef } from 'react'
11+
import { useTranslation } from 'react-i18next'
1112
gsap.registerPlugin(ScrollTrigger)
1213

1314
const IMAGES = [google, gmail, line, messenger, earth]
@@ -17,6 +18,7 @@ export const Integrations = () => {
1718
const badgeRef = useRef<HTMLDivElement | null>(null)
1819
const h2Ref = useRef<HTMLHeadingElement | null>(null)
1920
const containerRef = useRef<HTMLDivElement | null>(null)
21+
const { t } = useTranslation('landingPage')
2022

2123
useGSAP(() => {
2224
const tl = gsap.timeline({
@@ -63,8 +65,7 @@ export const Integrations = () => {
6365
className='text-3xl md:text-5xl font-bold text-center max-w-2xl'
6466
ref={h2Ref}
6567
>
66-
Integrate with your existing tech stack{' '}
67-
<span className='text-primary'>in second</span>
68+
{t('integrations_title')}
6869
</h2>
6970
</div>
7071
<div className='relative rounded-full grid items-center justify-center gap-10 py-0 grid-cols-2 md:grid-cols-5'>

‎client/src/components/pages/landing-page/join-newsletter.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Button, Input } from '@/components/ui'
2+
import { useGSAP } from '@gsap/react'
3+
import gsap from 'gsap'
4+
import { ScrollTrigger } from 'gsap/all'
5+
import { useRef } from 'react'
6+
import { useTranslation } from 'react-i18next'
7+
gsap.registerPlugin(ScrollTrigger)
8+
export const JoinNewsletter = () => {
9+
const containerRef = useRef<HTMLDivElement | null>(null)
10+
const h2Ref = useRef<HTMLHeadingElement | null>(null)
11+
const pRef = useRef<HTMLParagraphElement | null>(null)
12+
const inputRef = useRef<HTMLDivElement | null>(null)
13+
const { t } = useTranslation(['landingPage', 'forms'])
14+
15+
useGSAP(() => {
16+
const tl = gsap.timeline({
17+
scrollTrigger: {
18+
trigger: containerRef.current,
19+
start: '-20% center',
20+
end: 'bottom bottom',
21+
scrub: 1,
22+
},
23+
})
24+
25+
tl.from(h2Ref.current, {
26+
opacity: 0,
27+
y: 50,
28+
duration: 0.5,
29+
ease: 'power3.out',
30+
})
31+
.from(pRef.current, {
32+
opacity: 0,
33+
y: 50,
34+
duration: 0.5,
35+
ease: 'power3.out',
36+
})
37+
.from(inputRef.current, {
38+
opacity: 0,
39+
y: 50,
40+
duration: 0.5,
41+
ease: 'power3.out',
42+
})
43+
}, [])
44+
45+
return (
46+
<div className='py-10 md:py-20 bg-white' ref={containerRef}>
47+
<div className='container'>
48+
<div className='flex items-center flex-col gap-10'>
49+
<div className='flex items-center justify-center flex-col gap-4'>
50+
<h2
51+
className='text-3xl md:text-5xl font-bold text-center max-w-2xl'
52+
ref={h2Ref}
53+
>
54+
{t('join_out_newsletter')}
55+
</h2>
56+
<p
57+
className='text-center font-medium text-sm md:text-lg text-muted-foreground'
58+
ref={pRef}
59+
>
60+
{t('join_out_newsletter_subtitle')}
61+
</p>
62+
</div>
63+
<div
64+
className='flex items-center justify-center gap-3'
65+
ref={inputRef}
66+
>
67+
<Input
68+
placeholder={t('forms:email.placeholder')}
69+
className='w-96'
70+
type='email'
71+
/>
72+
<Button>{t('join_out_newsletter_button')}</Button>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
)
78+
}
79+
80+
export default JoinNewsletter

‎client/src/components/pages/landing-page/reviews.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useGSAP } from '@gsap/react'
33
import gsap from 'gsap'
44
import { ScrollTrigger } from 'gsap/all'
55
import { useRef } from 'react'
6+
import { useTranslation } from 'react-i18next'
67
gsap.registerPlugin(ScrollTrigger)
78

89
const REVIEWS = [
@@ -45,6 +46,7 @@ export const Reviews = () => {
4546
const reviewsRef = useRef<HTMLDivElement>(null)
4647
const reviewItemsRef = useRef<HTMLDivElement[]>([])
4748
const pinRef = useRef<HTMLDivElement>(null)
49+
const { t } = useTranslation('landingPage')
4850

4951
useGSAP(() => {
5052
const tl = gsap.timeline({
@@ -53,7 +55,6 @@ export const Reviews = () => {
5355
start: '-10% center',
5456
end: 'bottom bottom',
5557
scrub: 1,
56-
markers: true,
5758
},
5859
})
5960

@@ -95,11 +96,13 @@ export const Reviews = () => {
9596
className='text-3xl md:text-5xl font-bold text-center max-w-2xl mx-auto'
9697
ref={h2Ref}
9798
>
98-
What our customers are saying
99+
{t('what_people_say_title')}
99100
</h2>
100-
<p ref={pRef} className='text-center font-medium text-lg'>
101-
Discover how our customers are using our chatbot builder to grow
102-
their businesses.
101+
<p
102+
ref={pRef}
103+
className='text-center font-medium text-sm md:text-lg text-muted-foreground'
104+
>
105+
{t('what_people_say_subtitle')}
103106
</p>
104107
</div>
105108

‎client/src/locales/en/landing-page.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
{
22
"start_now": "Start now",
33
"hero_title": "Build <AIChatbots/> that actually work 🚀",
4-
"hero_subtitle": "Create meaningful conversations with your customers while delivering a personalized experience."
4+
"hero_subtitle": "Create meaningful conversations with your customers while delivering a personalized experience.",
5+
"integrations_title": "Integrate with your existing tech stack in second",
6+
"what_people_say_title": "What our customers are saying",
7+
"what_people_say_subtitle": "Discover how our customers are using our chatbot builder to grow their businesses.",
8+
"join_out_newsletter": "Join our newsletter",
9+
"join_out_newsletter_subtitle": "Discover how our customers are using our chatbot builder to grow their businesses.",
10+
"footer_subtitle": "DialogBot is a platform that allows you to create and publish chatbots for your website.",
11+
"footer_built_by": "Built with ❤️ by Hoang Huy, Van Khanh",
12+
"join_out_newsletter_button": "Subscribe"
513
}

‎client/src/locales/en/layout.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,9 @@
22
"auth_layout": {
33
"title": "Right answers in a flash",
44
"subtitle": "Much faster than comparable solutions, replies immediately, and hosts human-like conversations."
5+
},
6+
"public_layout": {
7+
"footer_subtitle": "DialogBot is a platform that allows you to create and publish chatbots for your website.",
8+
"footer_built_by": "Built with ❤️ by Hoang Huy, Van Khanh"
59
}
610
}

‎client/src/locales/vi/landing-page.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
{
22
"start_now": "Bắt đầu ngay",
33
"hero_title": "Xây dựng <AIChatbots/> điều đó thực sự hiệu quả",
4-
"hero_subtitle": "Tạo các cuộc trò chuyện có ý nghĩa với khách hàng của bạn đồng thời mang lại trải nghiệm được cá nhân hóa."
4+
"hero_subtitle": "Tạo các cuộc trò chuyện có ý nghĩa với khách hàng của bạn đồng thời mang lại trải nghiệm được cá nhân hóa.",
5+
"integrations_title": "Tích hợp với những công cụ hiện có của bạn trong giây lát",
6+
"what_people_say_title": "Khách hàng của chúng tôi nói gì",
7+
"what_people_say_subtitle": "Khám phá cách khách hàng sử dụng công cụ xây dựng chatbot của chúng tôi để phát triển doanh nghiệp của họ.",
8+
"join_out_newsletter": "Tham gia bản tin của chúng tôi",
9+
"join_out_newsletter_subtitle": "Nhận thông tin mới nhất về công nghệ chatbot và cách sử dụng chúng để phát triển doanh nghiệp của bạn.",
10+
"footer_subtitle": "DialogBot là một nền tảng cho phép bạn tạo và xuất bản chatbot cho trang web của mình.",
11+
"footer_built_by": "Xây dựng bởi Hoang Huy, Van Khanh",
12+
"join_out_newsletter_button": "Đăng ký ngay"
513
}

‎client/src/locales/vi/layout.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,9 @@
22
"auth_layout": {
33
"title": "Câu trả lời chính xác",
44
"subtitle": "Nhanh hơn nhiều so với các giải pháp tương đương, trả lời ngay lập tức và tổ chức các cuộc trò chuyện giống như con người."
5+
},
6+
"public_layout": {
7+
"footer_subtitle": "DialogBot là một nền tảng cho phép bạn tạo và xuất bản chatbot cho trang web của mình.",
8+
"footer_built_by": "Xây dựng bởi Hoang Huy, Van Khanh"
59
}
610
}

0 commit comments

Comments
 (0)