feat: update blog structure and content for balodeplao.com

This commit is contained in:
2026-03-10 12:36:58 +09:00
committed by Thuan Bui
parent a300564d0a
commit e14ce351e1
17 changed files with 132 additions and 763 deletions
-8
View File
@@ -2,7 +2,6 @@
import BaseLayout from "@/layouts/BaseLayout.astro";
import { getImage } from "astro:assets";
import Content2 from "@/components/widgets/Content2.astro";
import Values from "@/components/widgets/Values.astro";
import aboutImage from "@/assets/images/about-office.webp";
const metadata = {
@@ -76,11 +75,4 @@ const optimizedImage = await getImage({
},
]}
/>
<Values
items={values}
columns={3}
tagline="Our Values"
title="What Defines Us"
subtitle="Principles that guide our daily work"
/>
</BaseLayout>
+1 -2
View File
@@ -35,8 +35,7 @@ const metadata = {
<div class="relative mx-auto max-w-5xl">
<Headline
tagline="Blog"
title="Our Publications"
subtitle="Explore the latest news, tutorials, and articles from our team."
title="Our Journey and Adventures"
classes={{
container: "reveal mb-12 text-center",
title:
-45
View File
@@ -1,6 +1,5 @@
---
import BaseLayout from "@/layouts/BaseLayout.astro";
import Features from "@/components/widgets/Features.astro";
import Content from "@/components/widgets/Content.astro";
import Form from "@/components/ui/Form.astro";
@@ -19,48 +18,4 @@ const visionText = ["Get in touch with us to discuss your next project."];
>
<Form />
</div>
<Features
tagline="Contact Means"
title="We are here to help you"
subtitle="Choose the communication channel you prefer. We respond in less than 24 hours."
classes={{ container: "pt-0 md:pt-0" }}
features={[
{
title: "Phone",
description: "+123 456 7890",
icon: "lucide:phone",
iconClass: "bg-green-500/10 text-green-400",
},
{
title: "Email",
description: "contact@company.com",
icon: "lucide:mail",
iconClass: "bg-yellow-500/10 text-yellow-400",
},
{
title: "Location",
description: "City, Country",
icon: "lucide:map-pin",
iconClass: "bg-red-500/10 text-red-400",
},
{
title: "Personalized Attention",
description: "We understand your needs to offer tailored solutions.",
icon: "lucide:user-check",
iconClass: "bg-blue-500/10 text-blue-400",
},
{
title: "Technical Support",
description: "We resolve any doubt or technical incident quickly.",
icon: "lucide:wrench",
iconClass: "bg-purple-500/10 text-purple-400",
},
{
title: "Strategic Consulting",
description: "We advise you to ensure the success of your project.",
icon: "lucide:briefcase",
iconClass: "bg-pink-500/10 text-pink-400",
},
]}
/>
</BaseLayout>
+51 -120
View File
@@ -2,133 +2,64 @@
import BaseLayout from "@/layouts/BaseLayout.astro";
import { siteConfig } from "@/config/site";
import Hero from "@/components/widgets/Hero.astro";
import Features from "@/components/widgets/Features.astro";
import devImg from "@/assets/images/dev_balanced.png";
import openSourceImg from "@/assets/images/open-source.png";
import Content2 from "@/components/widgets/Content2.astro";
import PostItem from "@/components/blog/PostItem.astro";
import { getCollection } from "astro:content";
const metadata = {
title: `${siteConfig.name} — The next step for your project`,
title: `${siteConfig.name} — You Only Live Once`,
description:
"A modern and professional template for your web projects with Astro and Tailwind CSS. Boost your development with a solid foundation.",
"Chào mừng bạn đến với blog của chúng tôi, nơi chúng tôi chia sẻ những câu chuyện, kiến thức và trải nghiệm về cuộc sống. Hãy cùng khám phá và tận hưởng hành trình này nhé!",
ignoreTitleTemplate: true,
};
const blogEntries = await getCollection("blog");
const latestPosts = blogEntries
.filter((post) => post.data && post.data.pubDate)
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
.slice(0, 5);
const firstRow = latestPosts.slice(0, 2);
const secondRow = latestPosts.slice(2, 5);
---
<BaseLayout {metadata}>
<Hero
title={`Starter Template for <br class="hidden md:block" /> <span class="bg-linear-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">Web Developers</span>`}
tagline="Astro v5 + Tailwind v4"
description={`${siteConfig.description}`}
actions={[
{
text: "Get Started",
href: "https://github.com/devgelo-labs/astro-starter-pro",
variant: "primary",
icon: "lucide:github",
},
{
text: "Our Services",
href: "/services",
variant: "secondary",
icon: "lucide:arrow-right",
ariaLabel: "Learn more about our services",
},
]}
title={`You Only Live Once`}
tagline=""
description=""
bgImage="https://images.balodeplao.com/460cc863-81ff-44b4-811f-422558bd2078.jpg"
/>
<Features
tagline="Features"
title="What's Included"
subtitle="A selection of tools and configurations to streamline your workflow."
features={[
{
title: "Optimized SEO",
description:
"Base configuration for Meta tags, Open Graph, and Sitemap generation.",
icon: "lucide:scan-search",
iconClass: "bg-blue-500/10 text-blue-400",
},
{
title: "High Performance",
description: "Lightweight structure for fast load times.",
icon: "lucide:zap",
iconClass: "bg-purple-500/10 text-purple-400",
},
{
title: "Tailwind v4",
description:
"Integrated configuration with the latest version of Tailwind CSS.",
icon: "lucide:palette",
iconClass: "bg-pink-500/10 text-pink-400",
},
]}
/>
<Content2
items={[
{
title: "Responsive Design",
description:
"Base configuration for Meta tags, Open Graph, and Sitemap generation.",
icon: "lucide:scan-search",
iconClass: "bg-blue-500/10 text-blue-400",
},
{
title: "High Performance",
description: "Lightweight structure for fast load times.",
icon: "lucide:zap",
iconClass: "bg-purple-500/10 text-purple-400",
},
{
title: "Tailwind v4",
description:
"Integrated configuration with the latest version of Tailwind CSS.",
icon: "lucide:palette",
iconClass: "bg-pink-500/10 text-pink-400",
},
]}
image={devImg}
imageAlt="Development"
>
<Fragment>
<h3 class="text-2xl font-bold tracking-tight sm:text-3xl mb-2">
Development
</h3>
We provide a solid foundation to start your projects with best practices.
</Fragment>
</Content2>
<Content2
items={[
{
title: "Open Source",
description:
"Developed under the MIT license, free for personal and commercial use.",
icon: "lucide:github",
iconClass: "bg-indigo-500/10 text-indigo-400",
},
{
title: "Community Driven",
description:
"Built with the feedback and contributions of the developer community.",
icon: "lucide:users",
iconClass: "bg-orange-500/10 text-orange-400",
},
{
title: "Regular Updates",
description:
"Continuously improved with the latest technologies and best practices.",
icon: "lucide:refresh-cw",
iconClass: "bg-teal-500/10 text-teal-400",
},
]}
image={openSourceImg}
imageAlt="Community and Open Source"
isReversed={true}
>
<Fragment>
<h3 class="text-2xl font-bold tracking-tight sm:text-3xl mb-2">
Open Source & Community
</h3>
Join the revolution of modern web development. This project is open for everyone
to use, learn from, and contribute to.
</Fragment>
</Content2>
<section class="relative px-4 py-12 sm:px-6 lg:px-8 md:py-36">
<div class="mx-auto max-w-5xl">
<div class="grid gap-8 md:grid-cols-2 mb-8">
{firstRow.map((post) => <PostItem post={post} />)}
</div>
<div class="grid gap-8 md:grid-cols-3 mb-12">
{secondRow.map((post) => <PostItem post={post} />)}
</div>
<div class="text-center">
<a
href="/blog"
class="inline-flex items-center gap-2 rounded-xl border border-border bg-card px-6 py-3 text-sm font-medium text-foreground transition-colors hover:bg-muted"
>
Xem tất cả bài viết
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</section>
</BaseLayout>
-128
View File
@@ -1,128 +0,0 @@
---
import BaseLayout from "@/layouts/BaseLayout.astro";
import ServiceList from "@/components/widgets/ServiceList.astro";
import Content from "@/components/widgets/Content.astro";
import Content2 from "@/components/widgets/Content2.astro";
import webDevImg from "@/assets/images/services/web-dev.webp";
import seoImg from "@/assets/images/services/seo.webp";
import consultingImg from "@/assets/images/services/consulting.webp";
const services = [
{
title: "Web Development",
description: "Static and dynamic sites built for the modern era.",
icon: "lucide:globe",
},
{
title: "SEO Optimization",
description: "We ensure your content is found by those looking for it.",
icon: "lucide:search",
},
{
title: "IT Consulting",
description: "Technical advice to scale your projects to the next level.",
icon: "lucide:rocket",
},
];
const metadata = {
title: "Services",
description:
"Discover our web development, SEO optimization, and technology consulting services.",
};
---
<BaseLayout {metadata}>
<Content
tagline="Services"
title="Our Services"
description={[
"Comprehensive solutions designed to maximize the potential of your digital presence.",
]}
/>
<ServiceList services={services} classes={{ container: "pt-0 md:pt-0" }} />
<Content
tagline="Web Development"
title="Modern Web Development"
description={[
"We specialize in building fast, secure, and scalable websites using the latest technologies. We transform your vision into an impactful digital experience.",
]}
classes={{ container: "pb-0 md:pb-0" }}
/>
<Content2
items={[
{
title: "Responsive Design",
description:
"Your site will look perfect on any device, from mobiles to desktop screens.",
},
{
title: "Optimized Performance",
description:
"Fast loading to improve user experience and SEO positioning.",
},
]}
image={webDevImg}
imageAlt="Modern Web Development"
classes={{ container: "pt-0 md:pt-0" }}
>
<Fragment>
<h3 class="text-2xl font-bold tracking-tight sm:text-3xl mb-2">
Modern Web Development
</h3>
We specialize in building fast, secure, and scalable websites using the latest
technologies. We transform your vision into an impactful digital experience.
</Fragment>
</Content2>
<Content2
isReversed={true}
items={[
{
title: "SEO Audit",
description:
"We deeply analyze your website to identify technical and content improvement opportunities.",
},
{
title: "Content Strategy",
description:
"We create relevant content plans that attract and retain your target audience.",
},
]}
image={seoImg}
imageAlt="SEO Strategies"
>
<Fragment>
<h3 class="text-2xl font-bold tracking-tight sm:text-3xl mb-2">
SEO Optimization
</h3>
We help your business get found by the right people. Our organic positioning
strategies are designed to improve your organic visibility.
</Fragment>
</Content2>
<Content2
items={[
{
title: "Digital Transformation",
description:
"We guide you in adopting new technologies to optimize your business processes.",
},
{
title: "Software Architecture",
description:
"We design robust and scalable systems prepared for future growth.",
},
]}
image={consultingImg}
imageAlt="Technology Consulting"
>
<Fragment>
<h3 class="text-2xl font-bold tracking-tight sm:text-3xl mb-2">
Technology Consulting
</h3>
We accompany you in critical decision-making. We evaluate your current infrastructure
and design personalized roadmaps to take your company to the next technological
level.
</Fragment>
</Content2>
</BaseLayout>
-231
View File
@@ -1,231 +0,0 @@
---
import BaseLayout from "@/layouts/BaseLayout.astro";
import Hero from "@/components/widgets/Hero.astro";
import Features from "@/components/widgets/Features.astro";
import Content from "@/components/widgets/Content.astro";
import Content2 from "@/components/widgets/Content2.astro";
import ServiceList from "@/components/widgets/ServiceList.astro";
import Values from "@/components/widgets/Values.astro";
import aboutImage from "@/assets/images/about-office.webp";
const heroProps = {
title: "Lorem Ipsum Dolor Sit Amet",
tagline: "Hero",
description:
"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
actions: [
{
text: "Get Started",
href: "https://github.com/devgelo-labs/astro-starter-pro",
variant: "primary",
icon: "lucide:github",
},
{
text: "View Details",
href: "#",
variant: "secondary",
icon: "lucide:arrow-right",
},
],
};
const featuresProps = {
title: "Quis Nostrud Exercitation",
subtitle: "Ullamco laboris nisi ut aliquip ex ea commodo",
tagline: "Features",
features: [
{
title: "Lorem Ipsum",
description: "Dolor sit amet, consectetur adipiscing elit.",
icon: "lucide:box",
},
{
title: "Sed Do Eiusmod",
description: "Tempor incididunt ut labore et dolore magna aliqua.",
icon: "lucide:check",
},
{
title: "Ut Enim Ad",
description: "Minim veniam, quis nostrud exercitation ullamco.",
icon: "lucide:eye",
},
],
};
const contentProps = {
title: "Duis Aute Irure Dolor",
description: [
"In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.",
],
tagline: "Content",
image: aboutImage,
imageAlt: "Placeholder image",
isReversed: false,
actions: [
{
text: "Call to Action",
href: "#",
variant: "primary",
icon: "lucide:github",
},
{
text: "View details",
href: "#",
variant: "secondary",
icon: "lucide:arrow-right",
},
],
};
const content2Props = {
title: "Duis Aute Irure Dolor",
description: [
"In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.",
],
tagline: "Content2",
image: aboutImage,
imageAlt: "Placeholder image",
isReversed: false,
actions: [
{
text: "Call to Action",
href: "#",
variant: "primary",
icon: "lucide:github",
},
{
text: "View details",
href: "#",
variant: "secondary",
icon: "lucide:arrow-right",
},
],
};
const content2InvertedProps = {
items: [
{
title: "Open Source",
description:
"Developed under the MIT license, free for personal and commercial use.",
icon: "lucide:github",
iconClass: "bg-indigo-500/10 text-indigo-400",
},
{
title: "Community Driven",
description:
"Built with the feedback and contributions of the developer community.",
icon: "lucide:users",
iconClass: "bg-orange-500/10 text-orange-400",
},
{
title: "Regular Updates",
description:
"Continuously improved with the latest technologies and best practices.",
icon: "lucide:refresh-cw",
iconClass: "bg-teal-500/10 text-teal-400",
},
],
image: aboutImage,
imageAlt: "Community and Open Source",
isReversed: true,
actions: [
{
text: "Call to Action",
href: "#",
variant: "primary",
icon: "lucide:github",
},
{
text: "View details",
href: "#",
variant: "secondary",
icon: "lucide:arrow-right",
},
],
title: "Open Source",
subtitle:
"Built with the feedback and contributions of the developer community.",
tagline: "Content2",
};
const serviceListProps = {
services: [
{
title: "Voluptatem Accusantium",
description: "Doloremque laudantium, totam rem aperiam.",
icon: "lucide:rocket",
},
{
title: "Ipsa Quae Ab",
description: "Illo inventore veritatis et quasi architecto.",
icon: "lucide:lightbulb",
},
{
title: "Beatae Vitae Dicta",
description: "Sunt explicabo. Nemo enim ipsam voluptatem.",
icon: "lucide:wrench",
},
],
title: "Services that will help you achieve your goals",
subtitle: "What we offer",
tagline: "Services",
};
const valuesProps = {
items: [
{
title: "Corporate",
description:
"Curabitur dignissim, felis non sollicitudin molestie, urna mauris pellentesque velit, ut eleifend.",
},
{
title: "Creative",
description:
"Aenean condimentum finibus mauris, a fermentum justo pan eget. Sed ultricies, neque quis.",
},
{
title: "Startups",
description:
"Donec sed orci tincidunt, aliquam nisl a, condimentum nunc. Nulla varius ex nec ante feugiat.",
},
{
title: "SaaS",
description:
"Phasellus tristique, elit dapibus cursus facilisis, lorem augue fringilla nunc, vitae fermentum.",
},
{
title: "Education",
description:
"In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et.",
},
{
title: "Real Estate",
description:
"Fusce at massa nec sapien auctor gravida in in tellus. Vivamus a tristique metus, et molestie.",
},
],
columns: 3 as const,
tagline: "Values",
title: "What defines us",
subtitle: "Principles that guide our daily work",
};
const metadata = {
title: "Widgets - Astro Starter Pro",
description: "Showcase of available components and widgets.",
ignoreTitleTemplate: true,
};
---
<BaseLayout {metadata}>
<Hero {...heroProps} />
<Features {...featuresProps} />
<Content {...contentProps} />
<Content2 {...content2Props} />
<Content2 {...content2InvertedProps} />
<ServiceList {...serviceListProps} />
<Values {...valuesProps} />
</BaseLayout>