Update

lvwzhen · Apr 22, 2023 · 7c7bacc · 7c7bacc
1 parent 2b86c34
commit 7c7bacc
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 19 deletions.
diff --git a/components/SearchDialog.tsx b/components/SearchDialog.tsx
@@ -171,20 +171,23 @@ export function SearchDialog() {
 
   return (
     <>
+
       <button
         onClick={() => setOpen(true)}
-        className="text-base flex gap-2 items-center px-4 py-2 z-50 relative
+        className="text-base flex gap-2 items-center px-4 py-3 z-50 relative 
         text-slate-500 dark:text-slate-400  hover:text-slate-700 dark:hover:text-slate-300
         transition-colors
-        rounded-md
+        rounded-full
+        bg-white
         border border-slate-200 dark:border-slate-500 hover:border-slate-300 dark:hover:border-slate-500
-        min-w-[300px] "
+        w-full
+        md:min-w-[580px] "
       >
         <Search width={15} />
         <span className="border border-l h-5"></span>
-        <span className="inline-block ml-4">法律AI助手</span>
+        <span className="inline-block ml-4">请输入法律问题</span>
         <kbd
-          className="absolute right-3 top-2.5
+          className="absolute right-3 top-4
           pointer-events-none inline-flex h-5 select-none items-center gap-1
           rounded border border-slate-100 bg-slate-100 px-1.5
           font-mono text-[10px] font-medium
@@ -249,7 +252,7 @@ export function SearchDialog() {
 
               <div className="relative">
                 <Input
-                  placeholder="输入你的法律问题..."
+                  placeholder="输入法律问题..."
                   name="search"
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -35,32 +35,51 @@ export default function Home() {
         `}
       </Script>
       <main className={styles.main}>
+        <h1 className='text-slate-700 font-bold text-2xl mb-12 flex items-center gap-3'><Image src={'/logo.png'} width="32" height="32" alt="MagickPen logo" /> 法律AI助手</h1>
         <div className={styles.center}>
           <SearchDialog />
         </div>
 
-        <div className="py-8 w-full md:flex items-center justify-center md:space-x-6">
-          <div className="opacity-75 transition hover:opacity-100 cursor-pointer">
-            <Link href="https://magickpen.com/?ref=lawcnai" className="flex gap-1 items-center justify-center text-base mr-2">
-              Made by <Image src={'/logo.png'} width="20" height="20" alt="MagickPen logo" /> MagickPen
-            </Link>
-          </div>
-          <div className="border-l border-gray-300 w-1 h-4 hidden md:block" />
-          <div className="flex items-center justify-center space-x-4 mt-4 md:m-0">
+        <div className='mt-28 md:mt-40 text-center w-full'>
+          <h2 className='text-slate-500'>更多好玩</h2>
+          <ul className='grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-5 mt-6 max-w-lg mx-auto text-xs'>
+            <li>
+              <Link href="https://magickpen.com/?ref=lawcnai" className=' text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
+                <Image src={'/MagickPen.png'}  width={100} height="20" className='w-full mb-1 h-5 object-contain' alt="MagickPen - 智能写作助手" />
+                智能写作助手
+              </Link>
+            </li>
+            <li>
+              <Link href="https://www.teach-anything.com/?ref=lawcnai" className=' text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
+                <Image src={'/TeachAnything.png'} width={100} height="20" className='w-full mb-1 h-5 object-contain' alt="Teach Anything - AI 百科全书" />
+                AI 百科全书
+              </Link>
+            </li>
+            <li>
+              <Link href="https://openl.io/?ref=lawcnai" className=' text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
+                <Image src={'/OpenL.png'} width={100} height="20" className='w-full mb-1 h-5 object-contain' alt="OpenL - AI 翻译专家" />
+                AI 翻译专家
+              </Link>
+            </li>
+          </ul>
+        </div>
+
+        <div className="py-10 w-full md:flex items-center justify-center md:space-x-6">
+          <div className="flex items-center justify-center space-x-6 mt-4 md:m-0">
             <div className="opacity-75 transition hover:opacity-100 cursor-pointer">
               <Link
                 href="https://github.com/lvwzhen/law-cn-ai"
                 className="flex items-center justify-center"
               >
-                <Image src={'/github.svg'} width="20" height="20" alt="Github logo" />
+                <Image src={'/github.svg'} width="24" height="24" alt="Github logo" />
               </Link>
             </div>
             <div className="opacity-75 transition hover:opacity-100 cursor-pointer">
               <Link
                 href="https://twitter.com/lvwzhen"
                 className="flex items-center justify-center"
               >
-                <Image src={'/twitter.svg'} width="20" height="20" alt="Twitter logo" />
+                <Image src={'/twitter.svg'} width="24" height="24" alt="Twitter logo" />
               </Link>
             </div>
           </div>

diff --git a/public/MagickPen.png b/public/MagickPen.png
diff --git a/public/OpenL.png b/public/OpenL.png
diff --git a/public/TeachAnything.png b/public/TeachAnything.png
diff --git a/public/logo.png b/public/logo.png
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -1,7 +1,6 @@
 .main {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
   padding: 6rem;
   min-height: 100vh;
@@ -77,15 +76,15 @@
   justify-content: center;
   align-items: center;
   position: relative;
-  padding: 4rem 0;
+  padding: 0;
 }
 
 .center::before {
   background: var(--secondary-glow);
   border-radius: 50%;
   width: 480px;
   height: 360px;
-  margin-left: -400px;
+  margin-left: -600px;
 }
 
 .center::after {
@@ -272,3 +271,18 @@
     transform: rotate(0deg);
   }
 }
+
+
+@media (max-width: 768px) {
+  .main {
+    padding: 3rem 1rem;
+  }
+  .center{
+    padding: 0;
+    display: block;
+    width: 100%;
+  }
+  .center button{
+      width: 100%;
+    }
+}