feat: add testimonials

tonyaellie · tonyaellie · commit 7bd4abbfdbfe · 2023-05-21T15:47:47.000Z
diff --git a/src/components/Layout.astro b/src/components/Layout.astro
@@ -1,5 +1,10 @@
 ---
 import { Image } from '@astrojs/image/components';
+
+interface Props {
+  title: string;
+}
+
 const { title } = Astro.props;
 ---
 
@@ -10,7 +15,11 @@ const { title } = Astro.props;
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content="Rustular 0.0.0" />
     <title>{title} - Rustular</title>
-    <script defer data-domain="rustular.pages.dev" src="https://ingest.tokia.dev/js/plausible.js"></script>
+    <script
+      defer
+      data-domain="rustular.pages.dev"
+      src="https://ingest.tokia.dev/js/plausible.js"
+    ></script>
   </head>
   <body class="bg-slate-950 font-sans text-white">
     <header class="mb-16 flex h-16 items-center border-b border-slate-700">
diff --git a/src/components/Testimonial.astro b/src/components/Testimonial.astro
@@ -0,0 +1,25 @@
+---
+import { Image } from '@astrojs/image/components';
+
+interface Props {
+  name: string;
+  profilePic: string;
+  testimonial: string;
+}
+
+const { name, profilePic, testimonial } = Astro.props;
+---
+
+<div class="flex w-72 flex-col items-center rounded-md border p-2 border-slate-400 bg-slate-900">
+  <div class="flex">
+    <Image
+      class="rounded-full"
+      src={profilePic}
+      alt={`${name}'s profile picture'`}
+      width={48}
+      height={48}
+    />
+    <div class="my-auto ml-2 text-xl font-bold">{name}</div>
+  </div>
+  <div class="pt-2 font-light">{testimonial}</div>
+</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import { Image } from '@astrojs/image/components';
 import Layout from '../components/Layout.astro';
+import Testimonial from '../components/Testimonial.astro';
 ---
 
 <Layout title="Home">
@@ -85,9 +86,8 @@ import Layout from '../components/Layout.astro';
       Rustular open-source. We want to empower developers to create amazing web
       experiences. The Rustular community is always growing, and we'd love for
       you to join us! Visit our{' '}
-      <a class="underline" href="https://github.com/rustular">
-        GitHub</a
-      > to learn more.
+      <a class="underline" href="https://github.com/rustular"> GitHub</a> to learn
+      more.
     </div>
     <div class="text-2xl">The idea!</div>
     <div class="mx-auto max-w-xl font-thin">
@@ -102,6 +102,25 @@ import Layout from '../components/Layout.astro';
       element, you dont have to recompile your entire application -- just the
       individual WASM module.
     </div>
+    <h2 class="text-5xl">Developers love Rustular!</h2>
+    <div class="m-auto flex max-w-4xl flex-wrap justify-center gap-4">
+      <Testimonial
+        name="whatplan"
+        profilePic="https://pbs.twimg.com/profile_images/1636134883767590914/nRoVdSdw_400x400.jpg"
+        testimonial="Time to rewrite my entire application in Rustular"
+      />
+      <Testimonial
+        name="Tonya"
+        profilePic="https://cdn.discordapp.com/avatars/366321360861003787/6bdb5ec4c0a6466c1334300dfcf97ae4.png?size=256"
+        testimonial="I never thought I'd be able to build a website this fast!"
+      />
+      <Testimonial
+        name="Iyla Kiwa"
+        profilePic="https://pbs.twimg.com/profile_images/1379090523831537665/hunTGLqy_400x400.jpg"
+        testimonial="This is a monstrosity, all involved should be locked up"
+      />
+    </div>
+
     <div class="pb-8 text-5xl">Start building with Rustular today</div>
     <a
       class="rounded-full border-2 border-white bg-white px-8 py-4 text-fuchsia-600 hover:border-slate-200 hover:bg-slate-200"
