feat(docs): add reviews section to the home page

Author: yjose

docs/public/reviews/aman.jpg

@@ -37,7 +37,7 @@ import { Icon } from '@astrojs/starlight/components';
   }
   .container{
     position: absolute;
-    top: 140px;
+    top: 100px;
     left: 50%;
     transform: translate(-50%, 0%);
     background-color: transparent;

docs/public/reviews/brandon.png

@@ -0,0 +1,167 @@
+---
+interface Review {
+  name: string;
+  role: string;
+  content: string;
+  image: string;
+}
+
+const reviews: Review[] = [
+  {
+    name: 'Aman Mittal',
+    role: 'Docs Maintainer @Expo',
+    content: `One of the <strong>best starter apps</strong> that feel complete to get started creating your Expo and React Native app. It's rare to see a project keeping up with the latest developments in the React Native world in a fast-changing environment, <strong>production-ready</strong> at the same time, and with such clear documentation around it.<br/><strong>Hats off to the Obytes team</strong> for creating it and actively maintaining it!`,
+    image: '/aman.jpg',
+  },
+  {
+    name: 'Yuri P. Baumgartner',
+    role: 'React Native Developer',
+    content: `The <strong>best React Native starter project ever!</strong> 🔥 <br/>I'm a React Native developer with more than 5 years of experience and I've seen a lot of React Native projects, templates and boilerplates but this is the <strong>best one</strong>. Here we have all of the steps to build an app from scratch to production.<br/>The section that I really <strong>love</strong> is the Environment Variables, you make the really great way to handling this, guys!<br/>Thank u all 🩶`,
+    image: '/yuri.jpeg',
+  },
+
+  {
+    name: 'Simon',
+    role: 'Founder @Galaxies_dev',
+    content:
+      'This template combines all the latest React and React Native <strong>best practices</strong> in one powerful starter. Combined with additional GitHub actions to build your app, this is one of the most future-proof React Native templates - and it’s even <strong>free!</strong>',
+    image: 'simon.jpg',
+  },
+  {
+    name: 'Kawtar CHOUBARI',
+    role: 'React/React Native Developer',
+    content:
+      'This boilerplate has everything needed to build a robust mobile app. It <strong>saves a lot of time</strong> and I highly recommend 👌',
+    image: '/kawtar.jpg',
+  },
+  {
+    name: 'Brandon Eichhorn',
+    role: 'Developer',
+    content: '<strong>You guys are life savers!</strong>',
+    image: '/brandon.png',
+  },
+];
+---
+
+<section class="reviews not-content">
+  <h3 class="reviews-title">Trusted by React Native Developers Worldwide</h3>
+  <p class="reviews-subtitle">
+    Developers love our starter! Check out what they're saying:
+  </p>
+  <div class="review-grid">
+    {
+      reviews.map((review) => (
+        <article class="review-content">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="130"
+            height="130"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="quote-icon"
+          >
+            <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
+          </svg>
+          <div class="review-text">
+            <Fragment set:html={review.content} />
+          </div>
+          <div class="review-footer">
+            <img
+              src={`/reviews/${review.image}`}
+              alt={review.name}
+              class="review-image"
+            />
+            <p class="review-author">
+              <strong>{review.name}</strong>
+              <span class="review-role">{review.role}</span>
+            </p>
+          </div>
+        </article>
+      ))
+    }
+  </div>
+</section>
+
+<style>
+  .reviews {
+    margin: 4rem 0;
+    padding-top: 6rem;
+  }
+  .reviews-title {
+    font-size: 2rem;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 2rem;
+    margin: 0 auto;
+    color: var(--sl-color-white);
+  }
+  .reviews-subtitle {
+    font-weight: 400;
+    max-width: 650px;
+    margin: 0 auto;
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+  .review-grid {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  }
+
+  .review-footer {
+    display: flex;
+    align-items: center;
+    border-radius: 0.5rem;
+    padding-top: 2rem;
+  }
+  .review-author {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.8rem;
+    opacity: 0.8;
+  }
+  .review-role {
+    font-size: 0.8rem;
+    opacity: 0.8;
+  }
+
+  .review-image {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 1rem;
+  }
+  .review-content {
+    border-radius: 1rem;
+    border: 1px solid var(--sl-color-gray-5);
+    background-color: var(--sl-color-black);
+    padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
+    flex-direction: column;
+    display: flex;
+    height: 100%;
+    position: relative;
+  }
+
+  .review-text {
+    font-style: italic;
+    margin: 0;
+    font-size: clamp(
+      var(--sl-text-sm),
+      calc(0.5rem + 1vw),
+      var(--sl-text-body)
+    );
+    strong {
+      color: var(--sl-color-white);
+    }
+  }
+
+  .quote-icon {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 68px;
+    height: 68px;
+    opacity: 0.2;
+  }
+</style>

docs/public/reviews/kawtar.jpg

@@ -16,11 +16,13 @@ hero:
     - text: View on GitHub
       link: https://github.com/rootstrap/react-native-template
       icon: external
+      variant: secondary
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 import GithubStar from '../../components/GithubStar.astro';
 import About from '../../components/about.astro';
+import Reviews from '../../components/reviews.astro';
 
 <GithubStar />