Skip to content

Commit 19d7c1f

Browse files
wlee261wlee261
committed
fix: take latest main
2 parents c2d20b3 + 91e6c4a commit 19d7c1f

File tree

10 files changed

+88
-209
lines changed

10 files changed

+88
-209
lines changed

‎package.json

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,12 @@
2323
"@typescript-eslint/eslint-plugin": "^5.60.1",
2424
"@vitejs/plugin-react": "^4.2.1",
2525
"file-saver": "^2.0.5",
26-
"i18next-browser-languagedetector": "^8.0.0",
27-
"i18next-http-backend": "^2.6.1",
2826
"jszip": "^3.10.1",
2927
"lucide-react": "^0.376.0",
3028
"prop-types": "^15.8.1",
3129
"react": "^18.2.0",
3230
"react-chatbotify": "^2.0.0-beta.3",
3331
"react-dom": "^18.2.0",
34-
"react-i18next": "^15.0.1",
3532
"react-loading-skeleton": "^3.4.0",
3633
"react-router-dom": "^6.2.2",
3734
"uuid": "^9.0.1",

‎src/assets/images/LandingPage/theme-1.png

54.4 KB
Loading

‎src/assets/images/LandingPage/theme-2.png

17 KB
Loading

‎src/assets/images/LandingPage/theme-3.png

69 KB
Loading

‎src/assets/images/LandingPage/theme-4.png

84 KB
Loading

‎src/components/LandingPage/HeroSection.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Link } from "react-router-dom";
2+
3+
export default function HeroSection() {
4+
return (
5+
<div className='py-[57px] flex items-center gap-3 justify-center flex-col px-5'>
6+
<h1 className='text-accent-600 text-lg sm:text-xl font-semibold'>React ChatBotify</h1>
7+
<h2 className='text-accent-900 font-bold text-3xl sm:text-5xl'>Theme Gallery</h2>
8+
<h3 className='text-accent-600 sm:text-base text-sm text-center w-[250px]'>
9+
Browse, rate and share themes for your chatbot today and more!
10+
</h3>
11+
<div className="flex mt-6 flex-col items-center sm:flex-row gap-2">
12+
13+
14+
<Link to={"/themes"}>
15+
<button className='bg-accent-900 hover:bg-gradient-to-r hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 transition-colors duration-300 hover:text-accent-900 sm:px-4 sm:py-2 sm:text-lg rounded-lg'>
16+
Themes
17+
</button>
18+
</Link>
19+
<Link to={"/plugins"}>
20+
<button className='bg-accent-900 hover:bg-gradient-to-r hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 transition-colors duration-300 hover:text-accent-900 sm:px-4 sm:py-2 sm:text-lg rounded-lg'>
21+
Plugins
22+
</button>
23+
</Link>
24+
<Link to={"https://react-chatbotify.com"}>
25+
<button className='bg-accent-900 hover:bg-gradient-to-r hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 transition-colors duration-300 hover:text-accent-900 sm:px-4 sm:py-2 sm:text-lg rounded-lg'>
26+
Documentation
27+
</button>
28+
</Link>
29+
</div>
30+
</div>
31+
)
32+
}
33+

‎src/components/LandingPage/ImageHeroSection.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import img1 from './../../assets/images/LandingPage/theme-1.png'
2+
import img2 from './../../assets/images/LandingPage/theme-2.png'
3+
import img3 from './../../assets/images/LandingPage/theme-3.png'
4+
import img4 from './../../assets/images/LandingPage/theme-4.png'
5+
export default function ImageHeroSection() {
6+
return (
7+
<div className='flex justify-center gap-6'>
8+
<img src={img1} className='w-[127px] h-[120px] -rotate-6 rounded-lg bg-cover' />
9+
<img src={img2} className='w-[127px] h-[120px] rotate-6 rounded-lg bg-cover' />
10+
<img src={img3} className='w-[127px] h-[120px] -rotate-6 rounded-lg bg-cover' />
11+
<img src={img4} className='w-[127px] h-[120px] rotate-6 rounded-lg bg-cover' />
12+
</div>
13+
)
14+
}
15+

