MetatroncubeSoftwareSolutions/janahan-law
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

language change option updated

Browse Source
This commit is contained in:
Alaguraj0361 2025-08-18 12:25:06 +05:30
parent 6af82f79d0
commit e22446e764
14 changed files with 556 additions and 1013 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
components/HeaderTopbar/HeaderTopbar.js
View File

@ -1,45 +1,62 @@
'use client'
import React from 'react' import React from 'react'
import Link from 'next/link' import Link from 'next/link'
import Logo from '/public/images/logo.png' import Logo from '/public/images/logo.png'
import Image from 'next/image' import Image from 'next/image'
import { useTranslation } from 'next-i18next'
const HeaderTopbar = () => { const HeaderTopbar = () => {
return ( const { t } = useTranslation('common')
<div className="topbar d-lg-block d-none">
<div className="container">
<div className="row align-items-center"> return (
<div className="col-lg-3 col-12 d-lg-block d-none"> <div className="topbar d-lg-block d-none">
<Link className="navbar-brand" href="/"><Image src={Logo} alt=""/></Link> <div className="container">
</div> <div className="row align-items-center">
<div className="col-lg-9 col-12"> {/* Logo */}
<div className="contact-info-wrap"> <div className="col-lg-3 col-12 d-lg-block d-none">
<div className="contact-info"> <Link className="navbar-brand" href="/">
<div className="icon"> <Image src={Logo} alt="logo" />
<i className="fi flaticon-phone-call"></i> </Link>
</div> </div>
<div className="info-text">
<span>Call Us:</span> {/* Contact Info */}
<p>+1 (305) 330-7413</p> <div className="col-lg-6 col-12">
</div> <div className="contact-info-wrap">
</div> <div className="contact-info">
<div className="contact-info"> <div className="icon">
<div className="icon"> <i className="fi flaticon-phone-call"></i>
<i className="fi flaticon-email"></i>
</div>
<div className="info-text">
<span>E-mail Now:</span>
<p>info@janahanlaw.com</p>
</div>
</div>
<div className="contact-info">
<Link className="theme-btn" href="/contact">Contact Us</Link>
</div>
</div>
</div>
</div> </div>
<div className="info-text">
<span>{t('callUs')}</span>
<p>+1 (305) 330-7413</p>
</div>
</div>
<div className="contact-info">
<div className="icon">
<i className="fi flaticon-email"></i>
</div>
<div className="info-text">
<span>{t('emailNow')}</span>
<p>info@janahanlaw.com</p>
</div>
</div>
</div> </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>
) </div>
</div>
)
} }
export default HeaderTopbar; export default HeaderTopbar

2
components/Navbar/Navbar.js
View File

@ -18,4 +18,4 @@ export default function Navbar2(props) {
<Header2 hclass={props.hclass} Logo={props.Logo} topbarNone={props.topbarNone} /> <Header2 hclass={props.hclass} Logo={props.Logo} topbarNone={props.topbarNone} />
</div> </div>
); );
} }

147
components/header2/Header2.js
View File

