h

src/_includes/common/features_all.liquid

@@ -2,58 +2,56 @@
 	<div class="mx-auto max-w-7xl px-6 lg:px-8">
 
 
-	<div class="text-center mb-4">
-		<h2
-		  id="question-section"
-		  class="mt-2 text-3xl font-bold text-gray-900 sm:text-5xl"
-		>
-		  Helperbird Features
-		</h2>
-
-		<p class="mt-4 font-sans text-xl leading-relaxed text-black">
-
-			Helperbird gives you tools to make the web easier to use your way. Boost your accessibility, reading, writing, and productivity with features built to fit your needs.
-		</p>
-
-<p class="mt-4 font-sans text-xl leading-relaxed text-black">
-			Explore key features like Immersive Reader, Rewording, Summarizing, Reading Mode, dyslexia support, natural text-to-speech, text extraction, word prediction, voice typing, and more – over 30 tools to enhance your online experience.
-
-
-		</p>
-	  </div>
+		<div class="text-center mb-8 max-w-4xl mx-auto">
+			<h2
+				id="question-section"
+				class="leading-relaxed font-sans text-4xl font-bold text-black sm:text-5xl"
+			>
+				Helperbird Features
+			</h2>
+
+			<p  class="leading-relaxed font-sans mt-6 text-2xl text-black">
+				Helperbird offers over 30 tools to make the web easier to use your way. Customize the web to your needs with features like Immersive Reader, dyslexia support, text-to-speech, word prediction, voice typing, and more.
+				<br>
+				All designed to help with accessibility, reading, writing, and productivity.	
+			</p>
+
+			<div class="my-12">
+				<a
+				href="/features"
+				class="btn btn-secondary btn-lg"
+				aria-label="Learn more about Helperbird features"
+				title="Learn more about Helperbird features"
+				>
+				See All Features
+				</a>
+			</div>
+	  	</div>
 
 
 		<div class="mb-10 mt-10 grid grid-cols-1 gap-8 gap-x-8 gap-y-20 md:grid-cols-2 lg:grid-cols-3">
 			{%- for post in collections.writing -%}
 
-			<div
-				class="card card-compact  shadow-md bg-base-100 transition-all duration-200 focus-within:border focus-within:border-indigo-500 hover:-translate-y-1"
+			<a 
+				class="card card-compact  shadow-md rounded-xl bg-base-100 transition-all duration-200 hover:-translate-y-1 focus-within:border focus-within:border-indigo-500" 	
+				href="{{ post.url }}"
+				aria-label="More information on feature {{ post.data.cardTitle }}"
+				title="More information on feature {{ post.data.cardTitle }}"
 			>
 				<div class="card-body">
 					<div>
-						<div
-							class="flex items-center justify-center h-12 w-12 rounded-xl bg-{{post.data.color}}-500 text-white"
-						>
+						<div class="flex items-center justify-center p-12 rounded-xl bg-{{post.data.color}}-500 text-white">
 							{{ post.data.icon | svgContents | safe }}
 						</div>
-						<h3 class="mt-5 font-sans text-xl font-semibold leading-relaxed text-black">
-							{{ post.data.cardTitle }}
-						</h3>
-					</div>
-					<p class="mt-2 line-clamp-3 text-base text-black">{{ post.data.featureDescription }}</p>
-					<div class="mb-4 mt-4 flex items-center gap-x-4">
-						<a
-							class="btn btn-secondary btn-sm"
-							href="{{ post.url }}"
-							aria-label="More information on feature {{ post.data.cardTitle }}"
-							title="More information on feature {{ post.data.cardTitle }}"
-						>
-							Read more
-						</a>
+						<h3 class="leading-relaxed font-sans mt-5 text-xl font-semibold text-black">{{ post.data.cardTitle }}</h3>
 					</div>
+					<p class="mt-2 text-base text-black line-clamp-3">
+						{{ post.data.featureDescription }}
+					</p>
+				  	<div class="mt-4 mb-4 flex items-center gap-x-4">
+				  	</div>
 				</div>
-			</div>
-
+			</a>
 			{%- endfor -%}
 		</div>
 	</div>

src/_includes/common/features_list.html

@@ -1,5 +1,5 @@
 <div
-	class="card card-compact my-32 overflow-hidden border-2 border-stone-300 bg-base-100 py-24 sm:py-32"
+	class="card card-compact  shadow-md rounded-xl bg-base-100 transition-all duration-200 hover:-translate-y-1 focus-within:border focus-within:border-indigo-500  overflow-hidden py-24 sm:py-32 my-24"
 >
 	<div class="mx-auto max-w-7xl px-6 lg:px-8">
 		<div
@@ -61,7 +61,7 @@ <h3 class="text-lg text-xl font-bold text-black">Accessibility</h3>
 </div>
 
 <div
