Minimal design refactorization

src/components/widgets/Announcement.astro

@@ -7,20 +7,21 @@ import { getPermalink } from '~/utils/permalinks';
 >
 	<span class="text-xs py-0.5 px-1 bg-primary-200 dark:bg-slate-600 font-semibold">NEW</span>
 	<a
-		href={getPermalink('get-started-website-with-astro-tailwind-css', 'post')}
+		href={getPermalink('useful-resources-to-create-websites', 'post')}
 		class="hover:underline text-gray-700 dark:text-slate-400"
-		>Get started with AstroWind to create a website using Astro and Tailwind CSS »</a
+		>Useful tools and resources to create a professional website »</a
 	>
 	<a
 		target="_blank"
+		rel="noopener"
 		class="float-right"
-		title="Follow @onWidget on Twitter"
-		href="https://twitter.com/intent/user?screen_name=onwidget"
+		title="If you like AstroWind, give us a star."
+		href="https://github.com/onwidget/astrowind"
 	>
 		<img
-			src="https://img.shields.io/twitter/url/https/twitter.com/onwidget.svg?style=social&label=Follow%20%40onWidget"
+			src="https://img.shields.io/github/stars/onwidget/astrowind.svg?style=social&label=Stars&maxAge=2592000"
 			alt="Follow @onWidget"
-			width="125"
+			width="84"
 			height="20"
 		/>
 	</a>

src/components/widgets/Features.astro

@@ -4,15 +4,15 @@ import { Icon } from 'astro-icon';
 const items = [
 	[
 		{
-			title: 'Integration with Tailwind CSS',
+			title: 'Astro + Tailwind CSS Integration',
 			description:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+				'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
 			icon: 'tabler:brand-tailwind',
 		},
 		{
 			title: 'Ready-to-use Components',
 			description:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+				'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
 			icon: 'tabler:components',
 		},
 		{
@@ -26,11 +26,11 @@ const items = [
 		{
 			title: 'Excellent Page Speed',
 			description:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+				'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
 			icon: 'tabler:rocket',
 		},
 		{
-			title: 'Frequently updated',
+			title: 'Search Engine Optimization (SEO)',
 			description:
 				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
 			icon: 'tabler:arrows-right-left',
@@ -45,12 +45,12 @@ const items = [
 ];
 ---
 
-<section class="scroll-mt-16 border-t border-gray-200 dark:border-slate-800" id="features">
+<section class="scroll-mt-16" id="features">
 	<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
-		<div class="mb-10 md:mx-auto sm:text-center md:mb-12">
+		<div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
 			<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Features</p>
 			<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
-				What you get with <span class="whitespace-nowrap underline decoration-wavy decoration-2 decoration-primary-600 underline-offset-[3px]">AstroWind</span>
+				What you get with <span class="whitespace-nowrap">AstroWind</span>
 			</h2>
 			<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
 				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa

src/components/widgets/Note.astro

@@ -2,9 +2,9 @@
 import { Icon } from 'astro-icon';
 ---
 
-<section class="bg-primary-800 text-white dark:bg-primary-900">
+<section class="bg-primary-100 dark:bg-slate-800">
 	<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
-		<span class="font-bold"> <Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span> Simplicity, good
-		practices and high performance
+		<span class="font-bold"> <Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span> Simplicity, Best
+		Practices and High Performance
 	</div>
 </section>