Minimal templates banner (#206)

* feat minimal template banner

inc templates preview refactor

* Swap image

more padding, subtler border

* Add more space to section

Reduce wording here and there

* Link to non redirected page from homepage

* improve visual on mobile

CTA was getting lost next to white image

* fix typo

src/app/(with-navbar)/page.tsx

@@ -1,9 +1,8 @@
-import Image from "next/image";
 import { Greeting } from "@components/Greeting";
 import { ComponentsPreview } from "@components/ComponentsPreview";
 import { FeaturePreview } from "@components/FeaturePreview";
 import { NewsletterForm } from "@components/NewsletterForm";
-import templatesPreview from "public/static/images/templates-preview.png";
+import { TemplatesPreview } from "@components/TemplatesPreview";
 import { ConfettiWrapper } from "@components/ConfettiWrapper";
 
 const Home = () => (
@@ -22,23 +21,8 @@ const Home = () => (
         <ComponentsPreview componentsShown={8} componentsShownOnMobile={3} />
       </FeaturePreview>
 
-      <FeaturePreview
-        title="Explore the templates and choose yours"
-        previewType="templates"
-      >
-        <div className="relative -mx-4 overflow-hidden">
-          <Image
-            src={templatesPreview}
-            alt="Screenshot of various templates"
-            quality={100}
-            className="relative left-1/2 w-full min-w-[540px] -translate-x-1/2 px-4"
-          />
-          <div className="absolute inset-0 flex items-center justify-center bg-[linear-gradient(180deg,rgba(0,0,0,0.3)_0%,rgba(0,0,0,0.65)_50.1%,#000000_100%)]">
-            <div className="bg-pink-to-purple-gradient bg-clip-text text-3xl font-bold uppercase text-transparent drop-shadow-lg sm:text-6xl">
-              Coming soon
-            </div>
-          </div>
-        </div>
+      <FeaturePreview title="Choose your templates" previewType="templates">
+        <TemplatesPreview />
       </FeaturePreview>
     </main>
   </ConfettiWrapper>

src/docs/components/TemplatesPreview/ComingSoon.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+import templatesPreview from "public/static/images/templates-preview.png";
+
+export const TemplatesComingSoon = () => {
+  return (
+    <div className="relative -mx-4 overflow-hidden">
+      <Image
+        src={templatesPreview}
+        alt="Screenshot of various templates"
+        quality={100}
+        className="relative left-1/2 w-full min-w-[540px] -translate-x-1/2 px-4"
+      />
+      <div className="absolute inset-0 flex items-center justify-center bg-[linear-gradient(180deg,rgba(0,0,0,0.3)_0%,rgba(0,0,0,0.65)_50.1%,#000000_100%)] p-8">
+        <div className="bg-pink-to-purple-gradient bg-clip-text text-3xl font-bold uppercase text-transparent drop-shadow-lg sm:text-6xl">
+          More coming soon
+        </div>
+      </div>
+    </div>
+  );
+};

src/docs/components/TemplatesPreview/MinimalAvailable.tsx

@@ -0,0 +1,56 @@
+import Image from "next/image";
+import { CTA } from "@components/CTA";
+import minimalHeroImage from "public/static/images/minimal-hero.png";
+
+const GradientBadge = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="inline-flex rounded-full bg-pink-to-purple-gradient p-px">
+      <div className="inline-flex h-full w-full rounded-full bg-pink-background px-2 py-1 text-pink-text md:px-4 md:py-2">
+        <span className="bg-pink-to-purple-gradient bg-clip-text text-sm font-medium text-transparent md:text-sm">
+          {children}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export const TemplatesMinimalAvailable = () => {
+  return (
+    <div className="flex flex-col items-center gap-12 md:flex-row lg:gap-24">
+      <div className="relative overflow-hidden md:flex-1">
+        <Image
+          src={minimalHeroImage}
+          alt="Homepage hero image"
+          quality={100}
+          className="w-full"
+          priority={true}
+        />
+        <div className="absolute bottom-0 h-1/3 w-full bg-[linear-gradient(to_bottom,transparent,#000000_100%)]" />
+      </div>
+      <div className="flex flex-col gap-3 md:flex-1 md:gap-4">
+        <div className="flex gap-2 md:gap-4">
+          <GradientBadge>New</GradientBadge>
+          <GradientBadge>Free template</GradientBadge>
+        </div>
+
+        <h2 className="text-2xl font-semibold md:text-4xl">
+          Minimal style templates available
+        </h2>
+        <p className="mt-1 text-lg text-neutral-500 md:mt-2 md:text-lg">
+          Craft emails effortlessly using a beautifully curated collection of
+          free templates
+        </p>
+        <div className="mt-2 md:mt-4 md:inline-flex">
+          {/* ! Href to /docs/templates which has redirect rule leads to /docs/templates/minimal 404 error, cause unknown */}
+          <CTA
+            href="/docs/templates/minimal"
+            color="white"
+            className="w-full md:w-auto"
+          >
+            Explore Minimal templates
+          </CTA>
+        </div>
+      </div>
+    </div>
+  );
+};

src/docs/components/TemplatesPreview/TemplatesPreview.tsx

@@ -0,0 +1,9 @@
+import { TemplatesMinimalAvailable } from "./MinimalAvailable";
+import { TemplatesComingSoon } from "./ComingSoon";
+
+export const TemplatesPreview = () => (
+  <div className="flex flex-col gap-8 md:gap-16">
+    <TemplatesMinimalAvailable />
+    <TemplatesComingSoon />
+  </div>
+);

src/docs/components/TemplatesPreview/index.ts

@@ -0,0 +1 @@
+export { TemplatesPreview } from "./TemplatesPreview";