Refactor: Remove Tailwind Styling from Hero Components

src/templates/blocks/s-blocks/hero/hero1/index.tsx

@@ -9,18 +9,18 @@ export default function Hero1() {
       <div className="container">
         <div className="grid items-center gap-12 lg:grid-cols-2">
           {/* Left Section */}
-          <div className="flex flex-col items-center text-center lg:items-start lg:text-left">
+          <div className="flex flex-col items-center lg:items-start">
             <Badge
               variant="outline"
-              className="group flex items-center gap-2 border-primary/20 bg-primary/10 px-4 py-2 text-sm font-medium text-primary hover:bg-primary/20"
+              className="group flex items-center gap-2 border-primary/20 bg-primary/10 px-4 py-2 hover:bg-primary/20"
             >
               Explore Now
               <Rocket className="size-4 transition-transform group-hover:translate-x-1" />
             </Badge>
-            <h1 className="my-6 text-pretty text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
+            <h1 className="my-6 tracking-tight">
               Unleash Your Creativity with Us
             </h1>
-            <p className="mb-8 max-w-xl text-lg text-muted-foreground">
+            <p className="mb-8 max-w-xl">
               Embark on a journey of innovation and design. Discover the tools
               and resources that will empower you to create compelling digital
               experiences.

src/templates/blocks/s-blocks/hero/hero10/index.tsx

@@ -101,31 +101,27 @@ export default function Hero10() {
           </svg>
 
           <div className="z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center">
-            <Badge variant="outline" className="text-foreground">
+            <Badge variant="outline">
               AI-Powered Insights
               <ArrowDownRight className="ml-2 size-4" />
             </Badge>
             <div>
-              <h1 className="mb-6 text-pretty text-4xl font-bold lg:text-7xl">
-                Unlock the Future with{" "}
-                <span className="text-primary">Intelligent AI Solutions</span>
+              <h1 className="mb-6">
+                Unlock the Future with <span>Intelligent AI Solutions</span>
               </h1>
-              <p className="text-muted-foreground lg:text-xl">
+              <p>
                 Transforming data into actionable insights. Streamline your
                 workflow and enhance productivity with cutting-edge AI tools.
               </p>
             </div>
-            <div className="mt-4 flex items-center justify-center gap-2 rounded-lg border-2 border-primary bg-accent p-6 text-sm text-muted-foreground">
+            <div className="mt-4 flex items-center justify-center gap-2 rounded-lg border-2 border-primary bg-accent p-6">
               <Cpu className="size-5 animate-pulse" />
               <p>
-                Press <strong className="text-primary">ALT+F4</strong> to start
-                your AI-powered journey
+                Press <strong>ALT+F4</strong> to start your AI-powered journey
               </p>
             </div>
             <div className="flex flex-col items-center gap-4">
-              <p className="text-center text-muted-foreground lg:text-left">
-                Empowering the next generation of digital innovations
-              </p>
+              <p>Empowering the next generation of digital innovations</p>
               <div className="flex flex-wrap items-center justify-center gap-8">
                 {logos.map((logo, index) => (
                   <Image

src/templates/blocks/s-blocks/hero/hero2/index.tsx

@@ -21,24 +21,21 @@ export default function Hero2() {
         </div>
 
         {/* Right Section */}
-        <div className="flex flex-col items-center text-center lg:max-w-2xl lg:items-start lg:text-left">
+        <div className="flex flex-col items-center lg:max-w-2xl lg:items-start">
           <Badge
             variant="secondary"
-            className="group flex items-center gap-2 border-primary/20 bg-primary/10 px-4 py-2 text-sm font-medium text-primary hover:bg-primary/20"
+            className="group flex items-center gap-2 border-primary/20 bg-primary/10 px-4 py-2 hover:bg-primary/20"
           >
             Fresh Ideas
             <Sparkles className="size-4 transition-transform group-hover:translate-x-1" />
           </Badge>
-          <h1 className="my-6 text-pretty text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
+          <h1 className="my-6 tracking-tight">
             Crafting Exceptional User Interfaces
           </h1>
-          <p className="mb-8 max-w-xl text-lg text-muted-foreground md:text-xl">
+          <p className="mb-8 max-w-xl">
             Dive into a world where design meets functionality. Our platform
             offers a unique blend of creative tools and powerful frameworks,
-            enabling you to{" "}
-            <span className="font-semibold text-primary">
-              build seamless digital experiences.
-            </span>
+            enabling you to <span>build seamless digital experiences.</span>
           </p>
           <div className="flex w-full flex-col gap-4 sm:flex-row sm:gap-6">
             <Button size="lg" className="w-full sm:w-auto">

src/templates/blocks/s-blocks/hero/hero3/index.tsx

@@ -7,12 +7,11 @@ export default function Hero3() {
     <section className="py-24 md:py-32">
       <div className="container grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
         {/* Left Section */}
-        <div className="flex flex-col items-center text-center lg:max-w-2xl lg:items-start lg:text-left">
-          <h1 className="my-6 text-pretty text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
-            Craft Your Vision with{" "}
-            <span className="text-primary">Versatile Blocks</span>
+        <div className="flex flex-col items-center lg:max-w-2xl lg:items-start">
+          <h1 className="my-6 tracking-tight">
+            Craft Your Vision with <span>Versatile Blocks</span>
           </h1>
-          <p className="mb-8 max-w-xl text-lg text-muted-foreground md:text-xl">
+          <p className="mb-8 max-w-xl">
             Unleash your creativity with our library of pre-designed,
             customizable blocks. Stop wrestling with code and start bringing
             your ideas to life.
@@ -23,15 +22,10 @@ export default function Hero3() {
             <div className="flex flex-col gap-2">
               <div className="flex items-center gap-1">
                 {Array.from({ length: 5 }).map((_, i) => (
-                  <Star
-                    key={i}
-                    className="size-6 fill-yellow-400 text-yellow-400"
-                  />
+                  <Star key={i} className="size-6" />
                 ))}
               </div>
-              <p className="text-left text-sm font-medium text-muted-foreground">
-                by 600+ creators
-              </p>
+              <p className="text-left">by 600+ creators</p>
             </div>
           </div>
 

src/templates/blocks/s-blocks/hero/hero4/index.tsx

@@ -15,12 +15,11 @@ export default function Hero4() {
             className="max-h-[600px] w-full rounded-md object-cover lg:max-h-[800px]"
           />
         </div>
-        <div className="flex flex-col items-center text-center lg:max-w-3xl lg:items-start lg:text-left">
-          <h1 className="my-6 text-pretty text-4xl font-bold lg:text-6xl xl:text-7xl">
-            <span className="text-primary">Themeable Tailwinds Blocks</span>{" "}
-            with ShadcnUI Design System
+        <div className="flex flex-col items-center lg:max-w-3xl lg:items-start">
+          <h1 className="my-6">
+            <span>Themeable Tailwinds Blocks</span> with ShadcnUI Design System
           </h1>
-          <p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
+          <p className="mb-8 max-w-xl">
             With these themeable blocks, you can make your site look amazing
             without breaking a sweat. Go ahead, copy-paste your way to glory—no
             one has to know it wasn&apos;t all your idea.

src/templates/blocks/s-blocks/hero/hero5/index.tsx

@@ -8,14 +8,11 @@ export default function Hero5() {
     <section className="container overflow-hidden py-32">
       <div className="">
         <div className="flex flex-col items-center justify-between gap-20 lg:flex-row">
-          <div className="flex flex-col items-center gap-6 text-center lg:items-start lg:text-left">
-            <h1 className="text-pretty text-4xl font-bold lg:max-w-md lg:text-7xl">
-              Bold Features demand{" "}
-              <span className="text-primary">attention.</span>
+          <div className="flex flex-col items-center gap-6 lg:items-start">
+            <h1 className="lg:max-w-md">
+              Bold Features demand <span>attention.</span>
             </h1>
-            <p className="max-w-xl text-xl font-medium text-muted-foreground lg:text-2xl">
-              Shouting is sure to get you noticed.
-            </p>
+            <p className="max-w-xl">Shouting is sure to get you noticed.</p>
             <div className="flex w-full flex-col justify-center gap-4 sm:flex-row lg:justify-start">
               <Button asChild size="lg" className="w-full sm:w-auto">
                 <Link href="/download">

src/templates/blocks/s-blocks/hero/hero6/index.tsx

@@ -17,11 +17,10 @@ export default function Hero6() {
                 height={100}
                 className="mx-auto mb-6 aspect-square object-cover dark:invert"
               />
-              <h1 className="mb-4 text-pretty text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
-                Empower Your Ideas with{" "}
-                <span className="text-primary">Themeable Components</span>
+              <h1 className="mb-4 tracking-tight">
+                Empower Your Ideas with <span>Themeable Components</span>
               </h1>
-              <p className="text-lg text-muted-foreground md:text-xl">
+              <p>
                 Transform your vision into reality with innovative, themeable
                 components designed for speed and style. Let’s redefine what’s
                 possible, together.

src/templates/blocks/s-blocks/hero/hero7/index.tsx

@@ -11,16 +11,11 @@ const Hero7 = () => {
             <FaRobot className="size-12 md:size-16" />
           </div>
 
-          <h1 className="text-2xl font-extrabold sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl">
-            AI-Powered Components for Seamless Development
-          </h1>
-          <p className="text-balance text-sm text-muted-foreground sm:text-base md:text-lg lg:text-xl">
+          <h1>AI-Powered Components for Seamless Development</h1>
+          <p>
             Explore a collection of components crafted with{" "}
-            <span className="font-semibold text-primary">
-              shadcn, Tailwind, and React
-            </span>
-            , ready to plug into your AI projects and streamline your
-            development workflow.
+            <span>shadcn, Tailwind, and React</span>, ready to plug into your AI
+            projects and streamline your development workflow.
           </p>
         </div>
         <div className="mx-auto mt-6 flex w-full flex-col items-center justify-center gap-4 sm:flex-row md:mt-10">

src/templates/blocks/s-blocks/hero/hero8/index.tsx

@@ -16,17 +16,14 @@ export default function Hero8() {
                 height={100}
                 className="mx-auto mb-6 aspect-square object-cover dark:invert"
               />
-              <h1 className="mb-10 text-balance text-5xl font-bold tracking-tight lg:text-8xl">
-                Craft your next{" "}
-                <span className="text-primary">AI innovation</span> using Blocks
+              <h1 className="mb-10 tracking-tight">
+                Craft your next <span>AI innovation</span> using Blocks
               </h1>
-              <p className="mx-auto max-w-screen-md text-muted-foreground lg:text-2xl">
+              <p className="mx-auto max-w-screen-md">
                 In the landscape of 2024, integrating AI into your startup is
                 more than a trend—it&apos;s a necessity. Leverage the power of
                 AI to{" "}
-                <span className="font-semibold text-primary">
-                  amplify your impact and skyrocket your growth!
-                </span>
+                <span>amplify your impact and skyrocket your growth!</span>
               </p>
               <div className="mt-16 flex w-full flex-col justify-center gap-4 sm:flex-row">
                 <Button size="lg" className="group">

src/templates/blocks/s-blocks/hero/hero9/index.tsx

@@ -11,13 +11,9 @@ export default function ResponsiveHero() {
       <div className="container relative">
         <div className="flex flex-col items-start gap-8 text-left lg:flex-row">
           <div className="flex-1">
-            <Badge variant="outline" className="text-foreground">
-              Innovative Coding
-            </Badge>
-            <h1 className="my-6 text-pretty text-3xl font-bold md:text-4xl lg:text-6xl">
-              Unleash Your Coding Potential
-            </h1>
-            <p className="mb-8 max-w-3xl text-muted-foreground md:text-lg lg:text-xl">
+            <Badge variant="outline">Innovative Coding</Badge>
+            <h1 className="my-6">Unleash Your Coding Potential</h1>
+            <p className="mb-8 max-w-3xl">
               Dive into a world where creativity meets technology. Transform
               your ideas into groundbreaking solutions that redefine the digital
               landscape. It&apos;s time to code the future you envision.
@@ -37,12 +33,10 @@ export default function ResponsiveHero() {
             <div className="relative">
               <div className="mx-auto h-auto w-full max-w-md rounded-lg border border-primary/20 bg-background/95 p-6 shadow-lg backdrop-blur-sm">
                 <div className="mb-2 flex items-center justify-between">
-                  <span className="text-xs font-semibold text-primary">
-                    Innovative Algorithm
-                  </span>
-                  <Code className="size-4 text-primary" />
+                  <span>Innovative Algorithm</span>
+                  <Code className="size-4" />
                 </div>
-                <pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-xs leading-normal">
+                <pre>
                   <code>
                     {`function innovateCode(concepts) {
   return concepts