-	class="card card-compact my-32 overflow-hidden border-2 border-stone-300 bg-base-100 py-24 sm:py-32"
+class="card card-compact  shadow-md rounded-xl bg-base-100 transition-all duration-200 hover:-translate-y-1 focus-within:border focus-within:border-indigo-500  overflow-hidden py-24 sm:py-32 my-24"
 >
 	<div class="mx-auto max-w-7xl px-6 lg:px-8">
 		<div
@@ -117,7 +117,7 @@ <h3 class="text-lg font-bold text-black">Word Prediction and Note-Taking</h3>
 	</div>
 </div>
 
-<div class="card card-compact my-32 border-2 border-stone-300 bg-base-100 bg-white py-24 sm:py-32">
+<div class="card card-compact  shadow-md rounded-xl bg-base-100 transition-all duration-200 hover:-translate-y-1 focus-within:border focus-within:border-indigo-500  overflow-hidden py-24 sm:py-32 my-24">
 	<div class="mx-auto max-w-7xl px-6 lg:px-8">
 		<div
 			class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3"

src/_includes/common/questions.html

@@ -3,18 +3,29 @@
 	  <div class="text-center mb-4">
 		<h2
 		  id="question-section"
-		  class="mt-2 text-3xl font-bold text-gray-900 sm:text-5xl"
+		  class="leading-relaxed font-sans text-4xl font-bold text-black sm:text-5xl"
 		>
 		  Questions & Answers
 		</h2>
-		<p class="mt-4 font-sans text-2xl leading-relaxed text-black">
-		  If you have any other questions - please get in touch
+		<p  class="leading-relaxed font-sans mt-6 text-2xl text-black">
+		  If you have any other questions. Please get in touch
 		</p>
+
+		<div class="my-8">
+			<a
+			href="/features"
+			class="btn btn-secondary btn-lg"
+			aria-label="Learn more about Helperbird features"
+			title="Learn more about Helperbird features"
+			>
+			See All Questions
+			</a>
+		</div>
 	  </div>
 
-	  <div class="mt-10 space-y-8 divide-y divide-stone-500">
-		<div class="join join-vertical w-full bg-white shadow-md">
-		  {%- for question in questions.helperbird -%}
+	  <div class="mt-10 space-y-8 divide-y ">
+		<div class="join join-vertical w-full bg-white shadow-md rounded-2xl">
+		  {%- for question in questions.helperbird limit:5 -%}
 
 		  <div class="collapse collapse-arrow join-item border-base-300 border">
 			<input type="radio" name="my-accordion-4" />

src/_includes/templates/new/cta/download.html

@@ -1,20 +1,24 @@
-<div class="my-24 rounded-3xl bg-black">
-	<div class="px-6 py-24 lg:px-8">
+<div class="my-16 rounded-3xl ">
+	<div class="px-6 py-16 lg:px-8 ">
+		<div class="card-body">
 		<div class="mx-auto max-w-2xl text-center">
-			<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-				Do More with Helperbird!
+			<img 	src="/assets/images/pwa/logo/full.png"
+			alt="Helperbird logo: Stylized owl with large yellow eyes and a beige face, against a green background." alt="Helperbird" class="w-20 mx-auto" />
+			<h2 class="text-3xl font-bold tracking-tight text-black sm:text-4xl mt-4">
+				Download Helperbird!
 			</h2>
-			<p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-white">
+			<p class="mx-auto mt-6 max-w-xl text-2xl leading-8 text-black">
 				Want to make browsing easier and more accessible? Helperbird has everything you need! With tools like 
-				<a href="/features/speech-to-text/" class="text-green-500 hover:text-green-700" title="Explore text-to-speech features">Text to Speech</a>, 
-				<a href="/features/immersive-reader-for-chrome/" class="text-red-500 hover:text-red-700" title="Learn about the Immersive Reader">Immersive Reader</a>, 
-				and more, Helperbird makes your online experience smoother and more enjoyable.
+				<a href="/features/speech-to-text/" class="text-blue-500 hover:text-blue-700" title="Explore text-to-speech features">Text to Speech</a>, 
+				<a href="/features/immersive-reader-for-chrome/" class="text-blue-500 hover:text-blue-700" title="Learn about the Immersive Reader">Immersive Reader</a>, 
+				and more.
 			</p>
 			<div class="mt-10 flex items-center justify-center gap-x-4">
-				<button onclick="download_modal.showModal()" class="btn btn-secondary shadow-md" aria-label="Download Helperbird" title="Download Helperbird">
-					Download
+				<button onclick="download_modal.showModal()" class="btn btn-lg btn-secondary shadow-md" aria-label="Download Helperbird" title="Download Helperbird">
+					Download Now
 				</button>
 			</div>
+			</div>
 		</div>
 	</div>
 </div>

