diff --git a/app/blog/components/Breadcrumb.tsx b/app/blog/components/Breadcrumb.tsx new file mode 100644 index 0000000..2be740c --- /dev/null +++ b/app/blog/components/Breadcrumb.tsx @@ -0,0 +1,23 @@ +export default function Breadcrumb() { + return ( +
+
+ img +
+
+
+

Blog Stardard

+
    +
  • + Home +
    • +
  • + +
    • +
  • Blog Stardard
    • +
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/blog/components/NewsList.tsx b/app/blog/components/NewsList.tsx new file mode 100644 index 0000000..fe2c610 --- /dev/null +++ b/app/blog/components/NewsList.tsx @@ -0,0 +1,90 @@ +export default function NewsList() { + return ( +
+ {/* News Post 1 */} +
+
+ img +
+
+
    +
  • + By Admin +
    • +
  • + 11 March 2025 +
    • +
  • + 0 Comments +
    • +
+

+ How to Avoid Common Mistakes in Visa Applications +

+

+ A business consultant provides expert guidance, strategic planning, and problem-solving support—helping startups avoid mistakes, grow faster, and operate more efficiently from day one. +

+ + VIEW MORE + +
+
+ {/* News Post 2 */} +
+
+ img +
+
+
    +
  • + By Admin +
    • +
  • + 11 March 2025 +
    • +
  • + 0 Comments +
    • +
+

+ The Role of Immigration Consultants in Your Journey +

+

+ Immigration consultants play a vital role in guiding applicants, simplifying complex processes, offering expert advice, and ensuring successful outcomes for study, work, or permanent residency abroad. +

+ + VIEW MORE + +
+
+ {/* News Post 3 */} +
+
+ img +
+
+
    +
  • + By Admin +
    • +
  • + 11 March 2025 +
    • +
  • + 0 Comments +
    • +
+

+ Latest Immigration Policy Updates You Should Know +

+

+ Stay informed with the latest immigration policy updates, ensuring you understand new rules, visa requirements, and opportunities that impact your study, work, or migration journey abroad. +

+ + VIEW MORE + +
+
+
+ ); +} \ No newline at end of file diff --git a/app/blog/components/NewsSection.tsx b/app/blog/components/NewsSection.tsx new file mode 100644 index 0000000..4ddd43d --- /dev/null +++ b/app/blog/components/NewsSection.tsx @@ -0,0 +1,17 @@ +import NewsList from "./NewsList"; +import Sidebar from "./Sidebar"; + +export default function NewsSection() { + return ( +
+
+
+
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/blog/components/Sidebar.tsx b/app/blog/components/Sidebar.tsx new file mode 100644 index 0000000..19e2c73 --- /dev/null +++ b/app/blog/components/Sidebar.tsx @@ -0,0 +1,97 @@ +export default function Sidebar() { + return ( +
+
+ {/* Search Widget */} +
+
+
+ + +
+
+
+ {/* Categories */} +
+
+

Cetegories

+
+
+ +
+
+ {/* Recent Post */} +
+
+

Recent Post

+
+
+
+
+ img +
+
+
+ Top Countries for Higher Education in 2025 +
+
    +
  • March 26, 2025
    • +
+
+
+
+
+ img +
+
+
+ The Benefits of Hiring a Visa Consultant +
+
    +
  • March 26, 2025
    • +
+
+
+
+
+ img +
+
+
+ How to Prepare for Your Immigration Interview +
+
    +
  • March 26, 2025
    • +
+
+
+
+
+ {/* Tag Cloud */} +
+
+

Tag Cloud

+
+
+
+ WorkVisa + FamilyVisa + StudentVisa + VisaUpdates + TravelVisa + StudyAbroad +
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/blog/page.tsx b/app/blog/page.tsx index 43ac455..90f5250 100644 --- a/app/blog/page.tsx +++ b/app/blog/page.tsx @@ -1,144 +1,11 @@ -"use client"; - -import { useState } from "react"; -import blogData from "./blog.json"; - -export default function BlogPage() { - const [selectedCategory, setSelectedCategory] = useState("all"); - - const filteredPosts = - selectedCategory === "all" - ? blogData.posts - : blogData.posts.filter( - (post) => post.category.toLowerCase() === selectedCategory, - ); +import Breadcrumb from "./components/Breadcrumb"; +import NewsSection from "./components/NewsSection"; +export default function NewsPage() { return ( -
-
- {/* Header */} -
-

- {blogData.title} -

-

{blogData.subtitle}

-
- - {/* Featured Post */} -
-
-
- - Nổi bật - - - {blogData.featured.category} - -
-

- {blogData.featured.title} -

-

- {blogData.featured.excerpt} -

-
-
- 👤 {blogData.featured.author} - 📅 {blogData.featured.date} - ⏱️ {blogData.featured.readTime} -
- -
-
-
- - {/* Category Filter */} -
-
- {blogData.categories.map((category) => ( - - ))} -
-
- - {/* Blog Posts Grid */} -
- {filteredPosts.map((post) => ( -
- {/* Post Image */} -
- 📷 {post.category} -
- - {/* Post Content */} -
- {/* Category & Date */} -
- - {post.category} - - {post.date} -
- - {/* Title */} -

- {post.title} -

- - {/* Excerpt */} -

- {post.excerpt} -

- - {/* Tags */} -
- {post.tags.map((tag, index) => ( - - #{tag} - - ))} -
- - {/* Meta Info */} -
- 👤 {post.author} - ⏱️ {post.readTime} -
- - {/* Read More Button */} - -
-
- ))} -
- - {/* Load More */} -
- -
-
-
+ <> + + + ); -} +} \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index a2dc41e..a461c50 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1 @@ -@import "tailwindcss"; - -:root { - --background: #ffffff; - --foreground: #171717; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} +@import "tailwindcss"; \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 4b74f00..4619a98 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,18 +1,9 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; + import Header from "./components/Header"; import Footer from "./components/Footer"; - -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); +import Script from "next/script"; export const metadata: Metadata = { title: "VisaService - Dịch vụ visa uy tín", @@ -27,12 +18,39 @@ export default function RootLayout({ }>) { return ( - + + {/* Nhúng các file CSS template như news.html */} + + + + + + + + + + + +
{children}