From 4bcc7f0b0c411103bbebf651026ae5f4e7cef3f7 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Fri, 14 Jul 2023 17:12:56 +0800
Subject: [PATCH] group-category-button-icon

---
 themes/heo/components/Hero.js | 42 ++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
index 59e7c278..892f7052 100644
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -108,30 +108,40 @@ function TagsGroupBar() {
 }
 
 /**
- * 英雄区左下角3个分类
+ * 英雄区左下角3个分类按钮
  * @returns
  */
 function GroupMenu() {
   return (
         <div className="h-[165px] select-none  xl:h-20 flex flex-col w-48 justify-between xl:space-y-0 xl:flex-row xl:w-full xl:flex-nowrap xl:space-x-3">
-            <Link href="/tag/必看精选" className="bg-blue-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
-                <div className="font-bold text-lg pl-5 relative">
+            <Link href="/tag/必看精选" className="group relative overflow-hidden bg-gradient-to-r from-blue-500 to-blue-400 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
+                <div className="font-bold text-lg pl-5 relative -mt-2">
                     必看精选
                     <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
                 </div>
+                <div className='absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
+                    <i class="fa-solid fa-star text-4xl"></i>
+                </div>
             </Link>
-            <Link href="/tag/热门文章" className="bg-orange-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
-                <div className="font-bold text-lg pl-5 relative">
+            <Link href="/tag/热门文章" className="group relative overflow-hidden bg-gradient-to-r from-red-500 to-yellow-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
+                <div className="font-bold text-lg pl-5 relative -mt-2">
                     热门文章
                     <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
                 </div>
+                <div className='absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
+                    <i class="fa-solid fa-fire-flame-curved text-4xl"></i>
+                </div>
             </Link>
             {/* 第三个标签在小屏上不显示 */}
-            <Link href="/tag/实用教程" className="bg-emerald-500 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
-                <div className="font-bold text-lg pl-5 relative">
+            <Link href="/tag/实用教程" className="group relative overflow-hidden bg-gradient-to-r from-teal-300 to-cyan-300 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
+                <div className="font-bold text-lg pl-5 relative -mt-2">
                     实用教程
                     <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
                 </div>
+                <div className='absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
+                    <i class="fa-solid fa-book-bookmark text-4xl "></i>
+                </div>
+
             </Link>
         </div>
   )
@@ -176,8 +186,8 @@ function TodayCard({ cRef }) {
   const [isCoverUp, setIsCoverUp] = useState(true)
 
   /**
-               * 外部可以调用此方法
-               */
+                   * 外部可以调用此方法
+                   */
   useImperativeHandle(cRef, () => {
     return {
       coverUp: () => {
@@ -187,18 +197,18 @@ function TodayCard({ cRef }) {
   })
 
   /**
-               * 点击更多
-               * @param {*} e
-               */
+                   * 点击更多
+                   * @param {*} e
+                   */
   function handleClickMore(e) {
     e.stopPropagation()
     setIsCoverUp(false)
   }
 
   /**
-             * 点击卡片跳转的链接
-             * @param {*} e
-             */
+                 * 点击卡片跳转的链接
+                 * @param {*} e
+                 */
   function handleCardClick(e) {
     router.push('https://tangly1024.com')
   }
@@ -210,7 +220,7 @@ function TodayCard({ cRef }) {
                     <div className='text-xs font-light'>新版上线</div>
                     <div className='text-3xl font-bold'>NotionNext4.0 轻松定制主题</div>
                 </div>
-                <div onClick={handleClickMore} className={`'${isCoverUp ? '' : 'hidden pointer-events-none '} cursor-zoom-in flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
+                <div onClick={handleClickMore} className={`'${isCoverUp ? '' : 'hidden pointer-events-none '} flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
                     <PlusSmall className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'} />
                     <div id='more' className='select-none'>更多推荐</div>
                 </div>