‎src/components/NavigationBar/NavigationBar.tsx

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState } from 'react';
1+
import { useEffect, useRef, useState } from 'react';
22
import { Link, useNavigate } from 'react-router-dom';
33

44
import { handleLogin } from '../../services/authService';
@@ -21,6 +21,8 @@ type DropdownProps = {
2121
/**
2222
* Navigation bar for users to navigate between pages.
2323
*/
24+
25+
const navBarClass = "sticky top-0 w-full z-50 text-white py-2 px-6 flex justify-between items-center"
2426
const NavigationBar = () => {
2527
// context for handling user data
2628
const { isLoggedIn, setIsLoggedIn, setUserData } = useAuth()
@@ -35,6 +37,21 @@ const NavigationBar = () => {
3537
setMenuOpen(!menuOpen)
3638
}
3739

40+
41+
const navbarRef = useRef<HTMLDivElement>(null)
42+
43+
useEffect(function(){
44+
window.addEventListener('scroll',function(e){
45+
if(navbarRef.current) {
46+
if(window.scrollY >= 50) {
47+
navbarRef.current.className = navBarClass + ' opacity-80 bg-black'
48+
} else {
49+
navbarRef.current.className = navBarClass
50+
}
51+
}
52+
})
53+
},[])
54+
3855
const { t, i18n } = useTranslation();
3956

4057
const changeLanguage = (lang: string) => {
@@ -76,21 +93,20 @@ const NavigationBar = () => {
7693

7794
return (
7895
<nav
79-
className="sticky top-0 w-full z-50 opacity-80 bg-black
80-
text-white py-2 px-6 flex justify-between items-center"
96+
className={navBarClass}
8197
style={{ height: '8vh' }}
98+
ref={navbarRef}
8299
>
83-
<Link to="/" className="flex items-center">
100+
<Link to="/">
84101
{' '}
85102
{/* Wrap logo and title with Link */}
86103
<img src={logo} alt="Logo" className="w-8 h-8 mr-2" />
87-
<h1 className="text-lg font-bold">{SiteConfig.siteName}</h1>
88104
</Link>
89105

90106
<div className="relative">
91107
<button
92108
onClick={toggleMenu}
93-
className="block md:hidden"
109+
className="block lg:hidden"
94110
type="button"
95111
aria-label="Menu"
96112
>
@@ -238,7 +254,7 @@ const NavigationBar = () => {
238254
)}
239255
</div>
240256

241-
<ul className="hidden md:flex pr-20">
257+
<ul className="hidden lg:flex pr-20">
242258
{/* needs improvement */}
243259
<li className="mr-8">
244260
<Link to="/about" className="hover:text-blue-500">

‎src/pages/Home.tsx

Lines changed: 16 additions & 198 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,16 @@ import { handleLogin } from '../services/authService';
44
import { useAuth } from '../context/AuthContext';
55
import { SiteConfig } from '../constants/SiteConfig';
66
import logo from "../assets/images/logo.png";
7+
8+
import { Button } from 'react-chatbotify';
9+
import HeroSection from '../components/LandingPage/HeroSection';
10+
11+
import NavigationBar from '../components/NavigationBar/NavigationBar';
12+
import ImageHeroSection from '../components/LandingPage/ImageHeroSection';
13+
714
import { useTranslation } from 'react-i18next';
815

16+
917
/**
1018
* Greets user as they visit the home (landing) page.
1119
*/
@@ -20,206 +28,16 @@ const HomePage = () => {
2028
const navigate = useNavigate()
2129

2230
return (
23-
<div className="relative bg-black text-white min-h-screen flex">
24-
<div className="md:w-1/2 flex flex-col justify-center items-center p-10 fade-down">
25-
<h1
26-
id="title"
27-
className="text-6xl font-bold text-center leading-tight mb-4"
28-
>
29-
Welcome to <br className="md:hidden" /> {SiteConfig.siteName}
30-
</h1>
31-
{isLoggedIn ? (
32-
<p id="subtitle" className="text-lg text-center mb-8">
33-
It&apos;s good to see you, {userData?.name}!
34-
</p>
35-
) : (
36-
<p id="subtitle" className="text-lg text-center mb-8">
37-
Browse, rate and share themes for your chatbot today!
38-
</p>
39-
)}
40-
<div className="flex justify-center">
41-
{!isLoggedIn && (
42-
<button
43-
type="button"
44-
className="bg-white text-black px-6 py-3 rounded-md mr-4
45-
hover:bg-blue-500 transition-colors duration-300"
46-
onClick={() => {
47-
handleLogin('/themes')
48-
}}
49-
>
50-
Login
51-
</button>
52-
)}
53-
<button
54-
type="button"
55-
className="border border-white px-6 py-3 rounded-md
56-
hover:bg-purple-800 transition-colors duration-300"
57-
onClick={() => navigate('/themes')}
58-
>
59-
Browse Themes
60-
</button>
61-
</div>
62-
{/* todo: add logos to link to documentation, github, discord etc */}
63-
64-
<div className="mt-5 w-40 h-16 flex items-center flex-row gap-4 justify-center">
65-
<Link to="https://github.com/tjtanjin/react-chatbotify">
66-
<svg
67-
className="fill-white w-8 hover:fill-blue-500 transition-colors duration-300"
68-
width="35px"
69-
height="35px"
70-
viewBox="0 0 24.00 24.00"
71-
fill="#fff"
72-
xmlns="http://www.w3.org/2000/svg"
73-
stroke="#fff"
74-
>
75-
<g id="SVGRepo_bgCarrier" strokeWidth="0" />
76-
<g
77-
id="SVGRepo_tracerCarrier"
78-
strokeLinecap="round"
79-
strokeLinejoin="round"
80-
/>
81-
<g id="SVGRepo_iconCarrier">
82-
{' '}
83-
<path
84-
d="M9.29183 21V18.4407L9.3255 16.6219C9.36595 16.0561 9.58639 15.5228 9.94907
85-
15.11C9.95438 15.1039 9.95972 15.0979 9.9651 15.0919C9.9791 15.0763 9.96988
86-
15.0511 9.94907 15.0485V15.0485C7.52554 14.746 5.0005 13.7227 5.0005
87-
9.26749C4.9847 8.17021 5.3427 7.10648 6.00437 6.27215C6.02752 6.24297
88-
6.05103 6.21406 6.07492 6.18545V6.18545C6.10601 6.1482 6.11618 6.09772 6.10194
89-
6.05134C6.10107 6.04853 6.10021 6.04571 6.09935 6.04289C6.0832 5.9899 6.06804
90-
5.93666 6.05388 5.88321C5.81065 4.96474 5.86295 3.98363 6.20527 3.09818C6.20779
91-
3.09164 6.21034 3.08511 6.2129 3.07858C6.22568 3.04599 6.25251 3.02108 6.28698
92-
3.01493V3.01493C6.50189 2.97661 7.37036 2.92534 9.03298 4.07346C9.08473 4.10919
93-
9.13724 4.14609 9.19053 4.18418V4.18418C9.22901 4.21168 9.27794 4.22011 9.32344
94-
4.20716C9.32487 4.20675 9.32631 4.20634 9.32774 4.20593C9.41699 4.18056 9.50648
95-
4.15649 9.59617 4.1337C11.1766 3.73226 12.8234 3.73226 14.4038 4.1337C14.4889
96-
4.1553 14.5737 4.17807 14.6584 4.20199C14.6602 4.20252 14.6621 4.20304 14.6639
97-
4.20356C14.7174 4.21872 14.7749 4.20882 14.8202 4.17653V4.17653C14.8698 4.14114
98-
14.9187 4.10679 14.967 4.07346C16.6257 2.92776 17.4894 2.9764 17.7053
99-
3.01469V3.01469C17.7404 3.02092 17.7678 3.04628 17.781 3.07946C17.7827 3.08373
100-
17.7843 3.08799 17.786 3.09226C18.1341 3.97811 18.1894 4.96214 17.946
101-
5.88321C17.9315 5.93811 17.9159 5.9928 17.8993 6.04723V6.04723C17.8843
102-
6.09618 17.8951 6.14942 17.9278 6.18875C17.9289 6.18998 17.9299 6.19121 17.9309
103-
6.19245C17.9528 6.21877 17.9744 6.24534 17.9956 6.27215C18.6573 7.10648 19.0153
104-
8.17021 18.9995 9.26749C18.9995 13.747 16.4565 14.7435 14.0214
105-
15.015V15.015C14.0073 15.0165 14.001 15.0334 14.0105 15.0439C14.0141 15.0479
106-
14.0178 15.0519 14.0214 15.0559C14.2671 15.3296 14.4577 15.6544 14.5811
107-
16.0103C14.7101 16.3824 14.7626 16.7797 14.7351 17.1754V21"
108-
stroke="#323232"
109-
strokeWidth="0.8640000000000001"
110-
strokeLinecap="round"
111-
strokeLinejoin="round"
112-
/>{' '}
113-
<path
114-
d="M4 17C4.36915 17.0523 4.72159 17.1883 5.03065 17.3975C5.3397 17.6068 5.59726
115-
17.8838 5.7838 18.2078C5.94231 18.4962 6.15601 18.7504 6.41264 18.9557C6.66927
116-
19.161 6.96379 19.3135 7.27929 19.4043C7.59478 19.4952 7.92504 19.5226 8.25112
117-
19.485C8.5772 19.4475 8.89268 19.3457 9.17946 19.1855"
118-
stroke="#323232"
119-
strokeWidth="0.8640000000000001"
120-
strokeLinecap="round"
121-
strokeLinejoin="round"
122-
/>{' '}
123-
</g>
124-
</svg>
125-
</Link>
126-
127-
<Link to="https://discord.gg/6R4DK4G5Zh">
128-
<svg
129-
className=" fill-white w-8 hover:fill-blue-500 transition-colors duration-300"
130-
fill="#000000"
131-
viewBox="0 0 24 24"
132-
xmlns="http://www.w3.org/2000/svg"
133-
>
134-
<g id="SVGRepo_bgCarrier" strokeWidth="0" />
135-
<g
136-
id="SVGRepo_tracerCarrier"
137-
strokeLinecap="round"
138-
strokeLinejoin="round"
139-
/>
140-
<g id="SVGRepo_iconCarrier">
141-
<path d="M18.942 5.556a16.299 16.299 0 0 0-4.126-1.297c-.178.321-.385.754-.529
142-
1.097a15.175 15.175 0 0 0-4.573 0 11.583 11.583 0 0 0-.535-1.097 16.274 16.274
143-
0 0 0-4.129 1.3c-2.611 3.946-3.319 7.794-2.965 11.587a16.494 16.494 0 0 0 5.061
144-
2.593 12.65 12.65 0 0 0 1.084-1.785 10.689 10.689 0 0
145-
1-1.707-.831c.143-.106.283-.217.418-.331 3.291 1.539 6.866 1.539 10.118 0
146-
.137.114.277.225.418.331-.541.326-1.114.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785
147-
16.46 16.46 0 0 0 5.064-2.595c.415-4.396-.709-8.209-2.973-11.589zM8.678 14.813c-.988
148-
0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c.001
149-
1.123-.793 2.045-1.798 2.045zm6.644 0c-.988 0-1.798-.922-1.798-2.045s.793-2.047
150-
1.798-2.047 1.815.922 1.798 2.047c0 1.123-.793 2.045-1.798 2.045z"
151-
/>
152-
</g>
153-
</svg>
154-
</Link>
155-
156-
<Link to="https://react-chatbotify.com/docs/introduction/quickstart">
157-
<svg
158-
className=" fill-white w-8 hover:fill-blue-500 transition-colors duration-300"
159-
width="35px"
160-
height="35px"
161-
viewBox="0 0 24 24"
162-
fill="none"
163-
xmlns="http://www.w3.org/2000/svg"
164-
>
165-
<g id="SVGRepo_bgCarrier" strokeWidth="0" />
166-
<g
167-
id="SVGRepo_tracerCarrier"
168-
strokeLinecap="round"
169-
strokeLinejoin="round"
170-
/>
171-
<g id="SVGRepo_iconCarrier">
172-
{' '}
173-
<path
174-
d="M4 4C4 3.44772 4.44772 3 5 3H14H14.5858C14.851 3 15.1054 3.10536 15.2929
175-
3.29289L19.7071 7.70711C19.8946 7.89464 20 8.149 20 8.41421V20C20 20.5523
176-
19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V4Z"
177-
stroke="#200E32"
178-
strokeWidth="1.2"
179-
strokeLinecap="round"
180-
/>{' '}
181-
<path
182-
d="M20 8H15V3"
183-
stroke="#200E32"
184-
strokeWidth="1.2"
185-
strokeLinecap="round"
186-
strokeLinejoin="round"
187-
/>{' '}
188-
<path
189-
d="M7.5 13H7V17H7.5C8.60457 17 9.5 16.1046 9.5 15C9.5 13.8954 8.60457 13 7.5 13Z"
190-
stroke="#200E32"
191-
strokeWidth="1.2"
192-
strokeLinecap="round"
193-
strokeLinejoin="round"
194-
/>{' '}
195-
<path
196-
d="M17.5 13L17 13C16.4477 13 16 13.4477 16 14V16C16 16.5523
197-
16.4477 17 17 17H17.5"
198-
stroke="#200E32"
199-
strokeWidth="1.2"
200-
strokeLinecap="round"
201-
strokeLinejoin="round"
202-
/>{' '}
203-
<path
204-
d="M11.5 14C11.5 13.4477 11.9477 13 12.5 13H13C13.5523 13 14
205-
13.4477 14 14V16C14 16.5523 13.5523 17 13 17H12.5C11.9477
206-
17 11.5 16.5523 11.5 16V14Z"
207-
stroke="#200E32"
208-
strokeWidth="1.2"
209-
strokeLinecap="round"
210-
strokeLinejoin="round"
211-
/>{' '}
212-
</g>
213-
</svg>
214-
</Link>
215-
</div>
31+
<div className="relative overflow-hidden h-screen bg-accent-50 w-full">
32+
<div className='absolute size-[60%] sm:size-[60%] md:size-[60%] bg-gradient-to-r from-secondary-900 -rotate-[30deg] to-primary-600 rounded-full z-0 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] blur-[150px] sm:blur-[200px]'>
33+
</div>
34+
<div className='relative z-1'>
35+
<NavigationBar />
36+
<HeroSection />
37+
<ImageHeroSection />
21638
</div>
21739

218-
<div
219-
className="md:w-1/2 absolute top-0 bottom-0 right-0
220-
opacity-40 bg-no-repeat bg-cover bg-center animate-bob"
221-
style={{backgroundSize: "70%", backgroundImage: `url(${logo})`}}
222-
/>
40+
22341
</div>
22442
)
22543
}

‎src/styles/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,4 +96,4 @@ code {
9696
.hide-scrollbar {
9797
-ms-overflow-style: none;
9898
scrollbar-width: none;
99-
}
99+
}

0 commit comments

Comments
 (0)