upd (#421)

twirapp · Aug 29, 2023 · 9c0935e · 9c0935e
1 parent 39d0781
commit 9c0935e
Show file tree

Hide file tree

Showing 7 changed files with 323 additions and 286 deletions.
diff --git a/frontend/landing/src/components/index/Features.astro b/frontend/landing/src/components/index/Features.astro
@@ -61,32 +61,30 @@ const features = [
 ];
 ---
 
-<div id="features">
-  <div class="container mx-auto flex flex-col items-center py-24 md:px-8 px-5 text-center">
-    <span class="font-semibold text-[#B0ADFF] text-base uppercase tracking-wider mb-3"
-      >Features</span
-    >
+<section id="features">
+  <div class="container flex flex-col items-center py-24 md:px-8 px-5 text-center">
+    <h2 class="font-semibold text-[#B0ADFF] text-base uppercase tracking-wider mb-3">Features</h2>
     <div class="flex flex-col items-center gap-[20px]">
-      <h2 class="font-bold text-white text-4xl tracking-tight leading-tight">
-        Analytics that feels like it’s from the future
-      </h2>
+      <h3 class="font-bold text-white text-4xl tracking-tight leading-tight">
+        Explore our bot's awesome features
+      </h3>
       <p class="max-w-3xl text-[#ADB0B8] text-xl leading-normal">
-        Powerful, self-serve product and growth analytics to help you convert, engage, and retain
-        more users. Trusted by over 4,000 startups.
+        Uncover a treasure trove of features that'll take your stream to the next level. Our bot got
+        the tools to transform your stream adventure!
       </p>
     </div>
     <ul class="mt-[64px] grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-[32px] gap-y-[64px]">
       {
         features.map((f) => (
           <li class="flex flex-col items-center text-center">
             <div class="bg-[#B1AEFF]/[.12] p-2.5 rounded-full flex ring-8 ring-[#B1AEFF]/5 mb-5 ">
-              <f.icon />
+              <f.icon aria-hidden />
             </div>
             <span class=" text-xl text-white font-semibold mb-2">{f.title}</span>
-            <span class=" text-base leading-normal text-[#ADB0B8] font-normal">{f.description}</span>
+            <p class=" text-base leading-normal text-[#ADB0B8] font-normal">{f.description}</p>
           </li>
         ))
       }
     </ul>
   </div>
-</div>
+</section>
diff --git a/frontend/landing/src/components/index/Footer.astro b/frontend/landing/src/components/index/Footer.astro
@@ -7,41 +7,54 @@ import Github from '../../assets/social/github.svg?component';
 import { navLinks } from '../navLinks.js';
 ---
 
-<div class="pt-12 px-20 bg-[#19181a]">
-	<div class="container">
-		<div class="flex flex-col gap-6 items-center">
-			<div class="flex gap-3 items-center">
-				<TwirInCircle class="w-10 h-10"/>
-				<span class="text-white text-2xl font-bold uppercase">Twir</span>
-			</div>
-			<div class="flex justify-center items-center">
-				{navLinks.map((item) => <a href={item.href}
-																	 class="text-[#ADB0B8] font-medium px-3 py-2 leading-6 hover:text-[#D5D8DF] transition-colors"
-				>
-					{item.label}
-				</a>)}
-			</div>
-		</div>
-		<div class="mt-12 border-t border-stone-600">
-			<div class="flex justify-between p-8 text-stone-400">
-				<div>© {new Date().getFullYear()} Twir. All rights reserved.</div>
-				<div class="flex gap-8">
-					<div class="flex gap-[14px]">
-						<a href="https://t.me/twirapp" target="_blank">
-							<Telegram class="w-6 h-6"/>
-						</a>
-						<a href="https://discord.gg/Q9NBZq3zVV" target="_blank">
-							<Discord class="w-6 h-6"/>
-						</a>
-						<a href="https://github.com/satont/twir" target="_blank">
-							<Github class="w-6 h-6"/>
-						</a>
-					</div>
-					<!-- <div>
-						terms, privacy there
-					</div> -->
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
+<footer class="pt-12 px-20 bg-[#19181a]">
+  <div class="container">
+    <div class="flex flex-col gap-6 items-center">
+      <div class="flex gap-3 items-center">
+        <TwirInCircle class="w-10 h-10" aria-hidden />
+        <span class="text-white text-2xl font-semibold uppercase tracking-wide">Twir</span>
+      </div>
+      <nav class="flex justify-center items-center" aria-label="Footer Navigation">
+        <ul class="list-none p-0 m-0 flex gap-4">
+          {
+            navLinks.map((item) => (
+              <li>
+                <a
+                  href={item.href}
+                  class="text-[#ADB0B8] font-medium px-3 py-2 leading-6 hover:text-[#D5D8DF] transition-colors">
+                  {item.label}
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </nav>
+    </div>
+    <div class="flex justify-between p-8 text-stone-400 mt-12 border-t border-stone-600">
+      <span>&copy; {new Date().getFullYear()} Twir. All rights reserved.</span>
+      <div class="flex gap-[14px]">
+        <a
+          href="https://t.me/twirapp"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Twir telegram channel with latest updates and info">
+          <Telegram class="w-6 h-6" aria-hidden />
+        </a>
+        <a
+          href="https://discord.gg/Q9NBZq3zVV"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Discord channel for asking a question and keeping up with updates">
+          <Discord class="w-6 h-6" aria-hidden />
+        </a>
+        <a
+          href="https://github.com/satont/twir"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Github repository">
+          <Github class="w-6 h-6" aria-hidden />
+        </a>
+      </div>
+    </div>
+  </div>
+</footer>