achaabni/vaadin-tailwind-landing

多语言展示

该落地页支持完整本地化和RTL（从右到左）布局，以下是四种支持语言的展示：

核心功能

• 完整国际化（4种语言）：支持英语、阿拉伯语、法语和日语的本地化。
• RTL支持：为阿拉伯语提供原生从右到左布局，包含镜像间距和逻辑处理。
• 组织架构：按逻辑子包（model、section、layout、common）组织，支持横向扩展。
• 感知组件模式：组件自主解析自身国际化键的去中心化翻译逻辑。
• 微动画：平滑过渡、悬停效果和RTL感知的滑动切换。

快速开始

开发模式

使用Maven启动应用：

bash
mvn package spring-boot:run

应用将在http://localhost:8080可用。

生产构建

创建优化的生产JAR包：

bash
mvn clean package -Pproduction

技术栈

• Vaadin 25.1.0：集成Vite的Java Web框架。
• Spring Boot 4：后端基础设施。
• Tailwind CSS 4：下一代工具优先CSS框架。
• Vite：现代前端构建工具。
• Java 21

项目结构

项目遵循模块化、基于特性的架构：

• src/main/java/com/gladtek/vaadin/
  • data/
    • model/：领域记录（Feature、Plan、Stat、Testimonial）。
    • footer/：页脚配置记录。
  • components/
    • layout/：基础结构元素（NavBar、AppFooter、LanguageSwitcher）。
    • section/：页面构建块（Hero、Features、Pricing、Testimonials）。
    • common/：可复用卡片和UI组件。
  • views/landing/：按特性隔离的主视图逻辑。
  • services/：数据提供和聚合服务。

主题与样式

• Tailwind集成：通过addClassNames()在Java中直接应用工具类。
• 响应式设计：使用TailWind的md:、lg:断点实现移动优先方案。
• 逻辑属性：使用start和end替代left和right，实现RTL感知样式。

[!IMPORTANT] 若要在CSS文件中使用Tailwind的@apply指令，需使用Vaadin 25.0.5或更高版本，确保Vite构建流水线正确处理样式表中的Tailwind指令。

部署

Docker

运行现有镜像：

bash
docker run -p 9000:8080 docker.xuanyuan.run/achaabni/vaadin-tailwind-landing:latest

构建自定义Docker镜像：

bash
docker build -t vaadin-tailwind-landing:latest .

运行容器：

bash
docker run -p 8080:8080 docker.xuanyuan.run/vaadin-tailwind-landing:latest

由Gladtek构建