david_bai
27375c1a4d
- Replace hardcoded Tailwind colors (bg-white, bg-gray-50/100, text-gray-, border-gray-, divide-gray-*, text-blue-600/800, bg-blue-50) with design tokens (bg-card, bg-muted, text-foreground, text-muted-foreground, border-
border, text-primary, hover:bg-accent, bg-primary/10).
- ClipboardApp: update RichTextEditor toolbar/editor, FileUploadHandler, ShareCard, FileListDisplay, SendTabPanel, RetrieveTabPanel, FileTransferButton.
- Blog UI: unify styles in list page, tag page, post page, ArticleListItem, and TableOfContents.
- MDX/prose: normalize pre/code/table/blockquote/lists and figure captions; switch rehype table divider to theme token.
- Misc: adjust HomeClient and HowItWorks copy colors to tokens.
- No functional changes; light mode parity; improved contrast and consistency in dark mode.
82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import React from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import Image from "next/image";
|
|
import type { Messages } from "@/types/messages";
|
|
|
|
interface PageContentProps {
|
|
messages: Messages;
|
|
}
|
|
|
|
export default function HowItWorks({ messages }: PageContentProps) {
|
|
const steps = [
|
|
{
|
|
number: 1,
|
|
title: messages!.text.HowItWorks.step1_title,
|
|
description: messages!.text.HowItWorks.step1_description,
|
|
},
|
|
{
|
|
number: 2,
|
|
title: messages!.text.HowItWorks.step2_title,
|
|
description: messages!.text.HowItWorks.step2_description,
|
|
},
|
|
{
|
|
number: 3,
|
|
title: messages!.text.HowItWorks.step3_title,
|
|
description: messages!.text.HowItWorks.step3_description,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="max-w-6xl mx-auto px-4 py-16">
|
|
{/* Header Section */}
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6">
|
|
{messages.text.HowItWorks.h2}
|
|
</h2>
|
|
<p className="text-muted-foreground mb-8">{messages.text.HowItWorks.h2_P}</p>
|
|
<Button className="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white rounded-full px-8 py-6 text-lg">
|
|
{messages.text.HowItWorks.btn_try}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Steps Container */}
|
|
<div className="flex flex-col md:flex-row justify-between items-start gap-16">
|
|
{/* Left Side - Steps */}
|
|
<div className="w-full md:w-1/2 relative">
|
|
{/* Vertical Line */}
|
|
<div className="absolute left-6 top-8 bottom-8 w-0.5 bg-blue-500"></div>
|
|
|
|
{/* Steps List */}
|
|
<div className="space-y-16">
|
|
{steps.map((step) => (
|
|
<div key={step.number} className="flex gap-6 items-start">
|
|
<div className="relative z-10">
|
|
<div
|
|
className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white
|
|
text-xl font-bold shadow-md transition-transform hover:scale-105"
|
|
>
|
|
{step.number}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-xl font-bold mb-2">{step.title}</h3>
|
|
<p className="text-muted-foreground">{step.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Side - Demo Animation */}
|
|
<div className="w-full md:w-1/2">
|
|
<div className="bg-card rounded-lg shadow-lg overflow-hidden">
|
|
<video autoPlay loop muted playsInline width="1920" height="75">
|
|
<source src="/HowItWorks.webm" type="video/webm" />
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|