完善seo
This commit is contained in:
ymk
@@ -1,32 +1,32 @@
|
||||
{
|
||||
"Index": {
|
||||
"appName": "Screen Designer",
|
||||
"heroTitle": "Create Screen Designs",
|
||||
"heroSubtitle": "Design and customize beautiful and useful backgrounds for your devices",
|
||||
"toolTitle": "Design Tool",
|
||||
"getStarted": "Get Started",
|
||||
"featuresTitle": "Key Features",
|
||||
"feature1Title": "Easy Customization",
|
||||
"feature1Desc": "Intuitive tools to create perfect backgrounds",
|
||||
"feature2Title": "Multiple Options",
|
||||
"feature2Desc": "Choose from colors or upload your own images",
|
||||
"feature3Title": "Real-time Preview",
|
||||
"feature3Desc": "See changes instantly as you design",
|
||||
"testimonialsTitle": "What Our Users Say",
|
||||
"testimonial1Text": "This tool saved me hours of work!",
|
||||
"testimonial1Author": "John D., Designer",
|
||||
"testimonial2Text": "The easiest way to create professional backgrounds",
|
||||
"testimonial2Author": "Sarah M., Developer",
|
||||
"ctaTitle": "Ready to Create?",
|
||||
"ctaSubtitle": "Start designing your perfect background today",
|
||||
"ctaButton": "Start Designing",
|
||||
"faqTitle": "Frequently Asked Questions",
|
||||
"faqQuestion1": "How do I download my design?",
|
||||
"faqAnswer1": "Click the download button after finishing your design",
|
||||
"faqQuestion2": "Can I use my own images?",
|
||||
"faqAnswer2": "Yes, you can upload any image as background",
|
||||
"faqQuestion3": "Is this tool free to use?",
|
||||
"faqAnswer3": "Yes, it's completely free with no hidden charges"
|
||||
"appName": "Fast3DText",
|
||||
"heroTitle": "Create Stunning 3D Text Designs",
|
||||
"heroSubtitle": "Generate and customize beautiful 3D text effects for your projects",
|
||||
"toolTitle": "3D Text Generator Tool",
|
||||
"getStarted": "Generate Now",
|
||||
"featuresTitle": "Powerful Features",
|
||||
"feature1Title": "3D Text Customization",
|
||||
"feature1Desc": "Create unique 3D text with customizable fonts, colors and effects",
|
||||
"feature2Title": "Real-time 3D Preview",
|
||||
"feature2Desc": "See your 3D text changes instantly as you design",
|
||||
"feature3Title": "High-Quality Export",
|
||||
"feature3Desc": "Download your 3D text designs in multiple formats",
|
||||
"testimonialsTitle": "User Testimonials",
|
||||
"testimonial1Text": "This 3D text generator saved me hours of design work!",
|
||||
"testimonial1Author": "Alex T., Graphic Designer",
|
||||
"testimonial2Text": "The easiest way to create professional 3D text effects",
|
||||
"testimonial2Author": "Lisa K., Web Developer",
|
||||
"ctaTitle": "Ready to Create 3D Text?",
|
||||
"ctaSubtitle": "Start generating your custom 3D text designs today",
|
||||
"ctaButton": "Create 3D Text",
|
||||
"faqTitle": "FAQ - 3D Text Generator",
|
||||
"faqQuestion1": "How do I download my 3D text design?",
|
||||
"faqAnswer1": "Click the download button to save your 3D text in PNG or SVG format",
|
||||
"faqQuestion2": "Can I customize the 3D effect?",
|
||||
"faqAnswer2": "Yes, adjust depth, lighting and perspective for perfect 3D text",
|
||||
"faqQuestion3": "Is this 3D text generator free?",
|
||||
"faqAnswer3": "Yes, create unlimited 3D text designs with no cost"
|
||||
},
|
||||
"BackgoundSetting": {
|
||||
"title": "Background Setting",
|
||||
@@ -36,6 +36,10 @@
|
||||
"uploadImage": "upload image"
|
||||
},
|
||||
"PreviewBar": {
|
||||
"tipsTitle": "Tips",
|
||||
"mouseLeft": "mouse left for rotate",
|
||||
"mouseMiddle": "mouse middle scroll for zoom",
|
||||
"mouseRight": "mouse right for move",
|
||||
"previewFullscreen": "Fullscreen Preview",
|
||||
"downloadSize": "Size",
|
||||
"downloadBackground": "Download"
|
||||
@@ -54,52 +58,20 @@
|
||||
"Footer": {
|
||||
"copyright": "© {year} Screen Designer. All rights reserved."
|
||||
},
|
||||
"BlackScreen": {
|
||||
"toolTitle": "Black Screen Design Tool",
|
||||
"seoTitle": "Black Screen Generator - Create Pure Black Backgrounds",
|
||||
"seoDescription": "Generate pure black screens for OLED displays, dark mode testing, and energy saving. Customize and download high-quality black backgrounds.",
|
||||
"heroTitle": "Pure Black Screen Generator",
|
||||
"heroSubtitle": "Create perfect black backgrounds for your devices",
|
||||
"feature1Title": "OLED Friendly",
|
||||
"feature1Desc": "True black saves power on OLED displays",
|
||||
"feature2Title": "Dark Mode Testing",
|
||||
"feature2Desc": "Perfect for testing dark mode interfaces",
|
||||
"feature3Title": "High Quality",
|
||||
"feature3Desc": "Crisp, pure black backgrounds at any resolution",
|
||||
"ctaTitle": "Ready to Use?",
|
||||
"ctaSubtitle": "Start using your perfect black background now",
|
||||
"ctaButton": "Use Black Screen"
|
||||
},
|
||||
"WhiteScreen": {
|
||||
"toolTitle": "White Screen Design Tool",
|
||||
"seoTitle": "White Screen Generator - Create Pure White Backgrounds",
|
||||
"seoDescription": "Generate pure white screens for display testing, light mode testing, and calibration. Customize and download high-quality white backgrounds.",
|
||||
"heroTitle": "Pure White Screen Generator",
|
||||
"heroSubtitle": "Create perfect white backgrounds for your devices",
|
||||
"feature1Title": "Display Testing",
|
||||
"feature1Desc": "Pure white helps detect dead pixels and screen uniformity",
|
||||
"feature2Title": "Light Mode Testing",
|
||||
"feature2Desc": "Perfect for testing light mode interfaces",
|
||||
"feature3Title": "High Quality",
|
||||
"feature3Desc": "Crisp, pure white backgrounds at any resolution",
|
||||
"ctaTitle": "Ready to Use?",
|
||||
"ctaSubtitle": "Start using your perfect white background now",
|
||||
"ctaButton": "Use White Screen"
|
||||
},
|
||||
"DoNotWriteOnThisPage": {
|
||||
"seoTitle": "Do Not Write On This Page Generator - Create Custom Backgrounds",
|
||||
"seoDescription": "Generate 'Do Not Write On This Page' backgrounds for notebooks, whiteboards and more. Customize text and colors, then download high-quality images.",
|
||||
"seoTitle": "Do Not Write On This Page Generator - Custom Background Creator",
|
||||
"seoDescription": "Free online tool to generate professional 'Do Not Write On This Page' backgrounds. Customize text, colors and download high-resolution images for notebooks, whiteboards and screens.",
|
||||
"toolTitle": "Do Not Write On This Page Generator",
|
||||
"heroTitle": "Create Custom 'Do Not Write On This Page' Backgrounds",
|
||||
"heroSubtitle": "Design perfect backgrounds for your notebooks, whiteboards and devices",
|
||||
"feature1Title": "Customizable Text",
|
||||
"feature1Desc": "Change the text, font and color to suit your needs",
|
||||
"feature2Title": "Background Options",
|
||||
"feature2Desc": "Choose from colors or upload your own background image",
|
||||
"feature3Title": "High Quality",
|
||||
"feature3Desc": "Download crisp, high-resolution images for any use",
|
||||
"ctaTitle": "Ready to Create?",
|
||||
"ctaSubtitle": "Start designing your custom background now",
|
||||
"ctaButton": "Create Background"
|
||||
"heroTitle": "Professional 'Do Not Write On This Page' Background Creator",
|
||||
"heroSubtitle": "Generate and customize perfect backgrounds for notebooks, whiteboards and digital screens",
|
||||
"feature1Title": "Text Customization",
|
||||
"feature1Desc": "Fully customize text content, fonts and colors to create your perfect design",
|
||||
"feature2Title": "Multiple Background Options",
|
||||
"feature2Desc": "Choose from color presets or upload your own images as backgrounds",
|
||||
"feature3Title": "High-Resolution Export",
|
||||
"feature3Desc": "Download print-ready high-quality images in multiple formats",
|
||||
"ctaTitle": "Create Your Custom Background Now",
|
||||
"ctaSubtitle": "Start generating professional 'Do Not Write On This Page' designs",
|
||||
"ctaButton": "Generate Background"
|
||||
}
|
||||
}
|
||||
@@ -1,32 +1,32 @@
|
||||
{
|
||||
"Index": {
|
||||
"appName": "屏幕背景设计工具",
|
||||
"heroTitle": "创建屏幕背景",
|
||||
"heroSubtitle": "为您的设备设计和定制精美且有用的背景",
|
||||
"toolTitle": "设计工具",
|
||||
"getStarted": "立即开始",
|
||||
"featuresTitle": "主要功能",
|
||||
"feature1Title": "轻松定制",
|
||||
"feature1Desc": "直观的工具帮助您创建完美背景",
|
||||
"feature2Title": "多种选择",
|
||||
"feature2Desc": "可选择纯色或上传自己的图片",
|
||||
"feature3Title": "实时预览",
|
||||
"feature3Desc": "设计时即时查看效果",
|
||||
"appName": "Fast3DText",
|
||||
"heroTitle": "创建惊艳的3D文字设计",
|
||||
"heroSubtitle": "为您的项目生成并定制精美的3D文字效果",
|
||||
"toolTitle": "3D文字生成工具",
|
||||
"getStarted": "立即生成",
|
||||
"featuresTitle": "强大功能",
|
||||
"feature1Title": "3D文字定制",
|
||||
"feature1Desc": "可自定义字体、颜色和效果，创建独特的3D文字",
|
||||
"feature2Title": "实时3D预览",
|
||||
"feature2Desc": "设计时可即时查看3D文字效果变化",
|
||||
"feature3Title": "高质量导出",
|
||||
"feature3Desc": "支持多种格式下载您的3D文字设计",
|
||||
"testimonialsTitle": "用户评价",
|
||||
"testimonial1Text": "这个工具节省了我大量时间！",
|
||||
"testimonial1Author": "张先生，设计师",
|
||||
"testimonial2Text": "创建专业背景的最简单方式",
|
||||
"testimonial2Author": "李女士，开发者",
|
||||
"ctaTitle": "准备好开始了吗？",
|
||||
"ctaSubtitle": "立即开始设计您的完美背景",
|
||||
"ctaButton": "开始设计",
|
||||
"faqTitle": "常见问题",
|
||||
"faqQuestion1": "如何下载我的设计？",
|
||||
"faqAnswer1": "完成设计后点击下载按钮",
|
||||
"faqQuestion2": "可以使用自己的图片吗？",
|
||||
"faqAnswer2": "可以，您可以上传任何图片作为背景",
|
||||
"faqQuestion3": "这个工具是免费的吗？",
|
||||
"faqAnswer3": "是的，完全免费且无隐藏收费"
|
||||
"testimonial1Text": "这个3D文字生成器节省了我大量设计时间！",
|
||||
"testimonial1Author": "张先生，平面设计师",
|
||||
"testimonial2Text": "创建专业3D文字效果的最简单方式",
|
||||
"testimonial2Author": "李女士，网页开发者",
|
||||
"ctaTitle": "准备好创建3D文字了吗？",
|
||||
"ctaSubtitle": "立即开始生成您的自定义3D文字设计",
|
||||
"ctaButton": "创建3D文字",
|
||||
"faqTitle": "常见问题 - 3D文字生成器",
|
||||
"faqQuestion1": "如何下载我的3D文字设计？",
|
||||
"faqAnswer1": "点击下载按钮可将3D文字保存为PNG或SVG格式",
|
||||
"faqQuestion2": "可以自定义3D效果吗？",
|
||||
"faqAnswer2": "可以调整深度、光照和透视效果，打造完美的3D文字",
|
||||
"faqQuestion3": "这个3D文字生成器是免费的吗？",
|
||||
"faqAnswer3": "是的，可以免费创建无限量的3D文字设计"
|
||||
},
|
||||
"BackgoundSetting": {
|
||||
"title": "背景设置",
|
||||
@@ -36,6 +36,10 @@
|
||||
"uploadImage": "上传图片"
|
||||
},
|
||||
"PreviewBar": {
|
||||
"tipsTitle": "提示",
|
||||
"mouseLeft": "鼠标左键拖动旋转",
|
||||
"mouseMiddle": "鼠标滚轮滚动放大",
|
||||
"mouseRight": "鼠标右键拖动移动",
|
||||
"previewFullscreen": "全屏预览",
|
||||
"downloadSize": "尺寸",
|
||||
"downloadBackground": "下载图片"
|
||||
@@ -54,52 +58,20 @@
|
||||
"Footer": {
|
||||
"copyright": "© {year} 屏幕背景设计工具 版权所有"
|
||||
},
|
||||
"BlackScreen": {
|
||||
"toolTitle": "黑色屏幕设计工具",
|
||||
"seoTitle": "纯黑屏幕生成器 - 创建纯黑背景",
|
||||
"seoDescription": "生成纯黑屏幕用于OLED显示、暗黑模式测试和节能。自定义并下载高质量黑色背景。",
|
||||
"heroTitle": "纯黑屏幕生成器",
|
||||
"heroSubtitle": "为您的设备创建完美黑色背景",
|
||||
"feature1Title": "OLED友好",
|
||||
"feature1Desc": "纯黑色可节省OLED显示屏电量",
|
||||
"feature2Title": "暗黑模式测试",
|
||||
"feature2Desc": "完美用于测试暗黑模式界面",
|
||||
"feature3Title": "高质量",
|
||||
"feature3Desc": "任何分辨率下都清晰锐利的纯黑背景",
|
||||
"ctaTitle": "准备好使用了吗？",
|
||||
"ctaSubtitle": "立即开始使用您的完美黑色背景",
|
||||
"ctaButton": "使用纯黑屏幕"
|
||||
},
|
||||
"WhiteScreen": {
|
||||
"toolTitle": "白色屏幕设计工具",
|
||||
"seoTitle": "纯白屏幕生成器 - 创建纯白背景",
|
||||
"seoDescription": "生成纯白屏幕用于显示测试、亮色模式测试和校准。自定义并下载高质量白色背景。",
|
||||
"heroTitle": "纯白屏幕生成器",
|
||||
"heroSubtitle": "为您的设备创建完美白色背景",
|
||||
"feature1Title": "显示测试",
|
||||
"feature1Desc": "纯白色可用于检测显示屏坏点和均匀性",
|
||||
"feature2Title": "亮色模式测试",
|
||||
"feature2Desc": "完美用于测试亮色模式界面",
|
||||
"feature3Title": "高质量",
|
||||
"feature3Desc": "任何分辨率下都清晰锐利的纯白背景",
|
||||
"ctaTitle": "准备好使用了吗？",
|
||||
"ctaSubtitle": "立即开始使用您的完美白色背景",
|
||||
"ctaButton": "使用纯白屏幕"
|
||||
},
|
||||
"DoNotWriteOnThisPage": {
|
||||
"seoTitle": "请勿在此页书写生成器 - 创建自定义背景",
|
||||
"seoDescription": "生成'请勿在此页书写'背景，适用于笔记本、白板等。自定义文字和颜色，下载高质量图片。",
|
||||
"seoTitle": "请勿在此页书写生成器 - 专业背景制作工具",
|
||||
"seoDescription": "免费在线生成专业的'请勿在此页书写'背景。自定义文字、颜色，下载高分辨率图片，适用于笔记本、白板和屏幕。",
|
||||
"toolTitle": "请勿在此页书写生成器",
|
||||
"heroTitle": "创建自定义'请勿在此页书写'背景",
|
||||
"heroSubtitle": "为您的笔记本、白板和设备设计完美背景",
|
||||
"feature1Title": "可自定义文字",
|
||||
"feature1Desc": "可更改文字、字体和颜色以满足需求",
|
||||
"feature2Title": "背景选项",
|
||||
"feature2Desc": "可选择纯色或上传自定义背景图片",
|
||||
"feature3Title": "高质量",
|
||||
"feature3Desc": "可下载高分辨率图片用于各种用途",
|
||||
"ctaTitle": "准备好开始了吗？",
|
||||
"ctaSubtitle": "立即开始设计您的自定义背景",
|
||||
"ctaButton": "创建背景"
|
||||
"heroTitle": "专业'请勿在此页书写'背景制作工具",
|
||||
"heroSubtitle": "为笔记本、白板和数字屏幕生成并定制完美背景",
|
||||
"feature1Title": "文字定制",
|
||||
"feature1Desc": "完全自定义文字内容、字体和颜色，打造完美设计",
|
||||
"feature2Title": "多种背景选项",
|
||||
"feature2Desc": "可选择预设颜色或上传自定义图片作为背景",
|
||||
"feature3Title": "高清导出",
|
||||
"feature3Desc": "下载印刷级高质量图片，支持多种格式",
|
||||
"ctaTitle": "立即创建您的自定义背景",
|
||||
"ctaSubtitle": "开始生成专业的'请勿在此页书写'设计",
|
||||
"ctaButton": "生成背景"
|
||||
}
|
||||
}
|
||||
@@ -3,8 +3,9 @@ import { getTranslations, setRequestLocale } from "next-intl/server";
|
||||
import Footer from "@/components/Footer";
|
||||
import Header from "@/components/Header";
|
||||
import { useTranslations } from "next-intl";
|
||||
import DoNotWriteOnThisPage from "@/components/screen/DoNotWriteOnThisPage";
|
||||
import { Metadata } from "next";
|
||||
import Editor from "@/components/Editor";
|
||||
import { FontNames, FontWeights } from "@/components/common/TextSetting";
|
||||
|
||||
export default function Page({
|
||||
params,
|
||||
@@ -18,6 +19,13 @@ export default function Page({
|
||||
const t = useTranslations("DoNotWriteOnThisPage");
|
||||
const indexT = useTranslations("Index");
|
||||
|
||||
const text = {
|
||||
text: "Do Not Write On This Page",
|
||||
color: "#8e86fe",
|
||||
font: FontNames[0],
|
||||
weight: FontWeights[0],
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen overflow-hidden">
|
||||
{/* Header */}
|
||||
@@ -41,7 +49,7 @@ export default function Page({
|
||||
<h2 className="text-3xl font-bold text-center mb-12">
|
||||
{t("toolTitle")}
|
||||
</h2>
|
||||
<DoNotWriteOnThisPage></DoNotWriteOnThisPage>
|
||||
<Editor textProp={text} backgroundProp={undefined}></Editor>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
|
||||
@@ -28,7 +28,7 @@ export default function HomePage({
|
||||
{/* Hero Section */}
|
||||
<Section className="w-full bg-gradient-to-r from-blue-500 to-purple-600">
|
||||
<Flex justify={"center"} align={"center"} direction={"column"}>
|
||||
<Heading as="h1" size={"7"} >
|
||||
<Heading as="h1" size={"9"} >
|
||||
{t("heroTitle")}
|
||||
</Heading>
|
||||
<Box p={"4"} >
|
||||
@@ -45,92 +45,92 @@ export default function HomePage({
|
||||
|
||||
{/* 工具栏 */}
|
||||
<Section p="4" className="md:w-2/3 w-full">
|
||||
<Flex justify={"between"} align={"center"} direction={"column"} gap={"2"}>
|
||||
<Heading as="h2" size={"6"}>
|
||||
<Flex justify={"between"} align={"center"} direction={"column"} gap={"6"} p={"6"} id="designTool">
|
||||
<Heading as="h2" size={"8"}>
|
||||
{t("toolTitle")}
|
||||
</Heading>
|
||||
<Editor></Editor>
|
||||
<Editor textProp={undefined} backgroundProp={undefined} ></Editor>
|
||||
</Flex>
|
||||
|
||||
</Section>
|
||||
|
||||
{/* Features Section */}
|
||||
<Section className="w-full py-16 bg-gradient-to-br from-orange-50 to-amber-50">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">
|
||||
<Section className="w-full py-16 bg-accent-3">
|
||||
<Flex direction={"column"} justify={"center"} align={"center"} gap={"6"} p={"6"}>
|
||||
<Heading as="h2" size={"8"} className="text-3xl font-bold text-center">
|
||||
{t("featuresTitle")}
|
||||
</h2>
|
||||
</Heading>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-orange-500">
|
||||
<h3 className="text-xl font-bold mb-3">{t("feature1Title")}</h3>
|
||||
<p className="text-gray-600">{t("feature1Desc")}</p>
|
||||
<div className=" p-6 rounded-lg shadow-sm border-l-4 border-orange-500">
|
||||
<Heading as="h3" className="text-xl font-bold mb-3">{t("feature1Title")}</Heading>
|
||||
<p >{t("feature1Desc")}</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-amber-500">
|
||||
<h3 className="text-xl font-bold mb-3">{t("feature2Title")}</h3>
|
||||
<p className="text-gray-600">{t("feature2Desc")}</p>
|
||||
<div className="p-6 rounded-lg shadow-sm border-l-4 border-amber-500">
|
||||
<Heading as="h3" className="text-xl font-bold mb-3">{t("feature2Title")}</Heading>
|
||||
<p >{t("feature2Desc")}</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-yellow-500">
|
||||
<h3 className="text-xl font-bold mb-3">{t("feature3Title")}</h3>
|
||||
<p className="text-gray-600">{t("feature3Desc")}</p>
|
||||
<div className=" p-6 rounded-lg shadow-sm border-l-4 border-yellow-500">
|
||||
<Heading as="h3" className="text-xl font-bold mb-3">{t("feature3Title")}</Heading>
|
||||
<p >{t("feature3Desc")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</Section>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<Section className="w-full py-16 bg-gradient-to-br from-blue-50 to-purple-50">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 space-y-8">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">
|
||||
<Section className="w-full py-16 bg-gray-2">
|
||||
<Flex direction={"column"} justify={"center"} align={"center"} gap={"6"} p={"6"}>
|
||||
<Heading as="h2" size={"8"} className="text-3xl font-bold text-center mb-12">
|
||||
{t("testimonialsTitle")}
|
||||
</h2>
|
||||
</Heading>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-blue-500">
|
||||
<p className="text-gray-600 mb-4">"{t("testimonial1Text")}"</p>
|
||||
<div className=" p-6 rounded-lg shadow-sm border-l-4 border-blue-500">
|
||||
<p className=" mb-4">"{t("testimonial1Text")}"</p>
|
||||
<p className="font-semibold">- {t("testimonial1Author")}</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border-l-4 border-purple-500">
|
||||
<p className="text-gray-600 mb-4">"{t("testimonial2Text")}"</p>
|
||||
<div className=" p-6 rounded-lg shadow-sm border-l-4 border-purple-500">
|
||||
<p className=" mb-4">"{t("testimonial2Text")}"</p>
|
||||
<p className="font-semibold">- {t("testimonial2Author")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="w-full py-16 bg-blue-600 text-white">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 className="text-3xl font-bold mb-6">{t("ctaTitle")}</h2>
|
||||
<Section className="w-full py-16 bg-blue-9 ">
|
||||
<Flex direction={"column"} justify={"center"} align={"center"} gap={"6"} p={"6"}>
|
||||
<Heading as="h2" size={"8"} className="text-3xl font-bold mb-6">{t("ctaTitle")}</Heading>
|
||||
<p className="text-xl mb-8 max-w-3xl mx-auto">{t("ctaSubtitle")}</p>
|
||||
<a
|
||||
className="bg-white text-blue-600 px-8 py-3 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors"
|
||||
className=" px-8 py-3 rounded-full font-bold text-lg bg-blue-300 hover:bg-blue-500 transition-colors dark:bg-gray-800 dark:hover:bg-gray-600"
|
||||
href="#designTool"
|
||||
>
|
||||
{t("ctaButton")}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</Flex>
|
||||
</Section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="w-full py-16 bg-white">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">
|
||||
<section className="w-full py-16 bg-panel">
|
||||
<Flex direction={"column"} justify={"center"} align={"center"} gap={"6"} p={"6"}>
|
||||
<Heading as="h2" size={"8"} className="text-3xl font-bold text-center mb-12">
|
||||
{t("faqTitle")}
|
||||
</h2>
|
||||
</Heading>
|
||||
<div className="max-w-3xl mx-auto space-y-4">
|
||||
<div className="border-b pb-4">
|
||||
<h3 className="text-xl font-bold mb-2">{t("faqQuestion1")}</h3>
|
||||
<p className="text-gray-600">{t("faqAnswer1")}</p>
|
||||
<Heading as="h3" className="text-xl font-bold mb-2">{t("faqQuestion1")}</Heading>
|
||||
<p >{t("faqAnswer1")}</p>
|
||||
</div>
|
||||
<div className="border-b pb-4">
|
||||
<h3 className="text-xl font-bold mb-2">{t("faqQuestion2")}</h3>
|
||||
<p className="text-gray-600">{t("faqAnswer2")}</p>
|
||||
<Heading as="h3" className="text-xl font-bold mb-2">{t("faqQuestion2")}</Heading>
|
||||
<p>{t("faqAnswer2")}</p>
|
||||
</div>
|
||||
<div className="border-b pb-4">
|
||||
<h3 className="text-xl font-bold mb-2">{t("faqQuestion3")}</h3>
|
||||
<p className="text-gray-600">{t("faqAnswer3")}</p>
|
||||
<Heading as="h3" className="text-xl font-bold mb-2">{t("faqQuestion3")}</Heading>
|
||||
<p >{t("faqAnswer3")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</section>
|
||||
</Flex>
|
||||
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary: oklch(100% 0.00011 271.152);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
@@ -95,7 +95,7 @@
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--border: oklch(71.931% 0.03935 17.993 / 0.3);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
|
||||
@@ -12,17 +12,16 @@ import { useTranslations } from "next-intl";
|
||||
* 全特性工具栏
|
||||
* @returns
|
||||
*/
|
||||
export default function Page() {
|
||||
|
||||
export default function Page({ textProp, backgroundProp }: { textProp: TextProp | undefined, backgroundProp: BackgroundProp | undefined }) {
|
||||
|
||||
const t = useTranslations("TextEditor");
|
||||
|
||||
const [background, setBackground] = useState<BackgroundProp>({
|
||||
const [background, setBackground] = useState<BackgroundProp>(backgroundProp || {
|
||||
type: "color",
|
||||
color: "#c4b1b1",
|
||||
image: null,
|
||||
});
|
||||
const [text, setText] = useState<TextProp>({
|
||||
const [text, setText] = useState<TextProp>(textProp || {
|
||||
text: t("defaultText"),
|
||||
color: "#8e86fe",
|
||||
font: FontNames[0],
|
||||
|
||||
@@ -8,18 +8,6 @@ export default function Footer() {
|
||||
<footer className="w-full border-t backdrop-blur-sm bg-background/95 ">
|
||||
<Flex justify={"between"} align={"center"} direction={"column"} gap={"2"} p="2">
|
||||
<Flex justify={"center"} gap={"4"}>
|
||||
<Link
|
||||
href="/black-screen"
|
||||
className="text-sm text-muted-foreground hover:text-primary"
|
||||
>
|
||||
Black Screen
|
||||
</Link>
|
||||
<Link
|
||||
href="/white-screen"
|
||||
className="text-sm text-muted-foreground hover:text-primary"
|
||||
>
|
||||
White Screen
|
||||
</Link>
|
||||
<Link
|
||||
href="/do-not-write-on-this-page"
|
||||
className="text-sm text-muted-foreground hover:text-primary"
|
||||
|
||||
@@ -15,16 +15,6 @@ export default function Header() {
|
||||
</Box >
|
||||
|
||||
<Flex gap={"4"} justify={"between"} align={"center"}>
|
||||
<Link
|
||||
href="/black-screen"
|
||||
>
|
||||
Black Screen
|
||||
</Link>
|
||||
<Link
|
||||
href="/white-screen"
|
||||
>
|
||||
White Screen
|
||||
</Link>
|
||||
<Link
|
||||
href="/do-not-write-on-this-page"
|
||||
>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useTranslations } from "next-intl";
|
||||
import { Eye, Download } from "lucide-react";
|
||||
import { BackgroundProp } from "./BackgroundSelector";
|
||||
import { TextProp } from "./TextSetting";
|
||||
import { Box, Flex } from "@radix-ui/themes";
|
||||
import { Text, Flex } from "@radix-ui/themes";
|
||||
import { getPicture, resize, init as threeInit, updateBackground, updateTextProps } from "./ThreeTools";
|
||||
|
||||
const Sizes = [
|
||||
@@ -13,7 +13,6 @@ const Sizes = [
|
||||
"800x600",
|
||||
]
|
||||
|
||||
|
||||
function gcd(a: number, b: number): number {
|
||||
return b === 0 ? a : gcd(b, a % b);
|
||||
}
|
||||
@@ -128,6 +127,12 @@ export default function PreviewToolbar({
|
||||
|
||||
return (
|
||||
<Flex direction={"column"} justify={"center"} align={"center"} p="2" className="rounded-lg border w-full" gap={"2"}>
|
||||
<Flex gap={"4"} >
|
||||
{t("tipsTitle")}:
|
||||
<Text>{t("mouseLeft")}</Text>
|
||||
<Text>{t("mouseMiddle")}</Text>
|
||||
<Text>{t("mouseRight")}</Text>
|
||||
</Flex>
|
||||
<canvas ref={container} className="w-full border border-gray-300" style={{
|
||||
aspectRatio: AspectRatio[aspectRadio],
|
||||
// backgroundColor: background.type === "color" ? background.color : "none",
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { Flex, Heading } from "@radix-ui/themes";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export interface TextProp {
|
||||
text: string;
|
||||
@@ -10,13 +9,18 @@ export interface TextProp {
|
||||
}
|
||||
|
||||
export function getFontPath(fontName: string, fontWeight: String) {
|
||||
return `/fonts/${fontName}_${fontWeight}.typeface.json`;
|
||||
if (fontName != "noto_sans_zh") {
|
||||
return `/fonts/${fontName}_${fontWeight}.typeface.json`;
|
||||
} else {
|
||||
fontWeight = fontWeight.charAt(0).toUpperCase() + fontWeight.slice(1);
|
||||
return `https://fast3dtest.mysoul.fun/Noto_Sans_SC_${fontWeight}.json`;
|
||||
}
|
||||
}
|
||||
|
||||
export const FontWeights = ["regular", "bold"];
|
||||
export const FontNames = ["gentilis", "helvetiker", "optimer"];
|
||||
export const FontNames = ["gentilis", "helvetiker", "optimer", "noto_sans_zh"];
|
||||
|
||||
export default function TextEditor({
|
||||
export default function TextSetting({
|
||||
text,
|
||||
setText,
|
||||
}: {
|
||||
|
||||
Reference in New Issue
Block a user