Enhancement: Case study page UI Improvement

src/components/caseCard/index.js

@@ -4,33 +4,39 @@ import Translate from "@docusaurus/Translate";
 import "./styles.scss";
 
 export default function CaseCard(props) {
-    const {
-        title = "",
-        subTitle = "",
-        date = "",
-        desc = "",
-        imgUrl = "",
-        link = "",
-    } = props;
-    const history = useHistory();
+  const {
+    title = "",
+    subTitle = "",
+    date = "",
+    desc = "",
+    imgUrl = "",
+    link = "",
+  } = props;
+  const history = useHistory();
 
-    return (
-        <div
-            className="case-card"
-            style={{
-                backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),url(${imgUrl})`,
-            }}
-        >
-            <h2 className="title" onClick={() => history.push(link)}>
-                {title}
-            </h2>
-            <hr />
-            <h3 className="sub">{subTitle}</h3>
-            <p className="desc">{desc}</p>
-            <div className="date">{date}</div>
-            <a className="button" type="button" onClick={() => history.push(link)}>
-                <Translate>READ CASE STUDY</Translate>
-            </a>
+  const handleClick = (e) => {
+    e.preventDefault();
+    history.push(link);
+  };
+
+  return (
+    <div className="case-card" onClick={handleClick}>
+      {imgUrl && (
+        <div className="image-wrapper">
+          <img src={imgUrl} alt={title} className="cover-image" />
+        </div>
+      )}
+      <div className="content">
+        <h2 className="title">{title}</h2>
+        <h3 className="subtitle">{subTitle}</h3>
+        <p className="description">{desc}</p>
+        <div className="card-footer">
+          <span className="date">{date}</span>
+          <button className="read-more" onClick={handleClick}>
+            <Translate>READ CASE STUDY</Translate>
+          </button>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+}

src/components/caseCard/styles.scss

@@ -1,78 +1,98 @@
 .case-card {
-  min-height: 280px;
-  min-width: 35px;
-  border-radius: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  display: grid;
-  grid-template-areas:
-    "title desc"
-    "hr desc"
-    "sub desc"
-    "sub desc"
-    "date btn";
-  grid-template-columns: 6fr 5fr;
-  grid-template-rows: auto auto auto 1fr;
-  grid-column-gap: 40px;
-  padding: 36px;
-  background-repeat: no-repeat;
-  background-size: cover;
+  background: var(--ifm-card-background-color);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  cursor: pointer;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 400px;
+  margin: 0 auto;
 
-  .title {
-    grid-area: title;
-    color: #fff;
-    font-size: 36px;
-    margin-bottom: 18px;
-    cursor: pointer;
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
 
-  hr {
-    grid-area: hr;
-    background: #fff;
-    height: 4px !important;
-    width: 40px !important;
-    margin: 0;
+  .image-wrapper {
+    width: 100%;
+    height: 160px;
+    overflow: hidden;
+
+    .cover-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
   }
 
-  .sub {
-    grid-area: sub;
-    font-size: 30px;
-    color: #62a1ff;
-    margin-top: 20px;
+  .content {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
 
-  .date {
-    grid-area: date;
-    color: #fff;
-    display: flex;
-    align-items: flex-end;
+  .title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--ifm-heading-color);
+    margin-bottom: 0.5rem;
+    line-height: 1.3;
   }
 
-  .desc {
-    grid-area: desc;
-    font-size: 16px;
-    color: #fff;
-    letter-spacing: 0.02em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
+  .subtitle {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--ifm-color-emphasis-700);
+    margin-bottom: 1rem;
+  }
+
+  .description {
+    font-size: 0.9rem;
+    line-height: 1.5;
+    color: var(--ifm-color-emphasis-700);
+    margin-bottom: 1.5rem;
+    flex-grow: 1;
+  }
+
+  .card-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: auto;
   }
 
   .date {
-    font-size: 12px;
+    font-size: 0.875rem;
+    color: var(--ifm-color-emphasis-600);
   }
 
-  a {
-    grid-area: btn;
-    font-size: 16px;
-    padding-left: 20px;
-    padding-right: 20px;
-    background-color: #1c77c8;
+  .read-more {
+    background: var(--ifm-color-primary);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background: var(--ifm-color-primary-dark);
+    }
   }
 }
 
-html[data-theme="dark"] {
-  .case-card {
-    background-color: #242526;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+html[data-theme='dark'] .case-card {
+  background: var(--ifm-card-background-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   }
 }

src/components/tagToggle/index.js

@@ -5,45 +5,45 @@ import Translate from "@docusaurus/Translate";
 import "./index.scss";
 
 export default function TagToggle({ selected, onChange }) {
-    const [activeIndex, setActiveIndex] = React.useState(0);
-    const { i18n } = useDocusaurusContext();
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const { i18n } = useDocusaurusContext();
 
-    const tagType = useMemo(() => {
-        if (i18n.currentLocale === "en") {
-            return TAG_Type_EN;
-        }
+  const tagType = useMemo(() => {
+    if (i18n.currentLocale === "en") {
+      return TAG_Type_EN;
+    }
 
-        return TAG_TYPE_ZH;
-    }, []);
+    return TAG_TYPE_ZH;
+  }, []);
 
-    const handleOnclick = (tag, index) => {
-        setActiveIndex(index);
+  const handleOnclick = (tag, index) => {
+    setActiveIndex(index);
 
-        if (index === 0) {
-            onChange("");
-        } else {
-            onChange(tag);
-        }
-    };
+    if (index === 0) {
+      onChange("");
+    } else {
+      onChange(tag);
+    }
+  };
 
-    return (
-        <div className="tag-toggle-container">
-            <div className="tag-toggle-list">
-                <div className="title">
-                    <Translate>Case Category</Translate>
-                </div>
-                <div className="tag-list">
-                    {tagType.map((tag, index) => (
-                        <div
-                            className={`tag-toggle ${activeIndex === index ? "active" : ""}`}
-                            key={index}
-                            onClick={() => handleOnclick(tag, index)}
-                        >
-                            {tag}
-                        </div>
-                    ))}
-                </div>
+  return (
+    <div className="tag-toggle-container">
+      <div className="tag-toggle-list">
+        <div className="title">
+          <Translate>Case Category</Translate>
+        </div>
+        <div className="tag-list">
+          {tagType.map((tag, index) => (
+            <div
+              className={`tag-toggle ${activeIndex === index ? "active" : ""}`}
+              key={index}
+              onClick={() => handleOnclick(tag, index)}
+            >
+              {tag}
             </div>
+          ))}
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+}

src/components/tagToggle/index.scss

@@ -4,15 +4,14 @@
     height: 60px;
     align-items: center;
     vertical-align: top;
-    padding: 16px 40px;
-    box-shadow: 0 1px 5px rgba(45, 47, 51, 0.1);
-    background-color: var(--ifm-navbar-background-color);
     gap: 24px;
+    border-radius: 8px;
 
     .title {
       height: 30px;
       padding: 3px 12px;
       display: flex;
+      font-weight: 900;
       align-items: center;
     }
 
@@ -35,16 +34,10 @@
         &.active {
           border: 1px solid #3578e5;
           color: #3578e5;
+          border-radius: 4px;
         }
       }
     }
   }
 }
 
-html[data-theme="dark"] {
-  .tag-toggle-container {
-    .tag-toggle-list {
-      box-shadow: 0 1px 7px rgba(0, 0, 0, 0.3);
-    }
-  }
-}