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

docs/src/components/GithubStar.astro

@@ -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/src/components/reviews.astro

@@ -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/src/content/docs/index.mdx

@@ -3,10 +3,6 @@ title: Obytes Starter | React Native/Expo starter
 description: "Your All-in-One Solution for Building Outstanding React Native/Expo Apps. From editor setup to store submission, we've got you covered!"
 template: splash
 lastUpdated: false
-banner:
-  content: |
-    🌟 Loving our starter? Share your success story! Your feedback fuels our passion.
-    <a href="https://starter.obytes.com/reviews">Drop a review</a> and inspire others! 🚀
 hero:
   title: Perfect React Native App Kickstart 🚀!
   tagline: "Your All-in-One Solution for Building Outstanding React Native/Expo Apps. From editor setup to store submission, we've got you covered!"
@@ -17,14 +13,16 @@ hero:
       link: /overview
       icon: right-arrow
       variant: primary
-    - text: View on GitHub
-      link: https://github.com/obytes/react-native-template-obytes
+    - text: Work With Us
+      link: https://obytes.com/contact?utm_source=starter.obytes.com
       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 />
 
@@ -77,10 +75,12 @@ import About from '../../components/about.astro';
 	</Card>
 </CardGrid>
 
+<Reviews />
+
 <About title="Built with ❤️ by">
 
 In addition to maintaining this starter kit, we provide expertise in custom projects and app development. If you're looking for experienced and reliable developers to bring your app vision to life, reach out to us. Let's discuss your project and explore how we can help you achieve your goals.
 
-[Contact us](https://obytes.com/contact)
+[Work with us](https://obytes.com/contact?utm_source=starter.obytes.com)
 
 </About>