refactor json header, footer, home and styling ui

This commit is contained in:
2026-02-03 12:09:24 +07:00
parent 1add9d4d9d
commit 5b29928f16
11 changed files with 1476 additions and 502 deletions

View File

@@ -1,23 +1,22 @@
import Link from 'next/link';
import footerData from './footer.json';
const FooterBottom = () => {
const { bottom } = footerData;
return (
<div className="footer-bottom">
<div className="container">
<div className="footer-wrapper">
<p>
Copyright© <span>GRAMENTHEME</span> All Rights Reserved.
{bottom.copyright.text} <span>{bottom.copyright.brand}</span> {bottom.copyright.rights}
</p>
<ul className="bottom-list">
<li>
<Link href="/contact">Terms & Conditions</Link>
</li>
<li>
<Link href="/contact">Privacy Policy</Link>
</li>
<li>
<Link href="/contact">Contact Us</Link>
</li>
{bottom.menuLinks.map((item, index) => (
<li key={index}>
<Link href={item.href}>{item.label}</Link>
</li>
))}
</ul>
</div>
</div>

View File

@@ -1,46 +1,37 @@
import Link from 'next/link';
import footerData from './footer.json';
const FooterTop = () => {
const { top } = footerData;
return (
<footer className="footer-section fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/footer-bg.jpg')" }}>
<footer className="footer-section fix bg-cover" style={{ backgroundImage: `url('${top.bgImage}')` }}>
<div className="container">
<div className="footer-wrapper">
<div className="row">
<div className="col-xl-12">
<div className="footer-item">
<h2>
<a href="tel:+16336547896">+84 961 83 4040</a>
<a href={top.phone.href}>{top.phone.display}</a>
</h2>
<h2 className="text">734 Luy Ban Bich St, Tan Thanh Ward, Tan Phu Dist, HCMC</h2>
<h2 className="text">{top.address}</h2>
<div className="footer-list-item">
<Link href="/">
<img src="/assets/img/logo/white-logo.svg" alt="img" />
<Link href={top.logo.href}>
<img src={top.logo.src} alt={top.logo.alt} />
</Link>
<ul className="footer-list">
<li>
<Link href="/">Home</Link>
</li>
<li>
<Link href="/about">About Us</Link>
</li>
<li>
<Link href="/country-details">Visa</Link>
</li>
<li>
<Link href="/news-details">Pages</Link>
</li>
<li>
<Link href="/news">Article</Link>
</li>
<li>
<Link href="/contact">Contact Us</Link>
</li>
{top.menuLinks.map((item, index) => (
<li key={index}>
<Link href={item.href}>{item.label}</Link>
</li>
))}
</ul>
<div className="social-icon">
<a href="#"><i className="fa-brands fa-twitter"></i></a>
<a href="#"><i className="fa-brands fa-instagram"></i></a>
<a href="#"><i className="fa-brands fa-linkedin"></i></a>
<a href="#"><i className="fa-brands fa-youtube"></i></a>
{top.socialLinks.map((social, index) => (
<a key={index} href={social.href}>
<i className={social.icon}></i>
</a>
))}
</div>
</div>
</div>

View File

@@ -0,0 +1,80 @@
{
"top": {
"bgImage": "/assets/img/home-1/footer-bg.jpg",
"phone": {
"display": "+84 961 83 4040",
"href": "tel:+84961834040"
},
"address": "734 Luy Ban Bich St, Tan Thanh Ward, Tan Phu Dist, HCMC",
"logo": {
"src": "/assets/img/logo/white-logo.svg",
"alt": "logo",
"href": "/"
},
"menuLinks": [
{
"label": "Home",
"href": "/"
},
{
"label": "About Us",
"href": "/about"
},
{
"label": "Visa",
"href": "/country-details"
},
{
"label": "Pages",
"href": "/news-details"
},
{
"label": "Article",
"href": "/news"
},
{
"label": "Contact Us",
"href": "/contact"
}
],
"socialLinks": [
{
"icon": "fa-brands fa-twitter",
"href": "#"
},
{
"icon": "fa-brands fa-instagram",
"href": "#"
},
{
"icon": "fa-brands fa-linkedin",
"href": "#"
},
{
"icon": "fa-brands fa-youtube",
"href": "#"
}
]
},
"bottom": {
"copyright": {
"text": "Copyright©",
"brand": "GRAMENTHEME",
"rights": "All Rights Reserved."
},
"menuLinks": [
{
"label": "Terms & Conditions",
"href": "/contact"
},
{
"label": "Privacy Policy",
"href": "/contact"
},
{
"label": "Contact Us",
"href": "/contact"
}
]
}
}