add interactive

SocialAI-tianji · Jan 31, 2024 · ea1e5d2 · ea1e5d2
1 parent b3760c6
commit ea1e5d2
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 17 deletions.
diff --git a/public/images/banner1.jpg b/public/images/banner1.jpg
diff --git a/public/images/banner2.jpg b/public/images/banner2.jpg
diff --git a/public/images/banner3.jpg b/public/images/banner3.jpg
diff --git a/public/images/prompt1.jpg b/public/images/prompt1.jpg
diff --git a/public/images/prompt2.jpg b/public/images/prompt2.jpg
diff --git a/public/images/prompt3.jpg b/public/images/prompt3.jpg
diff --git a/public/images/prompt4.jpg b/public/images/prompt4.jpg
diff --git a/src/app/practice/page.tsx b/src/app/practice/page.tsx
@@ -0,0 +1,157 @@
+"use client";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+
+export default function Practice() {
+  return (
+    <div className="bg-black text-white">
+      <div className="container mx-auto -mt-20 pt-20 md:-mt-16 md:pt-16">
+        <header className="min-h-40 flex flex-col justify-around">
+          <p className="text-2xl">What we do</p>
+          <p className="text-3xl">
+            Tianii is Social Al's most comprehensive systemintegrating advanced
+            knowledge of China society.
+          </p>
+        </header>
+        <div className="mt-8 mb-8">
+          <img src="/images/banner1.jpg" className="h-full w-full" alt="" />
+        </div>
+        <div className="border-t pb-20">
+          <div className="flex justify-between pt-4 pb-4">
+            <p className="text-3xl">Prompt</p>
+            <p className="text-lg underline underline-offset-8 underline-thickness-1">
+              View all updates
+            </p>
+          </div>
+          <div className="grid grid-cols-4 gap-4">
+            <div>
+              <img src="/images/prompt1.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt2.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt3.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt4.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t pb-20">
+          <div className="flex justify-between pt-4 pb-4">
+            <p className="text-3xl">Agent</p>
+            <p className="text-lg underline underline-offset-8 underline-thickness-1">
+              View all updates
+            </p>
+          </div>
+          <div className="grid grid-cols-4 gap-4">
+            <div>
+              <img src="/images/prompt1.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt2.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt3.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt4.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t pb-20">
+          <div className="flex justify-between pt-4 pb-4">
+            <p className="text-3xl">zhishiku</p>
+            <p className="text-lg underline underline-offset-8 underline-thickness-1">
+              View all updates
+            </p>
+          </div>
+          <div className="grid grid-cols-4 gap-4">
+            <div>
+              <img src="/images/prompt1.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt2.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt3.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt4.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t pb-20">
+          <div className="flex justify-between pt-4 pb-4">
+            <p className="text-3xl">AIgame</p>
+            <p className="text-lg underline underline-offset-8 underline-thickness-1">
+              View all updates
+            </p>
+          </div>
+          <div className="grid grid-cols-4 gap-4">
+            <div>
+              <img src="/images/prompt1.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt2.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt3.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt4.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t pb-20">
+          <div className="flex justify-between pt-4 pb-4">
+            <p className="text-3xl">Finetune</p>
+            <p className="text-lg underline underline-offset-8 underline-thickness-1">
+              View all updates
+            </p>
+          </div>
+          <div className="grid grid-cols-4 gap-4">
+            <div>
+              <img src="/images/prompt1.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt2.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt3.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+            <div>
+              <img src="/images/prompt4.jpg" className="w-full" alt="" />
+              <p className="text-base pt-2">此礼非礼，直击人心</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/layouts/partials/Header.tsx b/src/layouts/partials/Header.tsx
@@ -1,41 +1,47 @@
-"use client"
+"use client";
 
-import {useEffect} from 'react'
+import { useEffect } from "react";
 
-import Link from 'next/link'
+import Link from "next/link";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
 
 export default function Header() {
   useEffect(() => {
     // TODO: debounce?
     const handleScroll = () => {
       const scrollY = window.scrollY;
-      const header = document.getElementById('header');
-      if (scrollY > 64) { // header height
-        header?.classList.remove('bg-transparent');
-        header?.classList.add('bg-black');
+      const header = document.getElementById("header");
+      if (scrollY > 64) {
+        // header height
+        header?.classList.remove("bg-transparent");
+        header?.classList.add("bg-black");
       } else {
-        header?.classList.remove('bg-black');
-        header?.classList.add('bg-transparent');
+        header?.classList.remove("bg-black");
+        header?.classList.add("bg-transparent");
       }
     };
 
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll);
 
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener("scroll", handleScroll);
     };
   }, []);
   return (
-    <header id="header" className="top-0 left-0 z-50 w-full py-5 text-white bg-transparent sticky transition-all duration-300">
+    <header
+      id="header"
+      className="top-0 left-0 z-50 w-full py-5 text-white bg-transparent sticky transition-all duration-300"
+    >
       <div className="container mx-auto flex">
         <nav className="flex gap-4 w-full">
-          <h1 className=""><Link href="/">Social AI</Link></h1>
+          <h1 className="">
+            <Link href="/">Social AI</Link>
+          </h1>
           <DropdownMenu>
             <DropdownMenuTrigger>Research</DropdownMenuTrigger>
             <DropdownMenuContent className="bg-black text-white">
@@ -50,10 +56,21 @@ export default function Header() {
               <DropdownMenuItem>Data Privacy</DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-          <div className='grow'></div>
-          <h1><Link href={"/about"}>About</Link></h1>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Link href={"/practice"}>Practice</Link>
+            </DropdownMenuTrigger>
+            {/* <DropdownMenuContent className="bg-black text-white">
+              <DropdownMenuItem>API</DropdownMenuItem>
+              <DropdownMenuItem>Data Privacy</DropdownMenuItem>
+            </DropdownMenuContent> */}
+          </DropdownMenu>
+          {/* <div className="grow"></div>
+          <h1>
+            <Link href={"/about"}>About</Link>
+          </h1> */}
         </nav>
       </div>
     </header>
-  )
+  );
 }