src/_includes/templates/new/marketing/reviews.html

@@ -1,34 +1,34 @@
 <section class="relative isolate mb-16 mt-16 pb-32 pt-24 sm:pt-32">
 	<div class="mx-auto max-w-7xl px-6 lg:px-8">
 		<div class="mx-auto max-w-2xl text-center">
-			<h2 class="text-4xl font-bold tracking-tight text-black">
-				<span class="block font-sans leading-relaxed text-black"
-					>Real Feedback from Our Real Users
-				</span>
+			<h2 class="leading-relaxed font-sans text-4xl font-bold text-black sm:text-5xl">
+
+				What People Are Saying About Helperbird?
+
 			</h2>
-			<p class="mt-6 font-sans text-2xl leading-relaxed text-black">
-				Over 700,000 people use Helperbird to make the web easier and more productive. Try it out and see why they love it!
+			<p class="leading-relaxed font-sans mt-6 text-2xl text-black">
+				Join over 700,000 people who use Helperbird to make the web easier and more productive. Try it today and see why they love it!
 			</p>
 			<div class="mt-10 flex items-center justify-center gap-x-6">
 				<a
 					href="/reviews/"
 					title="See all the reviews of Helperbird and their products."
 					aria-label="See all the reviews of Helperbird and their products."
-					class="btn btn-primary"
+					class="btn btn-secondary btn-lg"
 					href="/reviews/"
 					>Read All Reviews</a
 				>
 			</div>
 		</div>
 
 		<div
-			class="mx-auto mt-16 grid max-w-2xl grid-cols-1 grid-rows-1 gap-8 text-sm leading-6 text-gray-900 sm:mt-20 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-flow-col xl:grid-cols-4"
+			class="mx-auto mt-16 grid max-w-2xl grid-cols-1 grid-rows-1 gap-6 text-md leading-6 text-black sm:mt-20 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-flow-col xl:grid-cols-4"
 		>
 			<figure
-				class="card card-compact col-span-2 hidden  bg-white transition-all duration-200  hover:-translate-y-1 sm:block xl:col-start-2 xl:row-end-1 shadow-md"
+				class="card card-compact  shadow-md rounded-xl bg-base-100 transition-all duration-200 hover:-translate-y-1 focus-within:border focus-within:border-indigo-500 col-span-2 hidden   sm:block xl:col-start-2 xl:row-end-1 "
 			>
 				<div class="card-body">
-					<blockquote class="p-12 text-xl font-semibold leading-8 tracking-tight text-gray-900">
+					<blockquote class="p-12 text-xl   text-black">
 						<p class="text-base">
 							“After using Helperbird I can't say enough positive things about it. This extension
 							has truly transformed my online reading experience. Whether it's adjusting font sizes,
@@ -47,8 +47,8 @@ <h2 class="text-4xl font-bold tracking-tight text-black">
 							alt="Charlie Nishelle Calkins"
 						/>
 						<div class="flex-auto">
-							<div class="font-semibold">Charlie Nishelle Calkins</div>
-							<div class="text-gray-600">Helperbird Pro user</div>
+							<div class="font-bold">Charlie Nishelle Calkins</div>
+							<div class="text-black">Helperbird Pro user</div>
 						</div>
 					</figcaption>
 				</div>
@@ -58,7 +58,7 @@ <h2 class="text-4xl font-bold tracking-tight text-black">
 				<div class="space-y-8 xl:row-span-2">
 					{%- for review in reviews.reviews limit:2 -%}
 					<div
-						class="card card-compact  bg-white transition-all duration-200 hover:-translate-y-1 shadow-md"
+						class="card card-compact  shadow-md rounded-xl bg-base-100 transition-all duration-200 hover:-translate-y-1 focus-within:border focus-within:border-indigo-500"
 					>
 						<div class="card-body">
 							<blockquote class="line-clamp-3 text-gray-900">
@@ -71,8 +71,8 @@ <h2 class="text-4xl font-bold tracking-tight text-black">
 									src="{{ review.photo }}"
 								/>
 								<div>
-									<div class="font-semibold">{{ review.name }}</div>
-									<div class="text-gray-600">{{ review.title }}</div>
+									<div class="font-bold">{{ review.name }}</div>
+									<div class="text-black">{{ review.title }}</div>
 								</div>
 							</figcaption>
 						</div>
@@ -85,8 +85,7 @@ <h2 class="text-4xl font-bold tracking-tight text-black">
 				<div class="space-y-8 xl:row-span-2">
 					{%- for review in reviews.reviews limit:2 offset:8 -%}
 					<div
-						class="card card-compact  bg-white transition-all duration-200 hover:-translate-y-1 shadow-md"
-					>
+					class="card card-compact  shadow-md rounded-xl bg-base-100 transition-all duration-200 hover:-translate-y-1 focus-within:border focus-within:border-indigo-500"					>
 						<div class="card-body">
 							<blockquote class="line-clamp-3 text-gray-900">
 								<p class="text-base">{{ review.review }}”</p>