@ -1,20 +1,32 @@
'use client'
import React, { useState } from 'react' import React, { useState } from 'react'
import Link from 'next/link' import Link from 'next/link'
import HeaderTopbar from '../HeaderTopbar/HeaderTopbar' import HeaderTopbar from '../HeaderTopbar/HeaderTopbar'
import MobileMenu from '../MobileMenu/MobileMenu' import MobileMenu from '../MobileMenu/MobileMenu'
import Logo from '/public/images/logo.png' import Logo from '/public/images/logo.png'
import Image from 'next/image' 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 Header2 = (props) => {
const [menuActive, setMenuState] = useState(false); const [menuActive, setMenuState] = useState(false)
const { t } = useTranslation('menu')
const router = useRouter()
const SubmitHandler = (e) => { const SubmitHandler = (e) => {
e.preventDefault() e.preventDefault()
} }
const ClickHandler = () => { const ClickHandler = () => {
window.scrollTo(10, 0); window.scrollTo(10, 0)
} }
const handleLanguageChange = (e) => {
const selectedLocale = e.target.value;
changeLanguage(router, selectedLocale);
};
return ( return (
<header id="header"> <header id="header">
<HeaderTopbar /> <HeaderTopbar />
@ -22,11 +34,11 @@ const Header2 = (props) => {
<nav className="navigation navbar navbar-expand-lg navbar-light"> <nav className="navigation navbar navbar-expand-lg navbar-light">
<div className="container"> <div className="container">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-md-6 col-9 d-lg-none dl-block"> <div className="col-md-6 col-9 d-lg-none dl-block">
<div className="navbar-header"> <div className="navbar-header">
<Link onClick={ClickHandler} className="navbar-brand" href="/"><Image src={Logo} <Link onClick={ClickHandler} className="navbar-brand" href="/">
alt="logo" /></Link> <Image src={Logo} alt="logo" />
</Link>
</div> </div>
</div> </div>
<div className="col-lg-3 col-md-3 col-3 d-lg-none dl-block"> <div className="col-lg-3 col-md-3 col-3 d-lg-none dl-block">
@ -34,120 +46,55 @@ const Header2 = (props) => {
<MobileMenu /> <MobileMenu />
</div> </div>
</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"> <div id="navbar" className="collapse navbar-collapse navigation-holder">
<button className="menu-close"><i className="ti-close"></i></button> <button className="menu-close"><i className="ti-close"></i></button>
<ul className="nav navbar-nav mb-2 mb-lg-0"> <ul className="nav navbar-nav mb-2 mb-lg-0">
{/* <li className="menu-item-has-children"> */}
<li> <li>
<Link onClick={ClickHandler} href="/">Home</Link> <Link onClick={ClickHandler} href="/">{t('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> */}
</li> </li>
<li><Link onClick={ClickHandler} href="/our-approach">Our Approach</Link></li> <li>
<li><Link onClick={ClickHandler} href="/about">About us</Link> <Link onClick={ClickHandler} href="/our-approach">{t('ourApproach')}</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> </li>
{/* <li className="menu-item-has-children"> <li>
<Link onClick={ClickHandler} href="/">Campaign</Link> <Link onClick={ClickHandler} href="/about">{t('aboutUs')}</Link>
<ul className="sub-menu"> <ul className="sub-menu">
<li><Link onClick={ClickHandler} href="/campaign">Campaign Style 1</Link></li> <li>
<li><Link onClick={ClickHandler} href="/campaign-2">Campaign Style 2</Link></li> <Link onClick={ClickHandler} href="/about/our-mission">{t('ourMission')}</Link>
<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> </li>
<li><Link onClick={ClickHandler} href="/shop">Shop</Link></li> <li>
<li><Link onClick={ClickHandler} href="/product-single/The-Audacity-of-Hope">Shop Single</Link></li> <Link onClick={ClickHandler} href="/about/racial-justice">{t('racialJustice')}</Link>
<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> </li>
</ul> </ul>
</li> */} </li>
<li><Link onClick={ClickHandler} href="/blog">Blog</Link></li> <li>
<li><Link onClick={ClickHandler} href="/services">Services</Link></li> <Link onClick={ClickHandler} href="/blog">{t('blog')}</Link>
<li><Link onClick={ClickHandler} href="/contact">Contact</Link></li> </li>
<li>
<Link onClick={ClickHandler} href="/services">{t('services')}</Link>
</li>
<li>
<Link onClick={ClickHandler} href="/contact">{t('contact')}</Link>
</li>
</ul> </ul>
</div> </div>
</div> </div>
<div className="col-lg-5 col-md-2 col-2"> <div className="col-lg-3 col-md-2 col-2">
<div className="header-right"> <div className="header-right d-flex align-items-center justify-content-end">
{/* <div className="header-search-form-wrapper"> <div className="language me-4">
<div className="cart-search-contact"> <select onChange={handleLanguageChange} value={router.locale}>
<button onClick={() => setMenuState(!menuActive)} className="search-toggle-btn"><i <option value="es">Español</option>
className={`fi ti-search ${menuActive ? "ti-close" : "fi "}`}></i></button> <option value="en">English</option>
<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>
</select> </select>
</div> */} </div>
<div className="social"> {/* <div className="social">
<ul> <ul>
<li><Link href="/"><i className="fi flaticon-facebook-app-symbol"></i></Link></li> <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-twitter"></i></Link></li>
<li><Link href="/"><i className="fi flaticon-linkedin"></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> <li><Link href="/"><i className="fi flaticon-instagram-1"></i></Link></li>
</ul> </ul>
</div> </div> */}
</div> </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
View File

@ -0,0 +1,10 @@
module.exports = {
i18n: {
defaultLocale: 'es',
locales: ['en', 'es'],
localeDetection: false,
},
ns: ['common', 'menu'],
defaultNS: 'common',
// localePath: './public/locales',
};

6
next.config.js
View File

@ -1,11 +1,11 @@
/** @type {import('next').NextConfig} */ const { i18n } = require('./next-i18next.config');
const nextConfig = { const nextConfig = {
reactStrictMode: false, reactStrictMode: false,
output: "export",
trailingSlash: true, trailingSlash: true,
images: { images: {
unoptimized: true // ✅ disables server-side image optimization unoptimized: true // ✅ disables server-side image optimization
} },
i18n,
}; };
module.exports = nextConfig; module.exports = nextConfig;

1211
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -15,6 +15,7 @@
"bootstrap": "^5.1.3", "bootstrap": "^5.1.3",
"eslint-config-next": "^13.0.7", "eslint-config-next": "^13.0.7",
"next": "^13.0.7", "next": "^13.0.7",
"next-i18next": "^15.4.2",
"react": "^18.2.0", "react": "^18.2.0",
"react-anchor-link-smooth-scroll": "^1.0.12", "react-anchor-link-smooth-scroll": "^1.0.12",
"react-animated-css": "^1.2.1", "react-animated-css": "^1.2.1",

9
pages/_app.js
View File

@ -14,6 +14,9 @@ import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css"; import "slick-carousel/slick/slick-theme.css";
import Head from "next/head"; import Head from "next/head";
// Import appWithTranslation from next-i18next
import { appWithTranslation } from 'next-i18next';
function MyApp({ Component, pageProps }) { function MyApp({ Component, pageProps }) {
return ( return (
<div> <div>
@ -27,8 +30,8 @@ function MyApp({ Component, pageProps }) {
</PersistGate> </PersistGate>
</Provider> </Provider>
</div> </div>
);
)
} }
export default MyApp // Wrap export with appWithTranslation HOC
export default appWithTranslation(MyApp);

62
pages/index.js
View File

@ -1,44 +1,46 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import Navbar from '../components/Navbar/Navbar' import Navbar from '../components/Navbar/Navbar';
import Hero from '../components/hero/hero'; import Hero from '../components/hero/hero';
import Features from '../components/Features/Features'; import Features from '../components/Features/Features';
import About from '../components/about/about'; import About from '../components/about/about';
import ServiceSection from '../components/ServiceSection/ServiceSection'; import ServiceSection from '../components/ServiceSection/ServiceSection';
import ServiceSectionS2 from '../components/ServiceSectionS2/ServiceSectionS2'; import ServiceSectionS2 from '../components/ServiceSectionS2/ServiceSectionS2';
import CampaignSection from '../components/CampaignSection/CampaignSection';
import Testimonial from '../components/Testimonial/Testimonial'; import Testimonial from '../components/Testimonial/Testimonial';
import FunFact from '../components/FunFact/FunFact'; 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 Donors from '../components/Donors/Donors';
import PartnerSection from '../components/PartnerSection/PartnerSection'; import BlogSection from '../components/BlogSection/BlogSection';
import introImg from '/public/images/home/expert-immigration-guidance.webp'
import FunFactVideo from '../components/FunFactVideo/FunFactVideo';
import Footer from '../components/footer/Footer'; import Footer from '../components/footer/Footer';
import Scrollbar from '../components/scrollbar/scrollbar'; import Scrollbar from '../components/scrollbar/scrollbar';
import introImg from '/public/images/home/expert-immigration-guidance.webp';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
const HomePage = () => { const HomePage = () => {
return ( return (
<Fragment> <Fragment>
<Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} /> <Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} />
<Hero /> <Hero />
<Features sClass={'wpo-service-section-s2'} /> <Features sClass={'wpo-service-section-s2'} />
<About introImg={introImg} abClass={'wpo-about-section-s2'}/> <About introImg={introImg} abClass={'wpo-about-section-s2'} />
<ServiceSection /> <ServiceSection />
<FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} /> <FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} />
<ServiceSectionS2 /> <ServiceSectionS2 />
<Testimonial /> <Testimonial />
{/* <FunFactVideo /> */} <Donors />
{/* <CampaignSection/> */} <BlogSection />
{/* <TeamSection /> */} <Footer />
<Donors /> <Scrollbar />
<BlogSection /> </Fragment>
{/* <InstagramSection/> */} );
{/* <PartnerSection/> */}
<Footer />
<Scrollbar />
</Fragment>
)
}; };
export default HomePage;
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
View File

@ -0,0 +1,5 @@
{
"callUs": "Call Us:",
"emailNow": "E-mail Now:",
"contactUs": "Contact Us"
}

10
public/locales/en/menu.json Normal file
View 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
View File

@ -0,0 +1,5 @@
{
"callUs": "Llámanos:",
"emailNow": "Envíanos un correo:",
"contactUs": "Contáctanos"
}

10
public/locales/es/menu.json Normal file
View 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
View File

@ -0,0 +1,6 @@
export const changeLanguage = (router, locale) => {
const path = router.asPath;
router.push(path, path, { locale });
};