From 1add9d4d9d477bc3ce070794df57df8f45955818 Mon Sep 17 00:00:00 2001 From: Le Nhut Huy Date: Mon, 2 Feb 2026 22:29:31 +0700 Subject: [PATCH] refactor ui and json data about --- app/about/about.json | 206 ++++++++++++++----------- app/about/page.tsx | 18 +-- app/about/types.ts | 106 ++++++++----- app/components/about/AboutFeatures.tsx | 72 ++++----- app/components/about/AboutIntro.tsx | 14 +- app/components/about/AboutMission.tsx | 49 +++--- app/components/about/AboutNews.tsx | 81 ++++------ app/components/about/AboutStats.tsx | 45 ------ app/components/about/AboutTeam.tsx | 42 ----- app/components/about/index.ts | 2 - app/layout.tsx | 119 +++++++------- 11 files changed, 344 insertions(+), 410 deletions(-) delete mode 100644 app/components/about/AboutStats.tsx delete mode 100644 app/components/about/AboutTeam.tsx diff --git a/app/about/about.json b/app/about/about.json index dcdfd59..fbfdab5 100644 --- a/app/about/about.json +++ b/app/about/about.json @@ -1,97 +1,121 @@ { - "hero": { - "title": "About Us", - "subtitle": "Global Education Simplified", - "breadcrumb": [ - "Home", - "About Us" - ], - "backgroundImage": "/assets/img/inner-page/breadcrumb.jpg" - }, - "intro": { - "heading": "Building Pathways to Your Immigration Success", - "description": "We provide expert guidance, personalized solutions, and transparent processes to help you achieve your immigration goals. Our dedicated team ensures a smooth journey, building pathways to your international success.", - "highlights": [ - "Expert Visa Consulting", - "Smooth Documentation Process", - "Personalized Student Guidance" - ], - "image": "/assets/img/inner-page/intro.jpg" - }, - "mission": { - "title": "Our Commitment to Your Future", - "items": [ - { - "label": "Mission", - "description": "To guide students with expert visa consulting, ensuring a smooth process from application to approval and turning dreams into reality." - }, - { - "label": "Vision", - "description": "To be the most trusted global education consultancy, expanding opportunities and building paths to international success for every student." - }, - { - "label": "Values", - "description": "Transparency, integrity, and excellence in every visa application, ensuring reliable assistance and professional support." - } - ] - }, - "stats": [ - { - "label": "Years Experience", - "value": 10 + "hero": { + "title": "About Us", + "subtitle": "Global Education Simplified", + "breadcrumb": ["Home", "About Us"], + "backgroundImage": "/assets/img/inner-page/breadcrumb.jpg" }, - { - "label": "Students Helped", - "value": 1000 + "intro": { + "subheading": "Company Intro", + "heading": "Building Pathways to Your Immigration Success", + "description": "We provide expert guidance, personalized solutions, and transparent processes to help you achieve your immigration goals. Our dedicated team ensures a smooth journey, building pathways to your international success.", + "image": "/assets/img/inner-page/intro.jpg" }, - { - "label": "Success Rate", - "value": "95%" + "mission": { + "subheading": "About Our Consultancy", + "heading": "Turning Study Abroad Dreams Into Reality", + "description": "We guide students with expert visa consulting, ensuring a smooth process from application to approval, turning study abroad aspirations into life-changing opportunities for a brighter future.", + "images": { + "main": "/assets/img/home-1/about/about-1.jpg", + "secondary": "/assets/img/home-1/about/about-02.jpg", + "bgShape": "/assets/img/home-1/about/Vector.png", + "planeShape": "/assets/img/home-1/about/plane.png", + "topShape": "/assets/img/home-1/about/shape.png", + "globeShape": "/assets/img/home-1/about/globe.png" + }, + "items": [ + { + "icon": "/assets/img/home-1/icon/01.svg", + "label": "Global Reach", + "description": "Expanding Opportunities Worldwide" + }, + { + "icon": "/assets/img/home-1/icon/01.svg", + "label": "Global Reach", + "description": "Expanding Opportunities Worldwide" + } + ], + "features": [ + "Fastest Visa form processing with skilled immigration agents", + "Partnership with International Educational Institutions" + ], + "ctaButton": { + "label": "Get Started", + "href": "/about" + } }, - { - "label": "Countries Covered", - "value": 50 + "features": { + "backgroundImage": "/assets/img/home-2/feature/bg-shape.png", + "subheading": "Your Travel Made Easy", + "heading": "Smooth Visa Journey Guaranteed", + "description": "We provide expert guidance for every visa application, ensuring smooth processing, personalized support, and reliable assistance", + "image": "/assets/img/home-2/feature/02.png", + "items": [ + { + "icon": "/assets/img/home-2/icon/01.png", + "title": "Expert Consultants", + "description": "Skilled and knowledgeable visa advisors. Skilled and knowledgeable visa advisors." + }, + { + "icon": "/assets/img/home-2/icon/01.png", + "title": "Personalized Support", + "description": "Skilled and knowledgeable visa advisors. Skilled and knowledgeable visa advisors." + }, + { + "icon": "/assets/img/home-2/icon/01.png", + "title": "Transparent Process", + "description": "Skilled and knowledgeable visa advisors. Skilled and knowledgeable visa advisors." + } + ], + "ctaButton": { + "label": "Get Started Today", + "href": "/contact" + } + }, + "news": { + "subheading": "Visa Tips & Guides", + "heading": "Latest Insights & Updates", + "ctaButton": { + "label": "view all articles", + "href": "/blog" + }, + "items": [ + { + "title": "Step-by-Step Guide to Applying for a Student Visa", + "category": "Student Visa", + "date": "20 August ,2025", + "comments": 8, + "author": { + "name": "Sohel", + "avatar": "/assets/img/home-1/news/client.png" + }, + "link": "/blog/step-by-step-guide-student-visa", + "thumbnail": "/assets/img/home-1/news/news-1.jpg" + }, + { + "title": "Tips to Prepare Financial Documents for Visa Approval", + "category": "IELTS / TOEFL", + "date": "20 August ,2025", + "comments": 8, + "author": { + "name": "Sohel", + "avatar": "/assets/img/home-1/news/client.png" + }, + "link": "/blog/financial-documents-visa-approval", + "thumbnail": "/assets/img/home-1/news/news-2.jpg" + }, + { + "title": "Post-Arrival Guide What Every Student Should Know", + "category": "Study Abroad", + "date": "20 August ,2025", + "comments": 8, + "author": { + "name": "Sohel", + "avatar": "/assets/img/home-1/news/client.png" + }, + "link": "/blog/post-arrival-guide-students", + "thumbnail": "/assets/img/home-1/news/news-3.jpg" + } + ] } - ], - "team": { - "title": "Meet Our Expert Team", - "members": [ - { - "name": "Eleanor Pena", - "role": "Lead Legal Consultant", - "image": "/assets/img/home-1/testimonial/client.png", - "social": { - "facebook": "href", - "linkedin": "href" - } - }, - { - "name": "Jerome Bell", - "role": "Senior Visa Expert", - "image": "/assets/img/home-1/testimonial/client-2.png", - "social": { - "facebook": "href", - "linkedin": "href" - } - }, - { - "name": "Marvin McKinney", - "role": "Immigration Advisor", - "image": "/assets/img/home-1/news/client.png", - "social": { - "facebook": "href", - "linkedin": "href" - } - }, - { - "name": "Kathryn Murphy", - "role": "Education Consultant", - "image": "/assets/img/home-1/testimonial/client.png", - "social": { - "facebook": "href", - "linkedin": "href" - } - } - ] - } } diff --git a/app/about/page.tsx b/app/about/page.tsx index c909cf5..0f7f075 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,13 +1,5 @@ -import { - AboutHero, - AboutIntro, - AboutMission, - AboutStats, - AboutTeam, - AboutFeatures, - AboutNews -} from '../components/about'; -import aboutData from './about.json'; +import { AboutHero, AboutIntro, AboutMission, AboutFeatures, AboutNews } from "../components/about"; +import aboutData from "./about.json"; export default function AboutPage() { return ( @@ -15,10 +7,8 @@ export default function AboutPage() { - - - - + + ); } diff --git a/app/about/types.ts b/app/about/types.ts index f8049fc..8d4cc1a 100644 --- a/app/about/types.ts +++ b/app/about/types.ts @@ -1,37 +1,73 @@ export interface AboutData { - hero: { - title: string; - subtitle: string; - breadcrumb: string[]; - backgroundImage: string; - }; - intro: { - heading: string; - description: string; - highlights: string[]; - image: string; - }; - mission: { - title: string; - items: { - label: string; - description: string; - }[]; - }; - stats: { - label: string; - value: number | string; - }[]; - team: { - title: string; - members: { - name: string; - role: string; - image: string; - social: { - facebook: string; - linkedin: string; - }; - }[]; - }; + hero: { + title: string; + subtitle: string; + breadcrumb: string[]; + backgroundImage: string; + }; + intro: { + subheading: string; + heading: string; + description: string; + image: string; + }; + mission: { + subheading: string; + heading: string; + description: string; + images: { + main: string; + secondary: string; + bgShape: string; + planeShape: string; + topShape: string; + globeShape: string; + }; + items: { + icon: string; + label: string; + description: string; + }[]; + features: string[]; + ctaButton: { + label: string; + href: string; + }; + }; + features: { + backgroundImage: string; + subheading: string; + heading: string; + description: string; + image: string; + items: { + icon: string; + title: string; + description: string; + }[]; + ctaButton: { + label: string; + href: string; + }; + }; + news: { + subheading: string; + heading: string; + ctaButton: { + label: string; + href: string; + }; + items: { + title: string; + category: string; + date: string; + comments: number; + author: { + name: string; + avatar: string; + }; + link: string; + thumbnail: string; + }[]; + }; } diff --git a/app/components/about/AboutFeatures.tsx b/app/components/about/AboutFeatures.tsx index 18992c7..30ee458 100644 --- a/app/components/about/AboutFeatures.tsx +++ b/app/components/about/AboutFeatures.tsx @@ -1,62 +1,44 @@ -import Link from 'next/link'; +import Link from "next/link"; +import { AboutData } from "../../about/types"; -const AboutFeatures = () => { +interface AboutFeaturesProps { + data: AboutData["features"]; +} + +const AboutFeatures = ({ data }: AboutFeaturesProps) => { return ( -
+
- img + img
- Your Travel Made Easy -

- Smooth Visa Journey Guaranteed -

+ {data.subheading} +

{data.heading}

-

- We provide expert guidance for every visa application, ensuring smooth processing, personalized support, and reliable assistance -

-
-
- img +

{data.description}

+ {data.items.map((item, index) => ( +
+
+ img +
+
+
{item.title}
+

{item.description}

+
-
-
Expert Consultants
-

- Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors. -

-
-
-
-
- img -
-
-
Personalized Support
-

- Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors. -

-
-
-
-
- img -
-
-
Transparent Process
-

- Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors. -

-
-
- - Get Started Today + ))} + + {data.ctaButton.label}
diff --git a/app/components/about/AboutIntro.tsx b/app/components/about/AboutIntro.tsx index 337ea63..0e828c2 100644 --- a/app/components/about/AboutIntro.tsx +++ b/app/components/about/AboutIntro.tsx @@ -1,7 +1,7 @@ -import { AboutData } from '../../about/types'; +import { AboutData } from "../../about/types"; interface AboutIntroProps { - data: AboutData['intro']; + data: AboutData["intro"]; } const AboutIntro = ({ data }: AboutIntroProps) => { @@ -10,14 +10,10 @@ const AboutIntro = ({ data }: AboutIntroProps) => {
- Company Intro -

- {data.heading} -

+ {data.subheading} +

{data.heading}

-

- {data.description} -

+

{data.description}

diff --git a/app/components/about/AboutMission.tsx b/app/components/about/AboutMission.tsx index 6b6ac48..ba6d6d8 100644 --- a/app/components/about/AboutMission.tsx +++ b/app/components/about/AboutMission.tsx @@ -1,57 +1,70 @@ -import Link from 'next/link'; -import { AboutData } from '../../about/types'; +import Link from "next/link"; +import { AboutData } from "../../about/types"; interface AboutMissionProps { - data: AboutData['mission']; + data: AboutData["mission"]; } const AboutMission = ({ data }: AboutMissionProps) => { return (
- img + img
- img + img
- img + img
- img + img
- img + img
- img + img
- About Our Consultancy -

- {data.title} -

+ {data.subheading} +

{data.heading}

+

+ {data.description} +

{data.items.map((item, index) => ( -
+
- - {item.label} + + {item.label}-

{item.description}

))}
- - Get Started +
    + {data.features.map((feature, index) => ( +
  • + + {feature} +
    • + ))} +
+ + {data.ctaButton.label}
diff --git a/app/components/about/AboutNews.tsx b/app/components/about/AboutNews.tsx index edf3287..f188cde 100644 --- a/app/components/about/AboutNews.tsx +++ b/app/components/about/AboutNews.tsx @@ -1,63 +1,48 @@ -import Link from 'next/link'; +import Link from "next/link"; +import { AboutData } from "../../about/types"; -const AboutNews = () => { - const newsItems = [ - { - image: '/assets/img/home-1/news/news-1.jpg', - category: 'Student Visa', - comments: '08', - date: '20 August ,2025', - title: 'Step-by-Step Guide to Applying for a Student Visa', - author: 'Sohel', - authorImage: '/assets/img/home-1/news/client.png' - }, - { - image: '/assets/img/home-1/news/news-2.jpg', - category: 'IELTS / TOEFL', - comments: '08', - date: '20 August ,2025', - title: 'Tips to Prepare Financial Documents for Visa Approval', - author: 'Sohel', - authorImage: '/assets/img/home-1/news/client.png' - }, - { - image: '/assets/img/home-1/news/news-3.jpg', - category: 'Study Abroad', - comments: '08', - date: '20 August ,2025', - title: 'Post-Arrival Guide What Every Student Should Know', - author: 'Sohel', - authorImage: '/assets/img/home-1/news/client.png' - } - ]; +interface AboutNewsProps { + data: AboutData["news"]; +} +const AboutNews = ({ data }: AboutNewsProps) => { return (
- Visa Tips & Guides -

- Latest Insights & Updates -

+ {data.subheading} +

{data.heading}

- - view all articies + + {data.ctaButton.label}
- {newsItems.map((item, index) => ( + {data.items.map((item, index) => (
- img + img {item.category}
-
-
-
-
+
+
+
+
@@ -66,16 +51,14 @@ const AboutNews = () => { _ {item.date}

- - {item.title} - + {item.title}

- img - By {item.author} + img + By {item.author.name}
- + View Articles
diff --git a/app/components/about/AboutStats.tsx b/app/components/about/AboutStats.tsx deleted file mode 100644 index 9f08697..0000000 --- a/app/components/about/AboutStats.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { AboutData } from '../../about/types'; - -interface AboutStatsProps { - data: AboutData['stats']; -} - -const AboutStats = ({ data }: AboutStatsProps) => { - return ( -
-
- img -
-
-
- Did You Know -

- Our Achievements in Numbers -

-
-
-
-
-
- {data.map((stat, index) => { - // Helper to extract number and suffix from value - const valueStr = String(stat.value); - const numericMatch = valueStr.match(/(\d+)/); - const numericValue = numericMatch ? numericMatch[0] : "0"; - const suffix = valueStr.replace(numericValue, ""); - - return ( -
-

00{suffix}

-
{stat.label}
-
- ); - })} -
-
-
-
- ); -}; - -export default AboutStats; diff --git a/app/components/about/AboutTeam.tsx b/app/components/about/AboutTeam.tsx deleted file mode 100644 index 317d0ad..0000000 --- a/app/components/about/AboutTeam.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { AboutData } from '../../about/types'; - -interface AboutTeamProps { - data: AboutData['team']; -} - -const AboutTeam = ({ data }: AboutTeamProps) => { - return ( -
-
-
- Our Expert Team -

- {data.title} -

-
-
- {data.members.map((member, index) => ( -
-
-
- {member.name} -
-
-

{member.name}

- {member.role} -
- {member.social.facebook && } - {member.social.linkedin && } - -
-
-
-
- ))} -
-
-
- ); -}; - -export default AboutTeam; diff --git a/app/components/about/index.ts b/app/components/about/index.ts index 288c398..0f58ea8 100644 --- a/app/components/about/index.ts +++ b/app/components/about/index.ts @@ -3,5 +3,3 @@ export { default as AboutIntro } from './AboutIntro'; export { default as AboutMission } from './AboutMission'; export { default as AboutFeatures } from './AboutFeatures'; export { default as AboutNews } from './AboutNews'; -export { default as AboutStats } from './AboutStats'; -export { default as AboutTeam } from './AboutTeam'; diff --git a/app/layout.tsx b/app/layout.tsx index 8e0e12f..f4d1e35 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,76 +1,75 @@ import type { Metadata } from "next"; import "./globals.css"; - -import Header from "./components/Header"; -import Footer from "./components/Footer"; +import Header from "./components/layout/Header/Header"; +import Footer from "./components/layout/Footer/Footer"; import Loader from "./components/Loader"; import BackToTop from "./components/BackToTop"; import MouseCursor from "./components/MouseCursor"; import Script from "next/script"; export const metadata: Metadata = { - title: "Visaway – Immigration & Visa Consulting HTML Template", - description: "Visaway – Immigration & Visa Consulting HTML Template", + title: "Visaway – Immigration & Visa Consulting HTML Template", + description: "Visaway – Immigration & Visa Consulting HTML Template", }; export default function RootLayout({ - children, + children, }: Readonly<{ - children: React.ReactNode; + children: React.ReactNode; }>) { - return ( - - - {/* Favicon */} - - - {/* Bootstrap min.css */} - - {/* All Min Css */} - - {/* Animate.css */} - - {/* Magnific Popup.css */} - - {/* MeanMenu.css */} - - {/* Odometer.css */} - - {/* Swiper Bundle.css */} - - {/* Nice Select.css */} - - {/* Main.css */} - - - - - - -
- - {children} - -