feat: add responsive testimonial grid and tweet card styles

Author: moonrailgun

website/src/pages/index.css

@@ -0,0 +1,62 @@
+.testimonial-grid {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+.tweet-card {
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.tweet-card:hover {
+  transform: scale(1.03);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+}
+
+/* Small screen devices - Single column */
+.testimonial-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}
+
+/* Medium screen devices - Two columns */
+@media (min-width: 768px) {
+  .testimonial-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Large screen devices - Three columns (maximum) */
+@media (min-width: 1024px) {
+  .testimonial-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  /* Staggered effect in three-column layout */
+  .testimonial-grid > div:nth-child(3n+1) {
+    grid-row: span 1;
+  }
+
+  .testimonial-grid > div:nth-child(3n+2) {
+    grid-row: span 2;
+  }
+
+  .testimonial-grid > div:nth-child(3n+3) {
+    grid-row: span 1;
+  }
+}
+
+/* Extra large screen devices - Keep three columns but increase max width */
+@media (min-width: 1280px) {
+  .testimonial-grid {
+    max-width: 1400px;
+  }
+}

website/src/pages/index.tsx

@@ -15,6 +15,7 @@ import { InteractiveHoverButton } from '@/components/ui/interactive-hover-button
 import { ClientTweetCard } from '../components/ui/client-tweet-card';
 
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
+import './index.css';
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -215,47 +216,17 @@ function HomepageFooter() {
         And connect with Tianji's real user from all over the world
       </div>
 
-      <div className="mt-8 flex flex-wrap justify-center gap-2">
-        <ClientTweetCard
-          id="1876982441312751667"
-          className="border border-solid border-white border-opacity-20 bg-white bg-opacity-10"
-        />
-        <ClientTweetCard
-          id="1877547135442329726"
-          className="border border-solid border-white border-opacity-20 bg-white bg-opacity-10"
-        />
-        <ClientTweetCard
-          id="1788136586380771781"
-          className="border border-solid border-white border-opacity-20 bg-white bg-opacity-10"
-        />
-        <ClientTweetCard
-          id="1877744903255462173"
-          className="border border-solid border-white border-opacity-20 bg-white bg-opacity-10"
-        />
-        <ClientTweetCard
-          id="1876346601326649665"
-          className="border border-solid border-white border-opacity-20 bg-white bg-opacity-10"
-        />
-        <ClientTweetCard
-          id="1844763816619294808"
-          className="border border-solid border-white border-opacity-20 bg-white bg-opacity-10"
-        />
-        <ClientTweetCard
-          id="1842367065375617205"
-          className="border border-solid border-white border-opacity-20 bg-white bg-opacity-10"
-        />
-        <ClientTweetCard
-          id="1843381313933656116"
-          className="border border-solid border-white border-opacity-20 bg-white bg-opacity-10"
-        />
-        <ClientTweetCard
-          id="1743323947377041806"
-          className="border border-solid border-white border-opacity-20 bg-white bg-opacity-10"
-        />
-        <ClientTweetCard
-          id="1852357169175318932"
-          className="border border-solid border-white border-opacity-20 bg-white bg-opacity-10"
-        />
+      <div className="testimonial-grid mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        <ClientTweetCard id="1876982441312751667" className="tweet-card" />
+        <ClientTweetCard id="1788136586380771781" className="tweet-card" />
+        <ClientTweetCard id="1877547135442329726" className="tweet-card" />
+        <ClientTweetCard id="1876346601326649665" className="tweet-card" />
+        <ClientTweetCard id="1877744903255462173" className="tweet-card" />
+        <ClientTweetCard id="1844763816619294808" className="tweet-card" />
+        <ClientTweetCard id="1842367065375617205" className="tweet-card" />
+        <ClientTweetCard id="1843381313933656116" className="tweet-card" />
+        <ClientTweetCard id="1743323947377041806" className="tweet-card" />
+        <ClientTweetCard id="1852357169175318932" className="tweet-card" />
       </div>
     </div>
   );