From 6de1ff52de5c2b523bd29e5b4c8dd38a8cb76276 Mon Sep 17 00:00:00 2001
From: Yue Yang <g1enyy0ung@gmail.com>
Date: Mon, 25 Sep 2023 17:14:46 +0800
Subject: [PATCH] style: optimize

Signed-off-by: Yue Yang <g1enyy0ung@gmail.com>
---
 src/pages/index.js         | 52 ++++++++++++++++++++------------------
 src/pages/index.module.css |  4 +--
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 02ee6189..1c1d61f9 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -204,31 +204,33 @@ function Home() {
           <div className="tw-container tw-mx-auto max-lg:tw-px-4">
             <div className="tw-flex tw-flex-col lg:tw-flex-row lg:tw-items-center tw-gap-8">
               <div className="tw-flex-1">
-                {/* TODO: add translation. */}
-                <h2 className="tw-text-4xl xl:tw-text-5xl">
-                  Orchestrate complex fault scenarios with <span className={styles.heroTitle}>Workflows</span>.
-                </h2>
-                <p className="lg:tw-text-lg tw-font-medium">
-                  Real-world failures are often not isolated causes.Chaos Mesh has built-in workflows that allow you to
-                  experiment serially or in parallel at will to build walkthroughs that fit the architecture.
-                </p>
-                <div className="tw-flex tw-gap-4 tw-mb-6">
-                  <Card>
-                    <h4 className="text-lg">Suspend</h4>
-                    <p>You can also use the suspend node to simulate a temporary recovery.</p>
-                  </Card>
-                  <Card>
-                    <h4 className="text-lg">Status Check</h4>
-                    <p>You can also use customized status checks to inform the cluster status.</p>
-                  </Card>
+                <div className="xl:tw-w-[90%]">
+                  {/* TODO: add translation. */}
+                  <h2 className="tw-text-4xl xl:tw-text-5xl">
+                    Orchestrate complex fault scenarios with <span className={styles.heroTitle}>Workflows</span>.
+                  </h2>
+                  <p className="lg:tw-text-lg tw-font-medium">
+                    Real-world failures are often not isolated causes.Chaos Mesh has built-in workflows that allow you
+                    to experiment serially or in parallel at will to build walkthroughs that fit the architecture.
+                  </p>
+                  <div className="tw-flex tw-gap-4 tw-mb-6">
+                    <Card>
+                      <h4 className="text-lg">Suspend</h4>
+                      <p>You can also use the suspend node to simulate a temporary recovery.</p>
+                    </Card>
+                    <Card>
+                      <h4 className="text-lg">Status Check</h4>
+                      <p>You can also use customized status checks to inform the cluster status.</p>
+                    </Card>
+                  </div>
+                  <Link
+                    to="/docs/create-chaos-mesh-workflow/"
+                    className="tw-btn tw-btn-primary tw-gap-2 hover:tw-text-white hover:-tw-translate-y-1"
+                  >
+                    <IconPlay className="tw-w-4 tw-h-4 tw-fill-white" />
+                    Start Creating
+                  </Link>
                 </div>
-                <Link
-                  to="/docs/create-chaos-mesh-workflow/"
-                  className="tw-btn tw-btn-primary tw-gap-2 hover:tw-text-white hover:-tw-translate-y-1"
-                >
-                  <IconPlay className="tw-w-4 tw-h-4 tw-fill-white" />
-                  Start Creating
-                </Link>
               </div>
               <div className={clsx('tw-flex-[1.5] tw-rounded-2xl', styles.workflowsImg)} />
             </div>
@@ -239,7 +241,7 @@ function Home() {
           <div className="tw-container tw-mx-auto max-lg:tw-px-4">
             <div className="tw-flex tw-flex-col lg:tw-flex-row lg:tw-items-center tw-gap-8">
               <div className={clsx('tw-relative tw-flex-1 tw-flex tw-items-center xl:tw-h-[640px]')}>
-                <img className="tw-absolute tw-w-[90%]" src="/img/home/chaosd-bg.svg" />
+                <img className="tw-absolute md:max-lg:tw-w-[45%] tw-w-[90%]" src="/img/home/chaosd-bg.svg" />
                 <div className="tw-flex tw-justify-center tw-items-center xl:tw-w-[75%] lg:tw-h-[100%]">
                   <ChaosdFeatures />
                 </div>
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 0c5441a2..0845304c 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -38,13 +38,13 @@
   mask-image: linear-gradient(to top, transparent 1%, #fff 60%, #000 100%);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .workflowsImg {
     height: 768px;
     background: url(/img/home/workflows-min.png) top left / cover no-repeat;
     border: 1px solid hsl(var(--bc) / 0.15);
     box-shadow: 75px 75px 75px -25px rgba(0, 0, 0, 0.3);
-    transform: perspective(750px) translate3d(0px, 30px, -250px) rotateX(5deg) rotateY(-5deg);
+    transform: perspective(750px) translate3d(0px, 0px, -250px) rotateX(5deg) rotateY(-5deg);
     transition: 0.3s ease-in-out transform;
 
     &:hover {