[docs][minor] Optimize styles of the Flink CDC index page

docs/assets/_custom.scss

@@ -236,4 +236,333 @@ pre.chroma code {
 
 .markdown table tr:nth-child(2n) {
     background: white;
-} 
+} 
+
+.index-wrapper {
+    // add custom css definitions here
+    // see https://tailwindcss.com/docs
+    .bg-purple {
+        background: linear-gradient(90deg, #c67dd6 0%, #8a77d3 100%);
+    }
+
+    svg {
+        vertical-align: middle;
+    }
+
+    .link-as-button {
+        display: inline-block;
+        transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 300ms;
+        border-radius: 9999px;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+
+        &:hover {
+            transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1.05)
+            scaleY(1.05);
+        }
+    }
+
+    .header-1 {
+        font-size: 2.5rem;
+        line-height: 1;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .container {
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .top-container {
+        padding: 1.5rem;
+
+        .container {
+            padding-left: 0.75rem;
+            padding-right: 0.75rem;
+            align-items: center;
+        }
+    }
+
+    .flex {
+        display: flex;
+    }
+
+    .flex-wrap {
+        flex-wrap: wrap;
+    }
+
+    .flex-col {
+        flex-direction: column;
+    }
+
+    .flex-row {
+        flex-direction: row;
+    }
+
+    .flex-shrink {
+        flex-shrink: 1;
+    }
+    .flex-grow {
+        flex-grow: 1;
+    }
+
+    .text-center {
+        text-align: center;
+    }
+
+    .items-start {
+        align-items: flex-start;
+    }
+
+    .justify-center {
+        justify-content: center;
+    }
+
+    .justify-between {
+        justify-content: space-between;
+    }
+
+    .w-1\/2 {
+        width: 50%;
+    }
+
+    .w-3\/4 {
+        width: 75%;
+    }
+    .w-4\/5 {
+        width: 80%;
+    }
+
+    .w-full {
+        width: 100%;
+    }
+
+    .text-3xl {
+        font-size: 1.875rem;
+        line-height: 2.25rem;
+    }
+
+    .text-xl {
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+    }
+
+    .text-lg {
+        font-size: 1.125rem;
+        line-height: 1.75rem;
+    }
+
+    .text-sm {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+    }
+
+    .font-bold {
+        font-weight: 700;
+    }
+
+    .leading-normal {
+        line-height: 1.5;
+    }
+
+    .leading-tight {
+        line-height: 1.25;
+    }
+
+    .bg-white {
+        background-color: #ffffff;
+    }
+
+    .border-none {
+        border-style: none;
+    }
+
+    .mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .ml-0 {
+        margin-left: 0;
+    }
+
+    .gap-6 {
+        margin-bottom: 1.5rem;
+    }
+
+    .p-0 {
+        padding: 0;
+    }
+
+    .px-6 {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+    }
+
+    .px-8 {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+
+    .py-6 {
+        padding-top: 1.5rem;
+        padding-bottom: 1.5rem;
+    }
+
+    .py-8 {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+    }
+
+    .py-12 {
+        padding-top: 3rem;
+        padding-bottom: 3rem;
+    }
+
+    .m-8 {
+        margin: 2rem;
+    }
+
+    .my-0 {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .my-4 {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    .mt-1 {
+        margin-top: 0.25rem;
+    }
+
+    .mt-6 {
+        margin-top: 1.5rem;
+    }
+
+    .mt-8 {
+        margin-top: 2rem;
+    }
+
+    .-mt-8 {
+        margin-top: -2rem;
+    }
+
+    .absolute {
+        position: absolute;
+    }
+
+    .relative {
+        position: relative;
+    }
+
+    .bottom-0 {
+        bottom: 0;
+    }
+
+    .h-40 {
+        height: 10rem;
+    }
+
+    .basis-1\/12 {
+        flex-basis: 8.333333%;
+    }
+    .basis-10\/12 {
+        flex-basis: 83.333333%;
+    }
+
+    .opacity-50 {
+        opacity: 0.5;
+    }
+
+    h1,
+    h2 {
+        border-bottom: none !important;
+    }
+
+    .divider {
+        background: #bf74f1;
+        margin-left: auto;
+        margin-right: auto;
+        opacity: 0.25;
+        width: 75%;
+        height: 0.125rem;
+
+        &.w-1\/2 {
+            width: 50%;
+        }
+        &.opacity-50 {
+            opacity: 0.5;
+        }
+    }
+
+    .text-white {
+        color: #ffffff !important;
+    }
+
+    .text-black {
+        color: #000000 !important;
+    }
+
+    .text-primary {
+        color: #bf74f1;
+    }
+
+    @media (min-width: 768px) {
+        .md\:w-1\/2 {
+            width: 50%;
+        }
+        .md\:w-1\/3 {
+            width: 33.333333%;
+        }
+        .md\:w-3\/5 {
+            width: 60%;
+        }
+        .md\:flex-row {
+            flex-direction: row;
+        }
+        .md\:text-left {
+            text-align: left;
+        }
+        .link-as-button {
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+
+    @media (min-width: 1280px) {
+        .xl\:mt-0 {
+            margin-top: 0;
+        }
+        .xl\:ml-16 {
+            margin-left: 4rem;
+        }
+        .xl\:items-start {
+            align-items: flex-start;
+        }
+        .xl\:text-left {
+            text-align: left;
+        }
+        .xl\:flex-row {
+            flex-direction: row;
+        }
+        .xl\:justify-between {
+            justify-content: space-between;
+        }
+        .xl\:w-\[max-content\] {
+            width: max-content;
+        }
+        .xl\:min-w-\[max-content\] {
+            min-width: max-content;
+        }
+        .xl\:my-auto {
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+    }
+}