language change option updated
This commit is contained in:
Alaguraj0361
parent
6af82f79d0
commit
e22446e764
@ -1,24 +1,35 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import Logo from '/public/images/logo.png'
|
||||
import Image from 'next/image'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
const HeaderTopbar = () => {
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
|
||||
return (
|
||||
<div className="topbar d-lg-block d-none">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
{/* Logo */}
|
||||
<div className="col-lg-3 col-12 d-lg-block d-none">
|
||||
<Link className="navbar-brand" href="/"><Image src={Logo} alt=""/></Link>
|
||||
<Link className="navbar-brand" href="/">
|
||||
<Image src={Logo} alt="logo" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="col-lg-9 col-12">
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="col-lg-6 col-12">
|
||||
<div className="contact-info-wrap">
|
||||
<div className="contact-info">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-phone-call"></i>
|
||||
</div>
|
||||
<div className="info-text">
|
||||
<span>Call Us:</span>
|
||||
<span>{t('callUs')}</span>
|
||||
<p>+1 (305) 330-7413</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -27,14 +38,20 @@ const HeaderTopbar = () => {
|
||||
<i className="fi flaticon-email"></i>
|
||||
</div>
|
||||
<div className="info-text">
|
||||
<span>E-mail Now:</span>
|
||||
<span>{t('emailNow')}</span>
|
||||
<p>info@janahanlaw.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-info">
|
||||
<Link className="theme-btn" href="/contact">Contact Us</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Button */}
|
||||
<div className="col-lg-3 col-12 d-flex justify-content-end align-items-center">
|
||||
<div className="contact-info ms-3">
|
||||
<Link className="theme-btn" href="/contact">
|
||||
{t('contactUs')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,4 +59,4 @@ const HeaderTopbar = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default HeaderTopbar;
|
||||
export default HeaderTopbar
|
||||
|
||||
@ -1,20 +1,32 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import HeaderTopbar from '../HeaderTopbar/HeaderTopbar'
|
||||
import MobileMenu from '../MobileMenu/MobileMenu'
|
||||
import Logo from '/public/images/logo.png'
|
||||
import Image from 'next/image'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { changeLanguage } from '../../utils/commonFunction.utils'
|
||||
|
||||
const Header2 = (props) => {
|
||||
const [menuActive, setMenuState] = useState(false);
|
||||
const [menuActive, setMenuState] = useState(false)
|
||||
const { t } = useTranslation('menu')
|
||||
const router = useRouter()
|
||||
const SubmitHandler = (e) => {
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
const ClickHandler = () => {
|
||||
window.scrollTo(10, 0);
|
||||
window.scrollTo(10, 0)
|
||||
}
|
||||
|
||||
const handleLanguageChange = (e) => {
|
||||
const selectedLocale = e.target.value;
|
||||
changeLanguage(router, selectedLocale);
|
||||
};
|
||||
|
||||
return (
|
||||
<header id="header">
|
||||
<HeaderTopbar />
|
||||
@ -22,11 +34,11 @@ const Header2 = (props) => {
|
||||
<nav className="navigation navbar navbar-expand-lg navbar-light">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
|
||||
<div className="col-md-6 col-9 d-lg-none dl-block">
|
||||
<div className="navbar-header">
|
||||
<Link onClick={ClickHandler} className="navbar-brand" href="/"><Image src={Logo}
|
||||
alt="logo" /></Link>
|
||||
<Link onClick={ClickHandler} className="navbar-brand" href="/">
|
||||
<Image src={Logo} alt="logo" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-3 col-3 d-lg-none dl-block">
|
||||
@ -34,120 +46,55 @@ const Header2 = (props) => {
|
||||
<MobileMenu />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col-lg-7 col-md-1 col-1">
|
||||
<div className="col col-lg-9 col-md-1 col-1">
|
||||
<div id="navbar" className="collapse navbar-collapse navigation-holder">
|
||||
<button className="menu-close"><i className="ti-close"></i></button>
|
||||
<ul className="nav navbar-nav mb-2 mb-lg-0">
|
||||
{/* <li className="menu-item-has-children"> */}
|
||||
<li>
|
||||
<Link onClick={ClickHandler} href="/">Home</Link>
|
||||
{/* <ul className="sub-menu">
|
||||
<li><Link onClick={ClickHandler} href="/home">Main Home</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/home2">Election Home</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/home3">Male Candidate</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/home4">Female Candidate</Link></li>
|
||||
</ul> */}
|
||||
<Link onClick={ClickHandler} href="/">{t('home')}</Link>
|
||||
</li>
|
||||
<li><Link onClick={ClickHandler} href="/our-approach">Our Approach</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/about">About us</Link>
|
||||
<ul className="sub-menu">
|
||||
<li><Link onClick={ClickHandler} href="/about/our-mission">Our Mission</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/about/racial-justice">Racial Justice</Link></li>
|
||||
</ul>
|
||||
<li>
|
||||
<Link onClick={ClickHandler} href="/our-approach">{t('ourApproach')}</Link>
|
||||
</li>
|
||||
{/* <li className="menu-item-has-children">
|
||||
<Link onClick={ClickHandler} href="/">Campaign</Link>
|
||||
<li>
|
||||
<Link onClick={ClickHandler} href="/about">{t('aboutUs')}</Link>
|
||||
<ul className="sub-menu">
|
||||
<li><Link onClick={ClickHandler} href="/campaign">Campaign Style 1</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/campaign-2">Campaign Style 2</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/campaign-3">Campaign Style 3</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/campaign-single/Support-for-Womans">Campaign single</Link></li>
|
||||
</ul>
|
||||
</li> */}
|
||||
{/* <li className="menu-item-has-children">
|
||||
<Link onClick={ClickHandler} href="/">Pages</Link>
|
||||
<ul className="sub-menu">
|
||||
<li><Link onClick={ClickHandler} href="/gallery">Gallery</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/testimonial">Testimonial</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/team">Team</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/team-single/Esther-Howard">Team Single</Link></li>
|
||||
<li className="menu-item-has-children">
|
||||
<Link onClick={ClickHandler} href="/">Services</Link>
|
||||
<ul className="sub-menu">
|
||||
<li><Link onClick={ClickHandler} href="/service">Services</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/service-single/Economic-Establishment">Services Single</Link></li>
|
||||
</ul>
|
||||
<li>
|
||||
<Link onClick={ClickHandler} href="/about/our-mission">{t('ourMission')}</Link>
|
||||
</li>
|
||||
<li><Link onClick={ClickHandler} href="/shop">Shop</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/product-single/The-Audacity-of-Hope">Shop Single</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/cart">Cart</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/checkout">Checkout</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/faq">FAQ</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/volunteer">Volunteer</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/404">404 Error</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/login">Login</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/register">Register</Link></li>
|
||||
</ul>
|
||||
</li> */}
|
||||
{/* <li className="menu-item-has-children">
|
||||
<Link onClick={ClickHandler} href="/">Blog</Link>
|
||||
<ul className="sub-menu">
|
||||
<li><Link onClick={ClickHandler} href="/blog">Blog right sidebar</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/blog-left-sidebar">Blog left sidebar</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/blog-fullwidth">Blog fullwidth</Link></li>
|
||||
<li className="menu-item-has-children">
|
||||
<Link onClick={ClickHandler} href="/">Blog details</Link>
|
||||
<ul className="sub-menu">
|
||||
<li><Link onClick={ClickHandler} href="/blog-single/support-progressive-change">Blog details right sidebar</Link>
|
||||
</li>
|
||||
<li><Link onClick={ClickHandler} href="/blog-single-left-sidebar/support-progressive-change">Blog details left
|
||||
sidebar</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/blog-single-fullwidth/support-progressive-change">Blog details
|
||||
fullwidth</Link></li>
|
||||
</ul>
|
||||
<li>
|
||||
<Link onClick={ClickHandler} href="/about/racial-justice">{t('racialJustice')}</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li> */}
|
||||
<li><Link onClick={ClickHandler} href="/blog">Blog</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/services">Services</Link></li>
|
||||
<li><Link onClick={ClickHandler} href="/contact">Contact</Link></li>
|
||||
</li>
|
||||
<li>
|
||||
<Link onClick={ClickHandler} href="/blog">{t('blog')}</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link onClick={ClickHandler} href="/services">{t('services')}</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link onClick={ClickHandler} href="/contact">{t('contact')}</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 col-md-2 col-2">
|
||||
<div className="header-right">
|
||||
{/* <div className="header-search-form-wrapper">
|
||||
<div className="cart-search-contact">
|
||||
<button onClick={() => setMenuState(!menuActive)} className="search-toggle-btn"><i
|
||||
className={`fi ti-search ${menuActive ? "ti-close" : "fi "}`}></i></button>
|
||||
<div className={`header-search-form ${menuActive ? "header-search-content-toggle" : ""}`}>
|
||||
<form onSubmit={SubmitHandler}>
|
||||
<div>
|
||||
<input type="text" className="form-control"
|
||||
placeholder="Search here..." />
|
||||
<button type="submit"><i
|
||||
className="fi flaticon-search"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* <div className="language">
|
||||
<select name="language" id="language">
|
||||
<option value="English">English</option>
|
||||
<option value="Arabic">Arabic</option>
|
||||
<option value="Japanese">Japanese</option>
|
||||
<option value="Spanish">Spanish</option>
|
||||
<div className="col-lg-3 col-md-2 col-2">
|
||||
<div className="header-right d-flex align-items-center justify-content-end">
|
||||
<div className="language me-4">
|
||||
<select onChange={handleLanguageChange} value={router.locale}>
|
||||
<option value="es">Español</option>
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</div> */}
|
||||
<div className="social">
|
||||
</div>
|
||||
{/* <div className="social">
|
||||
<ul>
|
||||
<li><Link href="/"><i className="fi flaticon-facebook-app-symbol"></i></Link></li>
|
||||
<li><Link href="/"><i className="fi flaticon-twitter"></i></Link></li>
|
||||
<li><Link href="/"><i className="fi flaticon-linkedin"></i></Link></li>
|
||||
<li><Link href="/"><i className="fi flaticon-instagram-1"></i></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -158,4 +105,4 @@ const Header2 = (props) => {
|
||||
)
|
||||
}
|
||||
|
||||
export default Header2;
|
||||
export default Header2
|
||||
|
||||
10
next-i18next.config.js
Normal file
10
next-i18next.config.js
Normal file
@ -0,0 +1,10 @@
|
||||
module.exports = {
|
||||
i18n: {
|
||||
defaultLocale: 'es',
|
||||
locales: ['en', 'es'],
|
||||
localeDetection: false,
|
||||
},
|
||||
ns: ['common', 'menu'],
|
||||
defaultNS: 'common',
|
||||
// localePath: './public/locales',
|
||||
};
|
||||
@ -1,11 +1,11 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const { i18n } = require('./next-i18next.config');
|
||||
const nextConfig = {
|
||||
reactStrictMode: false,
|
||||
output: "export",
|
||||
trailingSlash: true,
|
||||
images: {
|
||||
unoptimized: true // ✅ disables server-side image optimization
|
||||
}
|
||||
},
|
||||
i18n,
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
|
||||
1211
package-lock.json
generated
1211
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -15,6 +15,7 @@
|
||||
"bootstrap": "^5.1.3",
|
||||
"eslint-config-next": "^13.0.7",
|
||||
"next": "^13.0.7",
|
||||
"next-i18next": "^15.4.2",
|
||||
"react": "^18.2.0",
|
||||
"react-anchor-link-smooth-scroll": "^1.0.12",
|
||||
"react-animated-css": "^1.2.1",
|
||||
|
||||
@ -14,6 +14,9 @@ import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Head from "next/head";
|
||||
|
||||
// Import appWithTranslation from next-i18next
|
||||
import { appWithTranslation } from 'next-i18next';
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return (
|
||||
<div>
|
||||
@ -27,8 +30,8 @@ function MyApp({ Component, pageProps }) {
|
||||
</PersistGate>
|
||||
</Provider>
|
||||
</div>
|
||||
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
// Wrap export with appWithTranslation HOC
|
||||
export default appWithTranslation(MyApp);
|
||||
|
||||
@ -1,22 +1,19 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import Navbar from '../components/Navbar/Navbar'
|
||||
import Navbar from '../components/Navbar/Navbar';
|
||||
import Hero from '../components/hero/hero';
|
||||
import Features from '../components/Features/Features';
|
||||
import About from '../components/about/about';
|
||||
import ServiceSection from '../components/ServiceSection/ServiceSection';
|
||||
import ServiceSectionS2 from '../components/ServiceSectionS2/ServiceSectionS2';
|
||||
import CampaignSection from '../components/CampaignSection/CampaignSection';
|
||||
import Testimonial from '../components/Testimonial/Testimonial';
|
||||
import FunFact from '../components/FunFact/FunFact';
|
||||
import TeamSection from '../components/TeamSection/TeamSection';
|
||||
import BlogSection from '../components/BlogSection/BlogSection';
|
||||
import InstagramSection from '../components/InstagramSection/InstagramSection';
|
||||
import Donors from '../components/Donors/Donors';
|
||||
import PartnerSection from '../components/PartnerSection/PartnerSection';
|
||||
import introImg from '/public/images/home/expert-immigration-guidance.webp'
|
||||
import FunFactVideo from '../components/FunFactVideo/FunFactVideo';
|
||||
import BlogSection from '../components/BlogSection/BlogSection';
|
||||
import Footer from '../components/footer/Footer';
|
||||
import Scrollbar from '../components/scrollbar/scrollbar';
|
||||
import introImg from '/public/images/home/expert-immigration-guidance.webp';
|
||||
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
|
||||
|
||||
const HomePage = () => {
|
||||
return (
|
||||
@ -24,21 +21,26 @@ const HomePage = () => {
|
||||
<Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} />
|
||||
<Hero />
|
||||
<Features sClass={'wpo-service-section-s2'} />
|
||||
<About introImg={introImg} abClass={'wpo-about-section-s2'}/>
|
||||
<About introImg={introImg} abClass={'wpo-about-section-s2'} />
|
||||
<ServiceSection />
|
||||
<FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} />
|
||||
<ServiceSectionS2 />
|
||||
<Testimonial />
|
||||
{/* <FunFactVideo /> */}
|
||||
{/* <CampaignSection/> */}
|
||||
{/* <TeamSection /> */}
|
||||
<Donors />
|
||||
<BlogSection />
|
||||
{/* <InstagramSection/> */}
|
||||
{/* <PartnerSection/> */}
|
||||
<Footer />
|
||||
<Scrollbar />
|
||||
</Fragment>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
|
||||
// ✅ This enables translations (menu, and more if you add other namespaces)
|
||||
export async function getStaticProps({ locale }) {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale, ['common','menu'])), // Add 'home', 'footer', etc. if needed
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
5
public/locales/en/common.json
Normal file
5
public/locales/en/common.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"callUs": "Call Us:",
|
||||
"emailNow": "E-mail Now:",
|
||||
"contactUs": "Contact Us"
|
||||
}
|
||||
10
public/locales/en/menu.json
Normal file
10
public/locales/en/menu.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"home": "Home",
|
||||
"ourApproach": "Our Approach",
|
||||
"aboutUs": "About us",
|
||||
"ourMission": "Our Mission",
|
||||
"racialJustice": "Racial Justice",
|
||||
"blog": "Blog",
|
||||
"services": "Services",
|
||||
"contact": "Contact"
|
||||
}
|
||||
5
public/locales/es/common.json
Normal file
5
public/locales/es/common.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"callUs": "Llámanos:",
|
||||
"emailNow": "Envíanos un correo:",
|
||||
"contactUs": "Contáctanos"
|
||||
}
|
||||
10
public/locales/es/menu.json
Normal file
10
public/locales/es/menu.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"home": "Inicio",
|
||||
"ourApproach": "Nuestro Enfoque",
|
||||
"aboutUs": "Sobre Nosotros",
|
||||
"ourMission": "Nuestra Misión",
|
||||
"racialJustice": "Justicia Racial",
|
||||
"blog": "Blog",
|
||||
"services": "Servicios",
|
||||
"contact": "Contacto"
|
||||
}
|
||||
6
utils/commonFunction.utils.js
Normal file
6
utils/commonFunction.utils.js
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
|
||||
export const changeLanguage = (router, locale) => {
|
||||
const path = router.asPath;
|
||||
router.push(path, path, { locale });
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user