From 024ccbede37802af5e09d17601eca127a640f1df Mon Sep 17 00:00:00 2001 From: JOYCEQL <1449239013@qq.com> Date: Mon, 16 Dec 2024 20:25:48 +0800 Subject: [PATCH] feat: home page ssr --- apps/fronted/src/app/globals.css | 2 +- apps/fronted/src/app/page.tsx | 220 ++++++------------ .../src/components/home/AnimatedFeatures.tsx | 112 --------- .../src/components/home/AnimatedHero.tsx | 46 ---- .../src/components/home/CreateResume.tsx | 18 -- .../src/components/home/FeaturesAnimation.tsx | 21 ++ apps/fronted/src/components/home/Header.tsx | 79 +++++++ .../src/components/home/HeroAnimation.tsx | 16 ++ .../src/components/home/TypewriterText.tsx | 32 --- 9 files changed, 182 insertions(+), 364 deletions(-) delete mode 100644 apps/fronted/src/components/home/AnimatedFeatures.tsx delete mode 100644 apps/fronted/src/components/home/AnimatedHero.tsx delete mode 100644 apps/fronted/src/components/home/CreateResume.tsx create mode 100644 apps/fronted/src/components/home/FeaturesAnimation.tsx create mode 100644 apps/fronted/src/components/home/Header.tsx create mode 100644 apps/fronted/src/components/home/HeroAnimation.tsx delete mode 100644 apps/fronted/src/components/home/TypewriterText.tsx diff --git a/apps/fronted/src/app/globals.css b/apps/fronted/src/app/globals.css index fb68765..876eed8 100644 --- a/apps/fronted/src/app/globals.css +++ b/apps/fronted/src/app/globals.css @@ -56,7 +56,7 @@ * { scrollbar-width: thin; - scrollbar-color: #c1c1c1 #f1f1f1; + scrollbar-color: rgba(255, 255, 255, 0.16) transparent; } .dark { diff --git a/apps/fronted/src/app/page.tsx b/apps/fronted/src/app/page.tsx index 7dc8d89..9929b92 100644 --- a/apps/fronted/src/app/page.tsx +++ b/apps/fronted/src/app/page.tsx @@ -1,176 +1,86 @@ -"use client"; -import { useEffect, useState } from "react"; -import { Moon, Sun } from "lucide-react"; -import { motion } from "framer-motion"; import Link from "next/link"; import Image from "next/image"; - import { Button } from "@/components/ui/button"; -import Logo from "@/components/shared/Logo"; -import ThemeToggle from "@/components/shared/ThemeToggle"; +import Header from "@/components/home/Header"; +import { HeroAnimation } from "@/components/home/HeroAnimation"; +import { FeaturesAnimation } from "@/components/home/FeaturesAnimation"; + +const features = [ + { + title: "简约设计", + description: "专注于内容创作，简洁的界面让您的思路更加清晰", + icon: "✨", + }, + { + title: "本地存储", + description: "所有数据存储在本地，无需担心隐私泄露", + icon: "🔒", + }, + { + title: "智能助手", + description: "AI助手帮您优化简历内容，提供专业建议", + icon: "🤖", + }, +]; export default function LandingPage() { - const [isVisible, setIsVisible] = useState(true); - const [lastScrollY, setLastScrollY] = useState(0); - - useEffect(() => { - const handleScroll = () => { - const currentScrollY = window.scrollY; - - if (currentScrollY < 10) { - setIsVisible(true); - setLastScrollY(currentScrollY); - return; - } - - if (currentScrollY > lastScrollY && currentScrollY > 200) { - setIsVisible(false); - } else if (currentScrollY < lastScrollY) { - setIsVisible(true); - } - - setLastScrollY(currentScrollY); - }; - - window.addEventListener("scroll", handleScroll, { passive: true }); - return () => window.removeEventListener("scroll", handleScroll); - }, [lastScrollY]); - return (
-
- -
-
-
- - Magic Resume -
-
- -
- - -
- - - - -
-
-
- -
+
- - - 专注内容，隐私优先 - - - 数据完全存储在本地，确保您的隐私安全。 - - - - - - - +
+ +

+ 专注内容，隐私优先 +

+

+ 数据完全存储在本地，确保您的隐私安全。 +

+
+ + + +
+ - -
- resume-shot - +
+
+ resume-shot +
+
- {[ - { - title: "简约设计", - description: "专注于内容创作，简洁的界面让您的思路更加清晰", - icon: "✨", - }, - { - title: "本地存储", - description: "所有数据存储在本地，无需担心隐私泄露", - icon: "🔒", - }, - { - title: "智能助手", - description: "AI助手帮您优化简历内容，提供专业建议", - icon: "🤖", - }, - ].map((feature, index) => ( - -
-
-
{feature.icon}
-

- {feature.title} -

-

{feature.description}

+ {features.map((feature, index) => ( + +
+
+
+
{feature.icon}
+

+ {feature.title} +

+

+ {feature.description} +

+
- + ))}
@@ -179,7 +89,7 @@ export default function LandingPage() {
-

2024 Magic Resume. All rights reserved.

+

© 2024 Magic Resume. All rights reserved.

diff --git a/apps/fronted/src/components/home/AnimatedFeatures.tsx b/apps/fronted/src/components/home/AnimatedFeatures.tsx deleted file mode 100644 index ef1557c..0000000 --- a/apps/fronted/src/components/home/AnimatedFeatures.tsx +++ /dev/null @@ -1,112 +0,0 @@ -"use client"; - -import React from "react"; -import { motion } from "framer-motion"; -import { Layout, Layers, Cloud, Sparkles, Zap, Shield } from "lucide-react"; -import { cn } from "@/lib/utils"; - -const features = [ - { - title: "智能排版", - description: "AI自动优化布局，告别繁琐调整", - icon: Layout, - gradient: "from-blue-500 to-cyan-500", - delay: 0, - }, - { - title: "一键生成", - description: "输入基本信息，AI助手帮你完成剩余内容", - icon: Sparkles, - gradient: "from-violet-500 to-purple-500", - delay: 0.1, - }, - { - title: "多端同步", - description: "随时随地编辑，数据实时云端同步", - icon: Cloud, - gradient: "from-pink-500 to-rose-500", - delay: 0.2, - }, - { - title: "极速体验", - description: "毫秒级响应，流畅的编辑体验", - icon: Zap, - gradient: "from-amber-500 to-orange-500", - delay: 0.3, - }, - { - title: "安全可靠", - description: "数据安全加密，保护你的隐私", - icon: Shield, - gradient: "from-emerald-500 to-green-500", - delay: 0.4, - }, - { - title: "专业模板", - description: "海量精选模板，一键套用", - icon: Layers, - gradient: "from-blue-500 to-indigo-500", - delay: 0.5, - }, -]; - -export default function AnimatedFeatures() { - return ( -
-
- -
-
- - 强大的功能特性 - - - 集成多项创新技术，为你提供极致的简历制作体验 - -
- -
- {features.map((feature, index) => ( - -
-
-
- -
- -

- {feature.title} -

-

- {feature.description} -

-
- - ))} -
-
-
- ); -} diff --git a/apps/fronted/src/components/home/AnimatedHero.tsx b/apps/fronted/src/components/home/AnimatedHero.tsx deleted file mode 100644 index 95ae896..0000000 --- a/apps/fronted/src/components/home/AnimatedHero.tsx +++ /dev/null @@ -1,46 +0,0 @@ -"use client"; - -import React from "react"; -import { motion } from "framer-motion"; -import { ArrowRight } from "lucide-react"; -import EditButton from "@/components/shared/EditButton"; -import TypewriterText from "./TypewriterText"; - -export default function AnimatedHero() { - return ( -
-
-
-
-
-
-
- -
- -

- - AI智能 - - 打造 - 完美简历 -

- -
- - 免费开始使用 - - - -
- -
-
- ); -} diff --git a/apps/fronted/src/components/home/CreateResume.tsx b/apps/fronted/src/components/home/CreateResume.tsx deleted file mode 100644 index 7b0056a..0000000 --- a/apps/fronted/src/components/home/CreateResume.tsx +++ /dev/null @@ -1,18 +0,0 @@ -"use client"; -import { openAIRequest } from "@/utils"; - -const CreateResume = () => { - const createResumeByAI = () => { - openAIRequest("你是谁"); - }; - return ( - - ); -}; - -export default CreateResume; diff --git a/apps/fronted/src/components/home/FeaturesAnimation.tsx b/apps/fronted/src/components/home/FeaturesAnimation.tsx new file mode 100644 index 0000000..9520dfd --- /dev/null +++ b/apps/fronted/src/components/home/FeaturesAnimation.tsx @@ -0,0 +1,21 @@ +"use client"; + +import { motion } from "framer-motion"; +import { PropsWithChildren } from "react"; + +interface FeaturesAnimationProps extends PropsWithChildren { + index: number; +} + +export function FeaturesAnimation({ children, index }: FeaturesAnimationProps) { + return ( + + {children} + + ); +} diff --git a/apps/fronted/src/components/home/Header.tsx b/apps/fronted/src/components/home/Header.tsx new file mode 100644 index 0000000..a961a30 --- /dev/null +++ b/apps/fronted/src/components/home/Header.tsx @@ -0,0 +1,79 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { Moon, Sun } from "lucide-react"; +import { motion } from "framer-motion"; +import Link from "next/link"; + +import { Button } from "@/components/ui/button"; +import Logo from "@/components/shared/Logo"; +import ThemeToggle from "@/components/shared/ThemeToggle"; + +export default function Header() { + const [isVisible, setIsVisible] = useState(true); + const [lastScrollY, setLastScrollY] = useState(0); + + useEffect(() => { + const handleScroll = () => { + const currentScrollY = window.scrollY; + + if (currentScrollY < 10) { + setIsVisible(true); + setLastScrollY(currentScrollY); + return; + } + + if (currentScrollY > lastScrollY && currentScrollY > 200) { + setIsVisible(false); + } else if (currentScrollY < lastScrollY) { + setIsVisible(true); + } + + setLastScrollY(currentScrollY); + }; + + window.addEventListener("scroll", handleScroll, { passive: true }); + return () => window.removeEventListener("scroll", handleScroll); + }, [lastScrollY]); + + return ( +
+ +
+
+
+ + Magic Resume +
+
+ +
+ + +
+ + + + +
+
+
+ +
+ ); +} diff --git a/apps/fronted/src/components/home/HeroAnimation.tsx b/apps/fronted/src/components/home/HeroAnimation.tsx new file mode 100644 index 0000000..3fe5e87 --- /dev/null +++ b/apps/fronted/src/components/home/HeroAnimation.tsx @@ -0,0 +1,16 @@ +"use client"; + +import { motion } from "framer-motion"; +import { PropsWithChildren } from "react"; + +export function HeroAnimation({ children }: PropsWithChildren) { + return ( + + {children} + + ); +} diff --git a/apps/fronted/src/components/home/TypewriterText.tsx b/apps/fronted/src/components/home/TypewriterText.tsx deleted file mode 100644 index 9cb96a7..0000000 --- a/apps/fronted/src/components/home/TypewriterText.tsx +++ /dev/null @@ -1,32 +0,0 @@ -"use client"; - -import React, { useState, useEffect } from "react"; - -interface TypewriterTextProps { - text: string; -} - -export default function TypewriterText({ text }: TypewriterTextProps) { - const [displayText, setDisplayText] = useState(""); - const [currentIndex, setCurrentIndex] = useState(0); - - useEffect(() => { - if (currentIndex < text.length) { - const timeout = setTimeout( - () => { - setDisplayText((prev) => prev + text[currentIndex]); - setCurrentIndex((c) => c + 1); - }, - 50 + Math.random() * 50 - ); - return () => clearTimeout(timeout); - } - }, [currentIndex, text]); - - return ( - - {displayText} - - - ); -}