更加首页背景图，增加点击弹出联系方式

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+dist.zip

src/components/Hero.tsx

@@ -1,9 +1,22 @@
 import { useEffect, useState } from 'react';
 import { useTheme } from './theme-provider';
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { toast } from "@/components/ui/use-toast";
+
+const WECHAT_ID = "JIWEI-Tech";
 
 export const Hero = () => {
   const { theme } = useTheme();
   const [isDark, setIsDark] = useState(false);
+  const [isContactModalOpen, setIsContactModalOpen] = useState(false);
 
   useEffect(() => {
     if (theme === 'system') {
@@ -17,68 +30,97 @@ export const Hero = () => {
     }
   }, [theme]);
 
+  const handleBackgroundClick = () => {
+    setIsContactModalOpen(true);
+  };
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(WECHAT_ID).then(
+      () => {
+        setIsContactModalOpen(false);
+        toast({
+          title: "复制成功",
+          description: "微信号已复制到剪贴板",
+        });
+      },
+      (err) => {
+        console.error("Async: Could not copy text: ", err);
+        toast({
+          title: "复制失败",
+          description: "请手动复制微信号。",
+          variant: "destructive",
+        });
+      }
+    );
+  };
+
   const bgUrl = isDark
     ? 'url(https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250619153149236.png)'
     : 'url(https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250619153149236.png)';
 
   return (
+    <>
       <section
         id="index"
         className="container grid lg:grid-cols-2 place-items-center py-10 md:py-20 gap-6
-        h-[200px] md:h-[400px] lg:h-[500px] xl:h-[600px] max-w-[1920px] mx-auto"
+          h-[200px] md:h-[400px] lg:h-[500px] xl:h-[600px] max-w-[1920px] mx-auto relative cursor-pointer"
         style={{
           backgroundImage: bgUrl,
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           backgroundRepeat: 'no-repeat',
         }}
+        onClick={handleBackgroundClick}
       >
-      {/* <div className="text-center lg:text-start space-y-6">
-        <main className="text-5xl md:text-6xl font-bold">
-          <h1 className="inline">
-            <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
-              Shadcn
-            </span>{" "}
-            landing page
-          </h1>{" "}
-          for{" "}
-          <h2 className="inline">
-            <span className="inline bg-gradient-to-r from-[#61DAFB] via-[#1fc0f1] to-[#03a3d7] text-transparent bg-clip-text">
-              React
-            </span>{" "}
-            developers
-          </h2>
-        </main>
 
-        <p className="text-xl text-muted-foreground md:w-10/12 mx-auto lg:mx-0">
-          Build your React landing page effortlessly with the required sections
-          to your project.
-        </p>
-
-        <div className="space-y-4 md:space-y-0 md:space-x-4">
-          <Button className="w-full md:w-1/3">Get Started</Button>
-
-          <a
-            rel="noreferrer noopener"
-            href="https://github.com/leoMirandaa/shadcn-landing-page.git"
-            target="_blank"
-            className={`w-full md:w-1/3 ${buttonVariants({
-              variant: "outline",
-            })}`}
-          >
-            Github Repository
-            <GitHubLogoIcon className="ml-2 w-5 h-5" />
-          </a>
-        </div>
-      </div> */}
-
-      {/* Hero cards sections */}
-      {/* <div className="z-10">
-        <HeroCards />
-      </div> */}
 
         {/* Shadow effect */}
         <div className="shadow"></div>
       </section>
+
+      {/* Contact Modal */}
+      <Dialog open={isContactModalOpen} onOpenChange={setIsContactModalOpen}>
+        <DialogContent className="bg-white dark:bg-[#232c3b] rounded-2xl p-6 max-w-md w-full mx-22 shadow-2xl">
+          <DialogHeader className="flex justify-between items-center mb-6 text-left">
+            <DialogTitle className="text-xl font-bold text-[#181f2a] dark:text-white">
+              联系我们
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="text-center">
+            <div className="bg-[#f3f4f6] dark:bg-[#1e293b] p-4 rounded-xl mb-4">
+              <img
+                src="https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250617153505991.png"
+                alt="联系二维码"
+                className="max-w-48 max-h-60 mx-auto rounded-lg object-contain"
+              />
+            </div>
+            <p className="text-[#4b5563] dark:text-[#cbd5e1] mb-2">
+              扫描二维码添加微信
+            </p>
+            <p className="text-sm text-[#6b7280] dark:text-[#94a3b8]">
+              专业顾问为您提供一对一咨询服务
+            </p>
+          </div>
+
+          <DialogFooter className="mt-6 flex gap-3">
+            <DialogClose asChild>
+              <Button
+                type="button"
+                className="flex-1 px-4 py-2 border border-[#d1d5db] dark:border-[#374151] text-[#374151] dark:text-[#cbd5e1] rounded-lg hover:bg-[#f9fafb] dark:hover:bg-[#374151] transition-colors bg-white dark:bg-[#232c3b]"
+              >
+                关闭
+              </Button>
+            </DialogClose>
+            <Button
+              onClick={handleCopy}
+              className="flex-1 px-4 py-2 bg-[#2563eb] text-white rounded-lg hover:bg-[#1d4ed8] transition-colors"
+            >
+              复制微信号
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };