diff --git a/messages/en.json b/messages/en.json index 355bd23..617d54e 100644 --- a/messages/en.json +++ b/messages/en.json @@ -20,6 +20,14 @@ "tryAgain": "Try again", "backToHome": "Back to home" }, + "AboutPage": { + "title": "About", + "subtitle": "Learn more about our company, mission, and values", + "authorName": "MkSaaS", + "authorBio": "Fullstack Developer", + "authorIntroduction": "Hi there! This is MkSaaS, an AI SaaS template built with modern technologies, helping you build your SaaS faster and better. If you have any questions, welcome to contact me.", + "talkWithMe": "Talk with me" + }, "ChangelogPage": { "title": "Changelog", "subtitle": "Stay up to date with the latest changes in our product" diff --git a/messages/zh.json b/messages/zh.json index b3ea0b2..cf5d9a3 100644 --- a/messages/zh.json +++ b/messages/zh.json @@ -17,6 +17,14 @@ "tryAgain": "重试", "backToHome": "返回首页" }, + "AboutPage": { + "title": "关于我们", + "subtitle": "了解更多关于我们的公司、使命和价值观", + "authorName": "MkSaaS", + "authorBio": "全栈开发工程师", + "authorIntroduction": "你好，这里是 MkSaaS，一个使用最先进的技术栈构建的 AI SaaS 模板，它可以帮助你更快更好地构建你的 SaaS。如果你有任何问题，欢迎联系我。", + "talkWithMe": "联系我" + }, "ChangelogPage": { "title": "更新日志", "subtitle": "查看我们产品的最新动态" diff --git a/next.config.ts b/next.config.ts index d72c027..b5e90d2 100644 --- a/next.config.ts +++ b/next.config.ts @@ -28,6 +28,10 @@ const nextConfig: NextConfig = { protocol: "https", hostname: "randomuser.me", }, + { + protocol: "https", + hostname: "images.pexels.com", + }, ], }, }; diff --git a/src/app/[locale]/(marketing)/(pages)/about/page.tsx b/src/app/[locale]/(marketing)/(pages)/about/page.tsx new file mode 100644 index 0000000..5b29d56 --- /dev/null +++ b/src/app/[locale]/(marketing)/(pages)/about/page.tsx @@ -0,0 +1,286 @@ +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Button } from "@/components/ui/button"; +import { siteConfig } from "@/config/site"; +import { MailIcon, UserCircleIcon } from "lucide-react"; +import { getTranslations } from "next-intl/server"; +import Image from "next/image"; + +/** + * inspired by https://astro-nomy.vercel.app/about + */ +export default async function AboutPage() { + const t = await getTranslations("AboutPage"); + + return ( +
+ {/* about section */} +
+
+
+ {/* avatar and name */} +
+ + + + + + +
+

+ {t("authorName")} +

+

+ {t("authorBio")} +

+
+
+ + {/* introduction */} +
+

+ {t("authorIntroduction")} +

+ + +
+
+
+
+ + {/* images section */} +
+
+
+ {/* Mobile view (1 column) */} +
+ {images.map((image, index) => ( +
+ {image.alt} +
+ ))} +
+ + {/* Tablet view (2 columns) */} +
+
+ {images.slice(0, 4).map((image, index) => ( +
+ {image.alt} +
+ ))} +
+
+ {images.slice(4, 8).map((image, index) => ( +
+ {image.alt} +
+ ))} +
+
+ + {/* Desktop view (4 columns) */} +
+ {/* First Column */} +
+
+ {images[0].alt} +
+
+ {images[1].alt} +
+
+ + {/* Second Column */} +
+
+ {images[2].alt} +
+
+ {images[3].alt} +
+
+ {images[4].alt} +
+
+ + {/* Third Column */} +
+
+ {images[5].alt} +
+
+ {images[6].alt} +
+
+ + {/* Fourth Column */} +
+
+ {images[7].alt} +
+
+ {images[8].alt} +
+
+
+
+
+
+
+ ); +} + +interface ImagesProps { + image: string; + alt: string; +} + +export const images: ImagesProps[] = [ + // first column + { + image: + "https://images.pexels.com/photos/15372903/pexels-photo-15372903/free-photo-of-computer-setup-with-big-monitor-screen.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + alt: "setup desktop", + }, + { + image: + "https://images.pexels.com/photos/1049317/pexels-photo-1049317.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + alt: "friends smiles", + }, + // second column + { + image: + "https://images.pexels.com/photos/3712095/pexels-photo-3712095.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + alt: "grey cat", + }, + { + image: + "https://images.pexels.com/photos/9293249/pexels-photo-9293249.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + alt: "home building", + }, + { + image: + "https://images.pexels.com/photos/375467/pexels-photo-375467.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + alt: "pizza laptop", + }, + // third column + { + image: + "https://images.pexels.com/photos/1230302/pexels-photo-1230302.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + alt: "hike and sunset", + }, + { + image: + "https://images.pexels.com/photos/5500779/pexels-photo-5500779.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + alt: "chinese lantern", + }, + // fourth column + { + image: + "https://images.pexels.com/photos/2090644/pexels-photo-2090644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + alt: "the great wheel", + }, + { + image: + "https://images.pexels.com/photos/7418632/pexels-photo-7418632.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + alt: "dalmatian", + }, +]; \ No newline at end of file diff --git a/src/app/[locale]/(marketing)/(pages)/contact/page.tsx b/src/app/[locale]/(marketing)/(pages)/contact/page.tsx index 5aa72c8..9b9fa7d 100644 --- a/src/app/[locale]/(marketing)/(pages)/contact/page.tsx +++ b/src/app/[locale]/(marketing)/(pages)/contact/page.tsx @@ -8,7 +8,7 @@ import { Textarea } from '@/components/ui/textarea'; import { useTranslations } from 'next-intl'; /** - * https://nsui.irung.me/contact + * inspired by https://nsui.irung.me/contact */ export default function ContactPage() { const t = useTranslations('ContactPage'); diff --git a/src/app/[locale]/(marketing)/(pages)/layout.tsx b/src/app/[locale]/(marketing)/(pages)/layout.tsx index ed49539..def0cdc 100644 --- a/src/app/[locale]/(marketing)/(pages)/layout.tsx +++ b/src/app/[locale]/(marketing)/(pages)/layout.tsx @@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react'; export default function LegalLayout({ children }: PropsWithChildren) { return ( - +
{children}