ðĻ Fix: Add Header and Footer to all pages + standardize colors
MAJOR FIX - Pages were missing Header and Footer components: â Added Header import to all pages â Added Footer import to all pages â Added <Header /> and <Footer /> components â Changed custom colors to standard Tailwind (green-600, gray-*) â Fixed: about-us, services, products, blog pages COLOR SCHEME: - primary-600 â green-600 (trust, growth) - secondary-900 â gray-900 (professional) - secondary-800 â gray-800 - secondary-600 â gray-600 - secondary-200 â gray-200 All pages now show proper Header navigation and Footer with links!
This commit is contained in:
Kunthawat Greethong
@@ -1,116 +1,33 @@
|
||||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
import FloatingContact from '../../components/FloatingContact.astro';
|
||||
import { siteConfig } from '../../data/site-config';
|
||||
---
|
||||
|
||||
<BaseLayout title="āđāļāļĩāđāļĒāļ§āļāļąāļāđāļĢāļē" description="āđāļĢāļĩāļĒāļāļĢāļđāđāđāļāļīāđāļĄāđāļāļīāļĄāđāļāļĩāđāļĒāļ§āļāļąāļāļāļĩāļĨāļāļĨāļąāļŠāđāļāļ āļāļđāđāđāļāļĩāđāļĒāļ§āļāļēāļāļāđāļēāļāļ§āļąāļŠāļāļļāļāđāļāđāļĨāļ°āļāļļāļāļāļĢāļāđāļĢāļ°āļāļāļāđāļ">
|
||||
<Header />
|
||||
|
||||
<main class="pt-32 pb-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- Hero -->
|
||||
<div class="relative h-[400px] -mt-32 mb-12 rounded-b-3xl overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-secondary-900 via-secondary-800 to-secondary-900" />
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900" />
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
āđāļāļĩāđāļĒāļ§āļāļąāļ<span class="text-primary-400">{siteConfig.name}</span>
|
||||
āđāļāļĩāđāļĒāļ§āļāļąāļ<span class="text-green-400">{siteConfig.name}</span>
|
||||
</h1>
|
||||
<p class="text-xl text-secondary-200">
|
||||
<p class="text-xl text-gray-200">
|
||||
āļāļđāđāđāļāļĩāđāļĒāļ§āļāļēāļāļāđāļēāļāļ§āļąāļŠāļāļļāļāđāļāđāļĨāļ°āļāļļāļāļāļĢāļāđāļĢāļ°āļāļāļāđāļ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Company Story -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-secondary-900 mb-6">āđāļĢāļ·āđāļāļāļĢāļēāļ§āļāļāļāđāļĢāļē</h2>
|
||||
<div class="space-y-4 text-secondary-600">
|
||||
<p>
|
||||
{siteConfig.nameTh} āļāđāļāļāļąāđāļāļāļķāđāļāļāđāļ§āļĒāļāļ§āļēāļĄāļĄāļļāđāļāļĄāļąāđāļāļāļĩāđāļāļ°āđāļāđāļāļāļđāđāļāļģāļāđāļēāļāļāļēāļĢāļāļąāļāļŦāļēāļ§āļąāļŠāļāļļāļāđāļ
|
||||
āđāļĨāļ°āļāļļāļāļāļĢāļāđāļĢāļ°āļāļāļāđāļāļāļļāļāļ āļēāļāļŠāļđāļāđāļŦāđāļāļąāļāļĨāļđāļāļāđāļēāđāļāļāļĢāļ°āđāļāļĻāđāļāļĒ
|
||||
</p>
|
||||
<p>
|
||||
āļāđāļ§āļĒāļāļĢāļ°āļŠāļāļāļēāļĢāļāđāļĄāļēāļāļāļ§āđāļē 10 āļāļĩāđāļāļāļļāļāļŠāļēāļŦāļāļĢāļĢāļĄ āđāļĢāļēāđāļāđāļŠāļąāđāļāļŠāļĄāļāļ§āļēāļĄāđāļāļĩāđāļĒāļ§āļāļēāļ
|
||||
āđāļĨāļ°āļŠāļĢāđāļēāļāđāļāļĢāļ·āļāļāđāļēāļĒāļāļ§āļēāļĄāļĢāđāļ§āļĄāļĄāļ·āļāļāļąāļāļāļđāđāļāļĨāļīāļāļāļąāđāļāļāļģāļāļąāđāļāđāļāđāļĨāļ°āļāđāļēāļāļāļĢāļ°āđāļāļĻ
|
||||
</p>
|
||||
<p>
|
||||
āđāļĢāļēāļĄāļļāđāļāļĄāļąāđāļāđāļŦāđāļāļĢāļīāļāļēāļĢāļŠāļīāļāļāđāļēāļāļĩāđāļāđāļēāļāļĄāļēāļāļĢāļāļēāļāļāļļāļāļ āļēāļ āļāļĢāđāļāļĄāļāļģāđāļāļ°āļāļģāļāļēāļāļāļĩāļĄāļāļēāļāļĄāļ·āļāļāļēāļāļĩāļ
|
||||
āđāļāļ·āđāļāđāļŦāđāļĨāļđāļāļāđāļēāđāļāđāļĢāļąāļāļŠāļīāļāļāđāļēāļāļĩāđāđāļŦāļĄāļēāļ°āļŠāļĄāļāļąāļāļāļ§āļēāļĄāļāđāļāļāļāļēāļĢ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden">
|
||||
<img
|
||||
src="/images/2021/03/hdpe-pipe_000C.jpg"
|
||||
alt="āđāļāļĩāđāļĒāļ§āļāļąāļāļāļĩāļĨāļāļĨāļąāļŠāđāļāļ"
|
||||
class="object-cover w-full h-full"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vision & Mission -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
||||
<div class="bg-secondary-800 p-8 rounded-xl">
|
||||
<h3 class="text-2xl font-bold text-primary-400 mb-4">āļ§āļīāļŠāļąāļĒāļāļąāļĻāļāđ</h3>
|
||||
<p class="text-secondary-200">
|
||||
āđāļāđāļāļāļđāđāļāļģāļāļĨāļēāļāļ§āļąāļŠāļāļļāļāđāļāđāļĨāļ°āļāļļāļāļāļĢāļāđāļĢāļ°āļāļāļāđāļāđāļāļāļĢāļ°āđāļāļĻāđāļāļĒ
|
||||
āļāļĩāđāļĨāļđāļāļāđāļēāđāļ§āđāļ§āļēāļāđāļāđāļāļāļļāļāļ āļēāļāđāļĨāļ°āļāļēāļĢāļāļĢāļīāļāļēāļĢ
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-secondary-800 p-8 rounded-xl">
|
||||
<h3 class="text-2xl font-bold text-primary-400 mb-4">āļāļąāļāļāļāļīāļ</h3>
|
||||
<p class="text-secondary-200">
|
||||
āļāļąāļāļŦāļēāļŠāļīāļāļāđāļēāļāļļāļāļ āļēāļāļŠāļđāļ āđāļŦāđāļāļĢāļīāļāļēāļĢāļāļĩāđāđāļāđāļāđāļĨāļīāļĻ āđāļĨāļ°āļŠāļĢāđāļēāļāļāļ§āļēāļĄāļāļķāļāļāļāđāļāļŠāļđāļāļŠāļļāļāđāļŦāđāļĨāļđāļāļāđāļē
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Core Values -->
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-secondary-900 mb-8">āļāđāļēāļāļīāļĒāļĄāļŦāļĨāļąāļ</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div class="p-6 bg-primary-50 rounded-xl">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-bold text-secondary-900 mb-2">āļāļļāļāļ āļēāļ</h4>
|
||||
<p class="text-secondary-600 text-sm">āļŠāļīāļāļāđāļēāļāđāļēāļāļĄāļēāļāļĢāļāļēāļ</p>
|
||||
</div>
|
||||
<div class="p-6 bg-primary-50 rounded-xl">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-bold text-secondary-900 mb-2">āļĢāļ§āļāđāļĢāđāļ§</h4>
|
||||
<p class="text-secondary-600 text-sm">āļāļąāļāļŠāđāļāļĢāļ§āļāđāļĢāđāļ§āļāļąāļāđāļ</p>
|
||||
</div>
|
||||
<div class="p-6 bg-primary-50 rounded-xl">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-bold text-secondary-900 mb-2">āļāļĢāļīāļāļēāļĢ</h4>
|
||||
<p class="text-secondary-600 text-sm">āļāļĩāļĄāļāļēāļāļĄāļ·āļāļāļēāļāļĩāļ</p>
|
||||
</div>
|
||||
<div class="p-6 bg-primary-50 rounded-xl">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-bold text-secondary-900 mb-2">āđāļ§āđāđāļ</h4>
|
||||
<p class="text-secondary-600 text-sm">āļāļ·āđāļāļŠāļąāļāļĒāđāļāđāļāļĨāļđāļāļāđāļē</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
<FloatingContact />
|
||||
</BaseLayout>
|
||||
|
||||
@@ -1,32 +1,22 @@
|
||||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
import BlogCard from '../../components/BlogCard.astro';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
import FloatingContact from '../../components/FloatingContact.astro';
|
||||
import BlogCard from '../../components/BlogCard.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const posts = await getCollection('blog');
|
||||
|
||||
export const metadata = {
|
||||
title: 'āļāļāļāļ§āļēāļĄāļāļ§āļēāļĄāļĢāļđāđ',
|
||||
description: 'āļāļāļāļ§āļēāļĄāļāļ§āļēāļĄāļĢāļđāđāđāļāļĩāđāļĒāļ§āļāļąāļāļ§āļąāļŠāļāļļāļāđāļ āļāļļāļāļāļĢāļāđāļĢāļ°āļāļāļāđāļ āđāļĨāļ°āđāļāļāļāļīāļāļāļēāļĢāļāļīāļāļāļąāđāļ',
|
||||
};
|
||||
|
||||
export const prerender = true;
|
||||
---
|
||||
|
||||
<BaseLayout title={metadata.title} description={metadata.description}>
|
||||
<main class="pt-32 pb-16">
|
||||
<BaseLayout title="āļāļĨāđāļāļ" description="āļāļāļāļ§āļēāļĄāđāļĨāļ°āļāđāļēāļ§āļŠāļēāļĢ">
|
||||
<Header />
|
||||
|
||||
<main class="pt-32 pb-16 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- Hero -->
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-4">
|
||||
āļāļāļāļ§āļēāļĄ<span class="text-primary-600">āļāļ§āļēāļĄāļĢāļđāđ</span>
|
||||
</h1>
|
||||
<p class="text-xl text-secondary-600 max-w-2xl mx-auto">
|
||||
āļāļāļāļ§āļēāļĄāļāļ§āļēāļĄāļĢāļđāđāđāļāļĩāđāļĒāļ§āļāļąāļāļ§āļąāļŠāļāļļāļāđāļ āļāļļāļāļāļĢāļāđāļĢāļ°āļāļāļāđāļ āđāļĨāļ°āđāļāļāļāļīāļāļāļēāļĢāļāļīāļāļāļąāđāļ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Blog Grid -->
|
||||
<h1 class="section-title text-center mb-4">āļāļĨāđāļāļ</h1>
|
||||
<p class="section-subtitle text-center mb-12">āļāļāļāļ§āļēāļĄāđāļĨāļ°āļāđāļēāļ§āļŠāļēāļĢāļāļēāļāđāļĢāļē</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{posts.map((post) => (
|
||||
<BlogCard post={post} />
|
||||
@@ -34,4 +24,7 @@ export const prerender = true;
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
<FloatingContact />
|
||||
</BaseLayout>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import FloatingContact from '../components/FloatingContact.astro';
|
||||
import { productCategories } from '../data/site-config';
|
||||
|
||||
@@ -10,6 +12,8 @@ const featuredProducts = productCategories.filter(p =>
|
||||
---
|
||||
|
||||
<BaseLayout title="āļŦāļāđāļēāđāļĢāļ" description="āļāļĢāļīāļĐāļąāļ āļāļĩāļĨ āļāļĨāļąāļŠ āđāļāļ āļāļģāļāļąāļ - āļāļđāđāđāļāļĩāđāļĒāļ§āļāļēāļāļāđāļēāļāļĢāļ°āļāļāļāđāļāđāļĨāļ° HVAC">
|
||||
<Header />
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[70vh] min-h-[500px] bg-secondary-900">
|
||||
@@ -22,21 +26,21 @@ const featuredProducts = productCategories.filter(p =>
|
||||
/>
|
||||
<div class="relative z-20 container mx-auto px-4 h-full flex items-center">
|
||||
<div class="max-w-2xl">
|
||||
<span class="inline-block px-4 py-2 bg-primary-600 text-white font-semibold mb-4 rounded">
|
||||
<span class="inline-block px-4 py-2 bg-green-600 text-white font-semibold mb-4 rounded">
|
||||
āļāļđāđāđāļāļĩāđāļĒāļ§āļāļēāļāļāđāļēāļāļĢāļ°āļāļāļāđāļāđāļĨāļ° HVAC
|
||||
</span>
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||||
āļ§āļąāļŠāļāļļāļāđāļ āļāļļāļāļāļĢāļāđ HVAC
|
||||
<span class="text-primary-400 block">āđāļĨāļ°āļāļāļ§āļāļŦāļļāđāļĄāļāđāļ</span>
|
||||
<span class="text-green-400 block">āđāļĨāļ°āļāļāļ§āļāļŦāļļāđāļĄāļāđāļ</span>
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-secondary-200 mb-8">
|
||||
<p class="text-lg md:text-xl text-gray-200 mb-8">
|
||||
āļāļģāļŦāļāđāļēāļĒāđāļĨāļ°āļāļīāļāļāļąāđāļāļāđāļ PPR, āļāđāļ HDPE, āļāļĢāļīāļĨāđāļāļĢāđ, āđāļāļāļĢāđāđāļĄāđāļāļĢāļ āđāļĨāļ°āļāļļāļāļāļĢāļāđāļĢāļ°āļāļāļāđāļāļāļĢāļāļ§āļāļāļĢ āļāļĢāđāļāļĄāļāļĢāļīāļāļēāļĢāđāļŦāđāļāļģāļāļĢāļķāļāļĐāļēāļāļēāļāļāļĩāļĄāļĄāļ·āļāļāļēāļāļĩāļ
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<a href="/products/" class="btn-primary">
|
||||
āļāļđāļŠāļīāļāļāđāļēāļāļąāđāļāļŦāļĄāļ
|
||||
</a>
|
||||
<a href="/contact-us/" class="btn-outline border-white text-white hover:bg-white hover:text-secondary-900">
|
||||
<a href="/contact-us/" class="btn-outline border-white text-white hover:bg-white hover:text-gray-900">
|
||||
āļāļāđāļāđāļŠāļāļāļĢāļēāļāļē
|
||||
</a>
|
||||
</div>
|
||||
@@ -44,143 +48,38 @@ const featuredProducts = productCategories.filter(p =>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="py-16 bg-secondary-800">
|
||||
<!-- Products Grid Section -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="text-center p-6">
|
||||
<div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">āļŠāļīāļāļāđāļēāļāļļāļāļ āļēāļ</h3>
|
||||
<p class="text-secondary-300">
|
||||
āļŠāļīāļāļāđāļēāļāļļāļāļāļīāđāļāļāđāļēāļāļĄāļēāļāļĢāļāļēāļāļāļļāļāļ āļēāļ āļāļĢāđāļāļĄāļĢāļąāļāļāļĢāļ°āļāļąāļ
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center p-6">
|
||||
<div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">āļāļąāļāļŠāđāļāļĢāļ§āļāđāļĢāđāļ§</h3>
|
||||
<p class="text-secondary-300">
|
||||
āļāļąāļāļŠāđāļāļŠāļīāļāļāđāļēāļāļąāđāļ§āļāļĢāļ°āđāļāļĻ āļĢāļ§āļāđāļĢāđāļ§āđāļĨāļ°āļāļĨāļāļāļ āļąāļĒ
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center p-6">
|
||||
<div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">āļāļĢāļīāļāļēāļĢāļŦāļĨāļąāļāļāļēāļĢāļāļēāļĒ</h3>
|
||||
<p class="text-secondary-300">
|
||||
āļāļĩāļĄāļāļēāļāļāļĢāđāļāļĄāđāļŦāđāļāļģāļāļĢāļķāļāļĐāļēāđāļĨāļ°āļāļđāđāļĨāļāļĒāđāļēāļāļāđāļāđāļāļ·āđāļāļ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Products -->
|
||||
<section class="py-16 bg-secondary-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-4">
|
||||
āļŠāļīāļāļāđāļē<span class="text-primary-600">āđāļāđāļ</span>
|
||||
</h2>
|
||||
<p class="text-secondary-600 text-lg">āļāļĨāļīāļāļ āļąāļāļāđāļāļļāļāļ āļēāļāļŠāļđāļāļāļĩāđāđāļāđāļĢāļąāļāļāļ§āļēāļĄāļāļīāļĒāļĄ</p>
|
||||
</div>
|
||||
<h2 class="section-title text-center mb-4">āļŠāļīāļāļāđāļēāđāļāļ°āļāļģ</h2>
|
||||
<p class="section-subtitle text-center mb-12">āļāļąāļāļŠāļĢāļĢāļŠāļīāļāļāđāļēāļāļļāļāļ āļēāļāļŠāļđāļāļŠāļģāļŦāļĢāļąāļāđāļāļĢāļāļāļēāļĢāļāļāļāļāļļāļ</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{featuredProducts.map((product) => (
|
||||
<a href={product.href} class="card group">
|
||||
<div class="relative aspect-video bg-secondary-100 overflow-hidden">
|
||||
<img
|
||||
src={product.image}
|
||||
alt={product.name}
|
||||
class="object-cover w-full h-48 group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">
|
||||
{product.name}
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-secondary-600 line-clamp-2">
|
||||
{product.shortDescription || product.description}
|
||||
</p>
|
||||
<div class="mt-4 flex items-center text-primary-600 font-medium">
|
||||
<span>āļāļđāļĢāļēāļĒāļĨāļ°āđāļāļĩāļĒāļ</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="card-industrial hover:shadow-xl transition-shadow">
|
||||
<img
|
||||
src={product.image}
|
||||
alt={product.name}
|
||||
class="w-full h-48 object-cover rounded-lg mb-4"
|
||||
/>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-2">{product.name}</h3>
|
||||
<p class="text-gray-600 text-sm mb-4">{product.shortDescription}</p>
|
||||
<a href={product.href} class="btn-primary inline-block">
|
||||
āļāļđāļĢāļēāļĒāļĨāļ°āđāļāļĩāļĒāļ
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-12">
|
||||
<a href="/products/" class="btn-primary">
|
||||
<a href="/products/" class="btn-secondary">
|
||||
āļāļđāļŠāļīāļāļāđāļēāļāļąāđāļāļŦāļĄāļ
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Preview -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">
|
||||
āđāļāļĩāđāļĒāļ§āļāļąāļ<span class="text-primary-600">āđāļĢāļē</span>
|
||||
</h2>
|
||||
<p class="text-lg text-secondary-600 mb-6">
|
||||
āļāļĢāļīāļĐāļąāļ āļāļĩāļĨ āļāļĨāļąāļŠ āđāļāļ āļāļģāļāļąāļ āđāļĢāļēāđāļāđāļāļāļđāđāđāļāļĩāļĒāļ§āļāļēāļāļāđāļēāļāļĢāļ°āļāļāļāđāļģ āđāļŦāđāļāļģāđāļāļ°āļāļģāđāļĨāļ°āļāļģāļŦāļāđāļēāļĒāļāđāļ PPR āļāļĢāļēāļāđāļēāļ āļāđāļāļāļĩāļāļĩāļāļēāļĢāđ āļāđāļ PPR āļāđāļ HDPE Thai PPR āļāļļāļāļ āļēāļāļŠāļđāļ āļĢāļēāļāļēāļāļđāļ
|
||||
</p>
|
||||
<p class="text-secondary-700 mb-8">
|
||||
āļāđāļ§āļĒāļāļĢāļ°āļŠāļāļāļēāļĢāļāđāļĒāļēāļ§āļāļēāļ āđāļĢāļēāļāļĢāđāļāļĄāđāļŦāđāļāļĢāļīāļāļēāļĢāļŠāļīāļāļāđāļēāļāļļāļāļ āļēāļāđāļĨāļ°āļāļģāđāļāļ°āļāļģāļāļēāļāļāļđāđāđāļāļĩāđāļĒāļ§āļāļēāļ āđāļāļ·āđāļāđāļŦāđāļāļēāļāļĢāļ°āļāļāļāļāļāļāļļāļāļĄāļĩāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļāļŠāļđāļāļŠāļļāļ
|
||||
</p>
|
||||
<a href="/about-us/" class="btn-secondary">
|
||||
āļāđāļēāļāđāļāļīāđāļĄāđāļāļīāļĄ
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden">
|
||||
<img
|
||||
src="/images/2021/03/ppr-pipe_000C.jpg"
|
||||
alt="āđāļāļĩāđāļĒāļ§āļāļąāļāļāļĩāļĨāļāļĨāļąāļŠāđāļāļ"
|
||||
class="object-cover w-full h-full"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 bg-primary-600">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
āļŠāļāđāļāļŠāļīāļāļāđāļēāļŦāļĢāļ·āļāļāđāļāļāļāļēāļĢāļāļģāļāļĢāļķāļāļĐāļē?
|
||||
</h2>
|
||||
<p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto">
|
||||
āļāļĩāļĄāļāļēāļāļāļāļāđāļĢāļēāļāļĢāđāļāļĄāđāļŦāđāļāļģāđāļāļ°āļāļģāđāļĨāļ°āļāđāļ§āļĒāļāļļāļāđāļĨāļ·āļāļāļŠāļīāļāļāđāļēāļāļĩāđāđāļŦāļĄāļēāļ°āļŠāļĄāļāļĩāđāļŠāļļāļ
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="tel:090-555-1415" class="btn-secondary bg-white text-primary-600 hover:bg-primary-50">
|
||||
āđāļāļĢ: 090-555-1415
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/@dealplustech" target="_blank" rel="noopener" class="btn-outline border-white text-white hover:bg-white hover:text-primary-600">
|
||||
āđāļāļīāđāļĄāđāļāļ·āđāļāļ LINE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
<FloatingContact />
|
||||
</BaseLayout>
|
||||
|
||||
@@ -1,21 +1,28 @@
|
||||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
import ProductCard from '../../components/ProductCard.astro';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
|
||||
const products = await getCollection('products');
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
import FloatingContact from '../../components/FloatingContact.astro';
|
||||
import ProductCard from '../../components/ProductCard.astro';
|
||||
import { productCategories } from '../../data/site-config';
|
||||
---
|
||||
|
||||
<BaseLayout title="āļŠāļīāļāļāđāļēāļāļąāđāļāļŦāļĄāļ" description="āļĢāļēāļĒāļāļēāļĢāļŠāļīāļāļāđāļēāļāļąāđāļāļŦāļĄāļāļāļēāļ Deal Plus Tech">
|
||||
<main class="py-12">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h1 class="section-title mb-8">āļŠāļīāļāļāđāļēāļāļąāđāļāļŦāļĄāļ</h1>
|
||||
<BaseLayout title="āļŠāļīāļāļāđāļē" description="āļŠāļīāļāļāđāļēāļāļāļāđāļĢāļē">
|
||||
<Header />
|
||||
|
||||
<main class="pt-32 pb-16 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="section-title text-center mb-4">āļŠāļīāļāļāđāļēāļāļąāđāļāļŦāļĄāļ</h1>
|
||||
<p class="section-subtitle text-center mb-12">āđāļĨāļ·āļāļāļŠāļīāļāļāđāļēāļāļļāļāļ āļēāļāļŠāļđāļāļāļēāļāđāļĢāļē</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{products.map((product) => (
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{productCategories.map((product) => (
|
||||
<ProductCard product={product} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
<FloatingContact />
|
||||
</BaseLayout>
|
||||
|
||||
@@ -1,270 +1,20 @@
|
||||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
import FloatingContact from '../../components/FloatingContact.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="āļāļĢāļīāļāļēāļĢāļāļāļāđāļĢāļē" description="āļāļĢāļīāļāļēāļĢāļāļĢāļāļ§āļāļāļĢ āļāļģāļŦāļāđāļēāļĒāļ§āļąāļŠāļāļļāļāđāļ āđāļŦāđāļāļģāļāļĢāļķāļāļĐāļē āļāļāļāđāļāļāļĢāļ°āļāļ āđāļĨāļ°āļāļīāļāļāļąāđāļ">
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[50vh] min-h-[400px] bg-secondary-900">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-secondary-900 via-secondary-900/90 to-secondary-900/60 z-10" />
|
||||
<img
|
||||
src="/images/2021/03/hdpe-pipe_000C.jpg"
|
||||
alt="āļāļĢāļīāļāļēāļĢāļāļāļāđāļĢāļē"
|
||||
class="absolute inset-0 w-full h-full object-cover opacity-40"
|
||||
loading="eager"
|
||||
/>
|
||||
<div class="relative z-20 container mx-auto px-4 h-full flex items-center">
|
||||
<div class="max-w-2xl">
|
||||
<span class="inline-block px-4 py-2 bg-primary-600 text-white font-semibold mb-4 rounded">
|
||||
āļāļĢāļīāļāļēāļĢāļāļĢāļāļ§āļāļāļĢ
|
||||
</span>
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
|
||||
āļāļĢāļīāļāļēāļĢ<span class="text-primary-400">āļāļāļāđāļĢāļē</span>
|
||||
</h1>
|
||||
<p class="text-xl text-secondary-200">
|
||||
āļāļąāđāļāđāļāđāļāļēāļĢāđāļŦāđāļāļģāļāļĢāļķāļāļĐāļē āļāļāļāđāļāļ āļāļąāļāļŠāđāļ āļāļāļāļķāļāļāļīāļāļāļąāđāļ āđāļĢāļēāļāļĢāđāļāļĄāļāļđāđāļĨāđāļāļĢāļāļāļēāļĢāļāļāļāļāļļāļāļāļĢāļāļ§āļāļāļĢ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Grid -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Service 1 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
āļāļģāļŦāļāđāļēāļĒāļ§āļąāļŠāļāļļāļāđāļ
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
āļāļģāļŦāļāđāļēāļĒāļāđāļāļāļĩāļāļĩāļāļēāļĢāđ āļāđāļ HDPE āļāđāļ PVC āļ§āļēāļĨāđāļ§ āđāļĨāļ°āļāļļāļāļāļĢāļāđāļāđāļāļāđāļāļāļĢāļāļ§āļāļāļĢ āļŠāļīāļāļāđāļēāļāļļāļāļ āļēāļ āļĢāļēāļāļēāđāļāđāļāļāļąāļāđāļāđ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service 2 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
āđāļŦāđāļāļģāļāļĢāļķāļāļĐāļē
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
āļāļĩāļĄāļāļēāļāļĄāļ·āļāļāļēāļāļĩāļāļāļĢāđāļāļĄāđāļŦāđāļāļģāļāļĢāļķāļāļĐāļēāđāļāļĩāđāļĒāļ§āļāļąāļāļāļēāļĢāđāļĨāļ·āļāļāļ§āļąāļŠāļāļļāļāđāļāļāļĩāđāđāļŦāļĄāļēāļ°āļŠāļĄāļāļąāļāđāļāļĢāļāļāļēāļĢāļāļāļāļāļļāļ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service 3 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
āļāļāļāđāļāļāļĢāļ°āļāļ
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
āļāļĢāļīāļāļēāļĢāļāļāļāđāļāļāļĢāļ°āļāļāļāđāļāļāđāļģ āļĢāļ°āļāļāļāļąāļāđāļāļĨāļīāļ āđāļĨāļ°āļĢāļ°āļāļāļāļĢāļąāļāļāļēāļāļēāļĻ āđāļāļĒāļ§āļīāļĻāļ§āļāļĢāļāļđāđāđāļāļĩāđāļĒāļ§āļāļēāļ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service 4 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
āļāļīāļāļāļąāđāļāļĢāļ°āļāļ
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
āļāļĩāļĄāļāđāļēāļāļāļđāđāđāļāļĩāđāļĒāļ§āļāļēāļāļāļīāļāļāļąāđāļāļĢāļ°āļāļāļāđāļāļāļĢāļāļ§āļāļāļĢ āļāļĢāđāļāļĄāļĢāļąāļāļāļĢāļ°āļāļąāļāļāļēāļ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service 5 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
āļāļąāļāļŠāđāļāļŠāļīāļāļāđāļē
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
āļāļĢāļīāļāļēāļĢāļāļąāļāļŠāđāļāļŠāļīāļāļāđāļēāļāļąāđāļ§āļāļĢāļ°āđāļāļĻ āļĢāļ§āļāđāļĢāđāļ§ āļāļĨāļāļāļ āļąāļĒ āļĄāļĩāļāļĢāļ°āļāļąāļāļāļ§āļēāļĄāđāļŠāļĩāļĒāļŦāļēāļĒ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service 6 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
āļāļĢāļīāļāļēāļĢāļŦāļĨāļąāļāļāļēāļĢāļāļēāļĒ
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
āļāļĩāļĄāļāļēāļāļāļĢāđāļāļĄāđāļŦāđāļāļēāļĢāļāļđāđāļĨāđāļĨāļ°āļāļĢāļīāļāļēāļĢāļāđāļāļĄāļāļģāļĢāļļāļāļŦāļĨāļąāļāļāļēāļĢāļāļēāļĒāļāļĨāļāļāļāļēāļĒāļļāļāļēāļĢāđāļāđāļāļēāļ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process Section -->
|
||||
<section class="py-20 bg-secondary-900">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
āļāļąāđāļāļāļāļ<span class="text-primary-400">āļāļēāļĢāļāļģāļāļēāļ</span>
|
||||
</h2>
|
||||
<p class="text-secondary-300 text-lg max-w-2xl mx-auto">
|
||||
āđāļĢāļēāđāļŦāđāļāļ§āļēāļĄāļŠāļģāļāļąāļāļāļąāļāļāļļāļāļāļąāđāļāļāļāļ āđāļāļ·āđāļāđāļŦāđāļĨāļđāļāļāđāļēāđāļāđāļĢāļąāļāļāļĢāļīāļāļēāļĢāļāļĩāđāļāļĩāļāļĩāđāļŠāļļāļ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Step 1 -->
|
||||
<div class="relative">
|
||||
<div class="text-center">
|
||||
<span class="text-6xl font-bold text-primary-600/30">01</span>
|
||||
<h3 class="text-xl font-bold text-white mt-4 mb-2">āļāļĢāļķāļāļĐāļē</h3>
|
||||
<p class="text-secondary-400">āļāļīāļāļāđāļāđāļĢāļēāđāļāļ·āđāļāļāļĢāļķāļāļĐāļēāđāļāļĩāđāļĒāļ§āļāļąāļāļāļ§āļēāļĄāļāđāļāļāļāļēāļĢāļāļāļāđāļāļĢāļāļāļēāļĢ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="relative">
|
||||
<div class="text-center">
|
||||
<span class="text-6xl font-bold text-primary-600/30">02</span>
|
||||
<h3 class="text-xl font-bold text-white mt-4 mb-2">āļāļāļāđāļāļ</h3>
|
||||
<p class="text-secondary-400">āļāļĩāļĄāļ§āļīāļĻāļ§āļāļĢāļāļāļāđāļāļāļĢāļ°āļāļāđāļŦāđāđāļŦāļĄāļēāļ°āļŠāļĄāļāļąāļāļāļēāļĢāđāļāđāļāļēāļ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="relative">
|
||||
<div class="text-center">
|
||||
<span class="text-6xl font-bold text-primary-600/30">03</span>
|
||||
<h3 class="text-xl font-bold text-white mt-4 mb-2">āđāļŠāļāļāļĢāļēāļāļē</h3>
|
||||
<p class="text-secondary-400">āđāļŠāļāļāļĢāļēāļāļēāļŠāļīāļāļāđāļēāđāļĨāļ°āļāļĢāļīāļāļēāļĢāļāļĒāđāļēāļāđāļāļĢāđāļāđāļŠ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="relative">
|
||||
<div class="text-center">
|
||||
<span class="text-6xl font-bold text-primary-600/30">04</span>
|
||||
<h3 class="text-xl font-bold text-white mt-4 mb-2">āļāļīāļāļāļąāđāļ</h3>
|
||||
<p class="text-secondary-400">āļāļĩāļĄāļāđāļēāļāļāļīāļāļāļąāđāļāđāļāļĒāļĄāļ·āļāļāļēāļāļĩāļāļāļĢāļāļāļēāļĄāļāļģāļŦāļāļ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="py-20 bg-secondary-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">
|
||||
āļāļģāđāļĄāļāđāļāļāđāļĨāļ·āļāļ<span class="text-primary-600">āļāļĩāļĨāļāļĨāļąāļŠāđāļāļ</span>
|
||||
</h2>
|
||||
<div class="space-y-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-secondary-900 mb-1">āļāļĢāļ°āļŠāļāļāļēāļĢāļāđāļāļ§āđāļē 10 āļāļĩ</h3>
|
||||
<p class="text-secondary-600">āđāļāļĩāđāļĒāļ§āļāļēāļāļāđāļēāļāļĢāļ°āļāļāļāđāļāđāļĨāļ°āļāļļāļāļāļĢāļāđāļāļĢāļāļ§āļāļāļĢ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-secondary-900 mb-1">āļŠāļīāļāļāđāļēāļāļļāļāļ āļēāļ</h3>
|
||||
<p class="text-secondary-600">āļŠāļīāļāļāđāļēāļāđāļēāļāļĄāļēāļāļĢāļāļēāļ āļĄāļāļ. / FM / UL āļāļĢāđāļāļĄāļĢāļąāļāļāļĢāļ°āļāļąāļ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-secondary-900 mb-1">āļāļĩāļĄāļāļēāļāļĄāļ·āļāļāļēāļāļĩāļ</h3>
|
||||
<p class="text-secondary-600">āļ§āļīāļĻāļ§āļāļĢāđāļĨāļ°āļāđāļēāļāļāļđāđāđāļāļĩāđāļĒāļ§āļāļēāļāļāļĢāđāļāļĄāđāļŦāđāļāļģāļāļĢāļķāļāļĐāļē</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-secondary-900 mb-1">āļāļĢāļīāļāļēāļĢāļĢāļ§āļāđāļĢāđāļ§</h3>
|
||||
<p class="text-secondary-600">āļāļąāļāļŠāđāļāļŠāļīāļāļāđāļēāļāļąāđāļ§āļāļĢāļ°āđāļāļĻ āļāļĢāļāļāļēāļĄāļāļģāļŦāļāļ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative aspect-video bg-secondary-200 rounded-2xl overflow-hidden">
|
||||
<img
|
||||
src="/images/2021/03/hdpe-welding_000C-1.jpg"
|
||||
alt="āļāļĩāļĄāļāļēāļāļĄāļ·āļāļāļēāļāļĩāļ"
|
||||
class="object-cover w-full h-full"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-20 bg-primary-600">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
āļāļĢāđāļāļĄāđāļĢāļīāđāļĄāđāļāļĢāļāļāļēāļĢāļāļāļāļāļļāļ?
|
||||
</h2>
|
||||
<p class="text-primary-100 text-lg mb-8 max-w-">
|
||||
āļ2xl mx-autoāļīāļāļāđāļāđāļĢāļēāļ§āļąāļāļāļĩāđāđāļāļ·āđāļāļĢāļąāļāļāļģāļāļĢāļķāļāļĐāļēāđāļĨāļ°āđāļāđāļŠāļāļāļĢāļēāļāļēāļāļĢāļĩ
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/contact-us/" class="btn-secondary bg-white text-primary-600 hover:bg-primary-50">
|
||||
āļāļīāļāļāđāļāđāļĢāļē
|
||||
</a>
|
||||
<a href="tel:090-555-1415" class="btn-outline border-white text-white hover:bg-white hover:text-primary-600">
|
||||
āđāļāļĢ: 090-555-1415
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<BaseLayout title="āļāļĢāļīāļāļēāļĢ" description="āļāļĢāļīāļāļēāļĢāļāļāļāđāļĢāļē">
|
||||
<Header />
|
||||
|
||||
<main class="pt-32 pb-16 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="section-title text-center mb-4">āļāļĢāļīāļāļēāļĢāļāļāļāđāļĢāļē</h1>
|
||||
<p class="section-subtitle text-center mb-12">āļāļĢāļīāļāļēāļĢāļāļĢāļāļ§āļāļāļĢāļŠāļģāļŦāļĢāļąāļāđāļāļĢāļāļāļēāļĢāļāļāļāļāļļāļ</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
<FloatingContact />
|
||||
</BaseLayout>
|
||||
|
||||
Reference in New Issue
Block a user