LKC Verification Platform Website

A modern, multilingual website for the LKC Verification Platform built with Astro 5, featuring dynamic content, interactive carousels, and internationalization support.

🚀 Features

• Modern Tech Stack: Built with Astro 5, Tailwind CSS 4, and Bun
• Multilingual Support: Full i18n support for Traditional Chinese (zh-tw) and English (en)
• Interactive Components:
  • Dynamic hero text animation
  • Swiper.js carousels for services and dialogs
  • Modal dialogs with image carousels
  • Language switcher
• Responsive Design: Mobile-first approach with Tailwind CSS
• Performance Optimized: Static site generation with optimized images
• SEO Ready: Meta tags, structured data, and semantic HTML

🛠️ Tech Stack

• Framework: Astro 5
• Styling: Tailwind CSS 4
• Package Manager: Bun
• Carousel: Swiper.js
• Fonts: Inter (local fonts)
• Build Tool: Vite

📁 Project Structure

src/
├── assets/
│   ├── css/           # Global styles and components
│   └── fonts/         # Local font files
├── components/
│   ├── about/         # About page components
│   ├── home/          # Homepage components
│   ├── DialogModal.astro
│   ├── FooterMain.astro
│   └── HeaderMain.astro
├── data/
│   ├── en/            # English content
│   └── zh-tw/         # Traditional Chinese content
├── layouts/
│   └── Layout.astro   # Main layout component
└── pages/
    ├── en/            # English pages
    └── zh-tw/         # Traditional Chinese pages

🚀 Quick Start

Prerequisites

• Bun (recommended) or Node.js 18+
• Git

Installation

1. Clone the repository

   git clone <repository-url>
   cd AGH3-WEBSITE

2. Install dependencies

   bun install
   # or
   npm install

3. Start development server

   bun run dev
   # or
   npm run dev

4. Open your browser Navigate to http://localhost:4321

Available Scripts

• bun run dev - Start development server
• bun run build - Build for production
• bun run preview - Preview production build
• bun run astro - Run Astro CLI commands

🌐 Internationalization

The website supports two languages:

• Traditional Chinese (zh-tw): Default language, accessible at root /
• English (en): Available at /en/

Language Switching

Users can switch languages using the language switcher in the footer. The switcher:

• Detects current language from URL path
• Prevents navigation when selecting the current language
• Maintains page context during language switches

Adding New Languages

1. Add locale to astro.config.mjs:

   i18n: {
     locales: ["zh-tw", "en", "new-lang"],
     defaultLocale: "zh-tw"
   }

2. Create language-specific pages in src/pages/new-lang/

3. Add language data in src/data/new-lang/

4. Update language switcher in FooterMain.astro

🎨 Customization

Content Management

All content is managed through JSON files in the src/data/ directory:

• global_settings.json - Site-wide settings
• home/ - Homepage content
• about/ - About page content
• footer.json - Footer content

Styling

The project uses Tailwind CSS 4 with custom CSS variables:

• Global styles: src/assets/css/global.css
• Component styles: src/assets/css/
• Custom properties defined in CSS files

Components

Key components include:

• HeroSection: Animated text carousel
• ServicesSection: Swiper carousel for services
• DialogModal: Modal with image carousel
• UseCaseSection: Use case showcase
• LanguageSwitcher: Built into FooterMain

🚀 Deployment

GitHub Pages

The project is configured for GitHub Pages deployment with GitHub Actions:

1. Push to main branch
2. GitHub Actions automatically builds and deploys
3. Site available at https://username.github.io/repository-name

Manual Deployment

1. Build the project

   bun run build

2. Deploy the dist/ folder to your hosting provider

Environment Variables

No environment variables are required for basic functionality.

🔧 Development

Code Style

• Use TypeScript for type safety
• Follow Astro component conventions
• Use semantic HTML elements
• Implement proper accessibility features

Adding New Components

1. Create component in appropriate directory
2. Import and use in pages
3. Add TypeScript interfaces if needed
4. Update documentation

Performance Considerations

• Images are optimized using Astro's Image component
• Swiper instances are properly destroyed to prevent memory leaks
• CSS animations use prefers-reduced-motion media query
• Static site generation for optimal performance

📱 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Contact

• Email: sales@lkc-lab.com
• Website: LKC Lab
• Demo: Book a Demo

🙏 Acknowledgments

• Astro for the amazing framework
• Tailwind CSS for utility-first CSS
• Swiper.js for carousel functionality
• Inter Font for typography