minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

feat: create Partnership and Blog functional components

Browse Source
This commit is contained in:
hkiett265
2026-04-14 11:40:55 +07:00
parent ad68b7d8c4
commit 4bfad8481b
10 changed files with 511 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
app/blog/blog-page.css Normal file
View File

@@ -0,0 +1,176 @@
/* ============================================
Blog Page — Scoped Styles
Scope: .blog-page
============================================ */
/* Reset heading override từ main.css */
.blog-page h1,
.blog-page h2,
.blog-page h3,
.blog-page h4 {
font-size: unset;
font-weight: unset;
line-height: unset;
margin: 0;
padding: 0;
}
/* Typography classes thay thế h1/h2/h3 */
.blog-page .blog-heading {
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.15;
}
.blog-page .blog-card-title {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
}
.blog-page .blog-widget-title {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
}
/* ---------- Color tokens ---------- */
.blog-page .bg-brand-blue { background-color: rgb(38, 60, 111); }
.blog-page .text-brand-blue { color: rgb(38, 60, 111); }
.blog-page .border-brand-blue { border-color: rgb(38, 60, 111); }
.blog-page .bg-brand-light { background-color: #f8fbff; }
.blog-page .text-brand-light { color: #f8fbff; }
.blog-page .bg-brand-hover { background-color: #2d3a8c; }
.blog-page .hover\:bg-brand-hover:hover { background-color: #2d3a8c; }
.blog-page .text-ui-text { color: #111827; }
.blog-page .text-ui-muted { color: #6b7280; }
.blog-page .bg-ui-bg { background-color: #f9fafb; }
.blog-page .border-ui-border { border-color: #e5e7eb; }
/* hover:text-brand-blue */
.blog-page .hover\:text-brand-blue:hover { color: #1b254b; }
.blog-page .hover\:border-brand-blue:hover { border-color: #1b254b; }
/* group-hover */
.blog-page .group:hover .group-hover\:text-brand-blue { color: #1b254b; }
.blog-page .group:hover .group-hover\:border-brand-blue { border-color: #1b254b; }
.blog-page .group:hover .group-hover\:gap-2 { gap: 0.5rem; }
.blog-page .group:hover .group-hover\:scale-105 { transform: scale(1.05); }
/* shadow tokens */
.blog-page .shadow-soft {
box-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
}
.blog-page .shadow-hover {
box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}
.blog-page .hover\:shadow-hover:hover {
box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}
/* border-brand-blue/20, border-brand-blue/50 */
.blog-page .border-brand-blue\/20 { border-color: rgb(27 37 75 / 0.2); }
.blog-page .border-brand-blue\/50 { border-color: rgb(27 37 75 / 0.5); }
.blog-page .hover\:border-brand-blue\/50:hover { border-color: rgb(27 37 75 / 0.5); }
/* text-brand-blue/40 */
.blog-page .text-brand-blue\/40 { color: rgb(27 37 75 / 0.4); }
/* text-brand-light/80, /60 */
.blog-page .text-brand-light\/80 { color: rgb(248 251 255 / 0.8); }
.blog-page .text-brand-light\/60 { color: rgb(248 251 255 / 0.6); }
/* bg-white/10, /90 */
.blog-page .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
.blog-page .bg-white\/90 { background-color: rgb(255 255 255 / 0.9); }
/* border-white/20 */
.blog-page .border-white\/20 { border-color: rgb(255 255 255 / 0.2); }
/* placeholder */
.blog-page .placeholder-white\/50::placeholder { color: rgb(255 255 255 / 0.5); }
/* Category filter buttons */
.blog-page #category-filters button {
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
padding-top: 0.4rem !important;
padding-bottom: 0.4rem !important;
border-radius: 9999px !important;
font-size: 0.8rem !important;
}
/* Category filter hover — viền sáng lên */
.blog-page #category-filters button:not(:first-child):hover {
border-color: #1b254b !important;
color: #1b254b !important;
}
/* Newsletter input placeholder */
.blog-page .newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
/* Newsletter widget */
.blog-page .folder-tab {
background-color: #263c6f !important;
clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
border-radius: 12px !important;
}
.blog-page .folder-tab input {
border-radius: 8px !important;
padding: 0.35rem 0.75rem !important;
font-size: 0.875rem !important;
background-color: rgba(255,255,255,0.12) !important;
border: 1px solid rgba(255,255,255,0.25) !important;
color: white !important;
}
.blog-page .folder-tab input::placeholder {
color: rgba(255,255,255,0.5) !important;
}
.blog-page .folder-tab button[type="submit"] {
border-radius: 8px !important;
padding: 0.35rem 0.75rem !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
background-color: white !important;
color: #1b254b !important;
}
/* Pagination buttons */
.blog-page .border-ui-border[class*="w-10"] {
border-radius: 8px !important;
}
.blog-page .border-ui-border[class*="w-10"]:hover {
border-color: rgb(38, 60, 111) !important;
color: rgb(38, 60, 111) !important;
}
.blog-page .bg-brand-blue[class*="w-10"] {
border-radius: 8px !important;
background-color: rgb(38, 60, 111) !important;
}
/* Pagination */
.blog-page .pg-btn {
border-radius: 8px !important;
transition: border-color 0.2s, color 0.2s;
}
.blog-page .pg-btn:hover {
border-color: rgb(38, 60, 111) !important;
color: rgb(38, 60, 111) !important;
}
.blog-page .pg-active {
background-color: rgb(38, 60, 111) !important;
border: none !important;
}

26
app/blog/page.tsx
View File

@@ -0,0 +1,26 @@
import "./blog-page.css";
import FeaturedHero from "../components/blog/FeaturedHero";
import CategoryFilters from "../components/blog/CategoryFilters";
import NewsGrid from "../components/blog/NewsGrid";
import BlogSidebar from "../components/blog/BlogSidebar";
export default function BlogPage() {
return (
<main className="blog-page w-full min-h-screen bg-ui-bg pb-20">
<FeaturedHero />
<div className="max-w-[1440px] mx-auto px-6 lg:px-8">
<div className="flex flex-col lg:flex-row gap-12">
{/* Left: filters + news grid */}
<div className="flex-1">
<CategoryFilters />
<NewsGrid />
</div>
{/* Right: sidebar */}
<BlogSidebar />
</div>
</div>
</main>
);
}