Merge pull request #57 from HusseinSerag/FEAT-landing-page

Create new Landing Page

Author: tjtanjin

package-lock.json

@@ -23,15 +23,12 @@
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@vitejs/plugin-react": "^4.2.1",
     "file-saver": "^2.0.5",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.6.1",
     "jszip": "^3.10.1",
     "lucide-react": "^0.376.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-chatbotify": "^2.0.0-beta.3",
     "react-dom": "^18.2.0",
-    "react-i18next": "^15.0.1",
     "react-loading-skeleton": "^3.4.0",
     "react-router-dom": "^6.2.2",
     "uuid": "^9.0.1",

package.json

@@ -0,0 +1,33 @@
+import { Link } from "react-router-dom";
+
+export default function HeroSection() {
+	return (
+		<div className='py-[57px] flex items-center gap-3 justify-center flex-col px-5'>
+			<h1 className='text-accent-600 text-lg sm:text-xl font-semibold'>React ChatBotify</h1>
+			<h2 className='text-accent-900 font-bold text-3xl sm:text-5xl'>Theme Gallery</h2>
+			<h3 className='text-accent-600 sm:text-base text-sm text-center w-[250px]'>
+				Browse, rate and share themes for your chatbot today and more!
+			</h3>
+			<div className="flex mt-6 flex-col items-center sm:flex-row gap-2">
+
+        
+				<Link  to={"/themes"}>
+					<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'>
+						Themes
+					</button>
+				</Link>
+				<Link  to={"/plugins"}>
+					<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'>
+						Plugins
+					</button>
+				</Link>
+				<Link  to={"https://react-chatbotify.com"}>
+					<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'>
+						Documentation
+					</button>
+				</Link>
+			</div>
+		</div>
+	)
+}
+

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

@@ -0,0 +1,15 @@
+import img1 from './../../assets/images/LandingPage/theme-1.png'
+import img2 from './../../assets/images/LandingPage/theme-2.png'
+import img3 from './../../assets/images/LandingPage/theme-3.png'
+import img4 from './../../assets/images/LandingPage/theme-4.png'
+export default function ImageHeroSection() {
+	return (
+		<div className='flex justify-center gap-6'>
+			<img src={img1} className='w-[127px] h-[120px] -rotate-6 rounded-lg bg-cover' />
+			<img src={img2} className='w-[127px] h-[120px] rotate-6 rounded-lg bg-cover' />
+			<img src={img3} className='w-[127px] h-[120px] -rotate-6 rounded-lg bg-cover' />
+			<img src={img4} className='w-[127px] h-[120px] rotate-6 rounded-lg bg-cover' />
+		</div>
+	)
+}
+

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 import { handleLogin } from '../../services/authService';
@@ -21,6 +21,8 @@ type DropdownProps = {
 /**
  * Navigation bar for users to navigate between pages.
  */
+
+const navBarClass = "sticky top-0 w-full z-50 text-white py-2 px-6 flex justify-between items-center"
 const NavigationBar = () => {
 	// context for handling user data
 	const { isLoggedIn, setIsLoggedIn, setUserData } = useAuth()
@@ -35,6 +37,21 @@ const NavigationBar = () => {
 		setMenuOpen(!menuOpen)
 	}
 
+
+	const navbarRef = useRef<HTMLDivElement>(null)
+
+	useEffect(function(){
+		window.addEventListener('scroll',function(e){
+			if(navbarRef.current) {
+				if(window.scrollY >= 50) {
+					navbarRef.current.className = navBarClass + ' opacity-80 bg-black'
+				} else {
+					navbarRef.current.className = navBarClass
+				}
+			}
+		})
+	},[])
+
 	const { t, i18n } = useTranslation();
 
 	const changeLanguage = (lang: string) => {
@@ -76,21 +93,20 @@ const NavigationBar = () => {
 
 	return (
 		<nav
-			className="fixed top-0 w-full z-50 opacity-80 bg-black
-				text-white py-2 px-6 flex justify-between items-center"
+			className={navBarClass}
 			style={{ height: '8vh' }}
+			ref={navbarRef}
 		>
-			<Link to="/" className="flex items-center">
+			<Link to="/">
 				{' '}
 				{/* Wrap logo and title with Link */}
 				<img src={logo} alt="Logo" className="w-8 h-8 mr-2" />
-				<h1 className="text-lg font-bold">{SiteConfig.siteName}</h1>
 			</Link>
 
 			<div className="relative">
 				<button
 					onClick={toggleMenu}
-					className="block md:hidden"
+					className="block lg:hidden"
 					type="button"
 					aria-label="Menu"
 				>
@@ -238,7 +254,7 @@ const NavigationBar = () => {
 				)}
 			</div>
 
-			<ul className="hidden md:flex pr-20">
+			<ul className="hidden lg:flex pr-20">
 				{/* needs improvement */}
 				<li className="mr-8">
 					<Link to="/about" className="hover:text-blue-500">