@@ -98,8 +97,8 @@ <h2 class="text-4xl font-bold tracking-tight text-black">
 									src="{{ review.photo }}"
 								/>
 								<div>
-									<div class="font-semibold">{{ review.name }}</div>
-									<div class="text-gray-600">{{ review.title }}</div>
+									<div class="font-bold">{{ review.name }}</div>
+									<div class="text-black">{{ review.title }}</div>
 								</div>
 							</figcaption>
 						</div>

src/pages/features/adjust-letters-and-words.md

@@ -15,6 +15,7 @@ keywords:
 featurePageTitle: Easily Adjust Line, Letter, and Word Spacing
 img: i1EeaekPHIo
 icon: '/src/_includes/svgs/fonts.svg'
+free: true
 youtubeId: vwT8SAJfU3E
 cardTitle: Line, Letter, and Word Spacing
 featureDescription:

src/pages/features/alt-tool-tip-highlighter.md

@@ -15,14 +15,15 @@ keywords:
 featurePageTitle: Show Image & Link Descriptions on Mouse Over
 img: i1EeaekPHIo
 icon: '/src/_includes/svgs/cursor.svg'
+free: true
 youtubeId: vwT8SAJfU3E
 cardTitle: Show Image & Link Descriptions
 featureDescription:
   Streamline your web browsing by showing image and link descriptions when you hover over them with
   Helperbird on any website or PDF. Gain quick insights into content by hovering over images and
   links.
 group: reading
-color: green
+color: blue
 tags:
   - features
   - accessibility

src/pages/features/analyze.md

@@ -16,14 +16,15 @@ keywords:
 featurePageTitle: Easily Count Letters and Characters on Any Website with Helperbird
 img: i1EeaekPHIo
 icon: '/src/_includes/svgs/graph.svg'
+free: false
 youtubeId: vwT8SAJfU3E
 cardTitle: Text Statistics
 featureDescription:
   Easily track various text metrics on any website or PDF with Helperbird's extension. With just two
   clicks, get a comprehensive analysis including unique word count, shortest words, estimated
   reading time, and more.
 group: reading
-color: orange
+color: blue
 tags:
   - features
   - writing

src/pages/features/annotation.md

@@ -17,6 +17,7 @@ keywords:
 featurePageTitle: Annotate and Highlight Websites, PDFs, and Ebooks
 img: X69hPUcBqME
 icon: '/src/_includes/svgs/notes.svg'
+free: false
 youtubeId: X69hPUcBqME
 cardTitle: Annotations & Sticky Notes
 featureDescription:

src/pages/features/auto-scroll.md

@@ -16,14 +16,15 @@ keywords:
 featurePageTitle: Auto Scroll
 img: i1EeaekPHIo
 icon: '/src/_includes/svgs/scroll.svg'
+free: false
 youtubeId: vwT8SAJfU3E
 cardTitle: Auto Scroll
 featureDescription:
   Personalize your browsing experience with Helperbird's Customizable Auto Scroll feature.
   Effortlessly set your scroll speed to slow, medium, or fast and navigate through websites at your
   own pace. Available across Chrome, Firefox, Edge, and Safari.
 group: reading
-color: blue
+color: orange
 tags:
   - features
   - accessibility

src/pages/features/bookmarks.md

@@ -16,14 +16,15 @@ keywords:
 featurePageTitle: Bookmark and Save Your Favorite Websites
 img: i1EeaekPHIo
 icon: '/src/_includes/svgs/time.svg'
+free: false
 youtubeId: vwT8SAJfU3E
 cardTitle: Read it Later
 featureDescription:
   Never lose track of important articles with Helperbird's Read it Later feature. Bookmark and save
   your favorite websites effortlessly, ensuring you can return to must-read content whenever you
   like.
 group: reading
-color: blue
+color: orange
 tags:
   - features
   - reading

src/pages/features/color-blindness.md

@@ -13,6 +13,7 @@ keywords:
   Helperbird for Edge, Helperbird for Firefox, Helperbird for Chrome, Opendyslexic for Chrome,
   OpenDyslexic
 icon: '/src/_includes/svgs/blindness.svg'
+free: true
 youtubeId: vwT8SAJfU3E
 img: i1EeaekPHIo
 cardTitle: Color Blindness Support

src/pages/features/cursor-control.md

@@ -16,6 +16,7 @@ keywords:
 featurePageTitle: Customize Your Cursor Size
 img: i1EeaekPHIo
 icon: '/src/_includes/svgs/cursor.svg'
+free: true
 youtubeId: vwT8SAJfU3E
 cardTitle: Customize Your Cursor Size
 featureDescription: