Add src/app/thumbnail-psychology-guide/page.tsx

2026-05-28 05:48:06 +00:00
parent 2f3cd1de02
commit 1965c00396
1 changed files with 114 additions and 0 deletions
--- a/src/app/thumbnail-psychology-guide/page.tsx
+++ b/src/app/thumbnail-psychology-guide/page.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+
+export default function ThumbnailPsychologyGuidePage() {
+  const navItems = [
+    { name: "Home", id: "/#home" },
+    { name: "Discovery", id: "/#discovery" },
+    { name: "Creation Lab", id: "/#creation-lab" },
+    { name: "Thumbnail Guide", id: "/thumbnail-psychology-guide" },
+    { name: "Competitor Finder", id: "/competitor-gap-finder" },
+    { name: "Advanced Audit", id: "/#advanced-audit" },
+    { name: "FAQ", id: "/#faq" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="largeSmall"
+      background="aurora"
+      cardStyle="solid"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={navItems}
+            brandName="Yt Mugi"
+            button={{ text: "Reset / Change API Key", href: "#" }}
+          />
+        </div>
+
+        <div id="thumbnail-guide-hero" data-section="thumbnail-guide-hero">
+          <FeatureCardSeven
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Master Thumbnail Psychology"
+            description="Learn the science behind captivating thumbnails that drive clicks and engagement. Our guide breaks down key psychological principles and design best practices."
+            tag="Maximize CTR"
+            tagAnimation="opacity"
+            features={[
+              {
+                title: "Emotional Triggers",                description: "Understand how to evoke curiosity, excitement, or urgency with specific visual cues.",                imageSrc: "http://img.b2bpic.net/free-photo/emotion-concept-illustration_114360-1282.jpg?_wi=1",                imageAlt: "Emotional Triggers"
+              },
+              {
+                title: "Color Theory Impact",                description: "Discover the psychological effects of colors and how to use them to your advantage.",                imageSrc: "http://img.b2bpic.net/free-photo/geometric-design-poster-pastel-tone_53876-87981.jpg?_wi=1",                imageAlt: "Color Theory Impact"
+              },
+              {
+                title: "Font & Text Hierarchy",                description: "Learn to choose fonts and structure text to convey clear messages instantly.",                imageSrc: "http://img.b2bpic.net/free-photo/geometric-typography-elements-design_23-2148777176.jpg?_wi=1",                imageAlt: "Font & Text Hierarchy"
+              },
+              {
+                title: "Composition & Framing",                description: "Apply principles of visual composition to create balanced and eye-catching thumbnails.",                imageSrc: "http://img.b2bpic.net/free-photo/creative-composition-with-geometrical-shapes_23-2148682024.jpg?_wi=1",                imageAlt: "Composition & Framing"
+              },
+              {
+                title: "Audience Segmentation",                description: "Tailor your thumbnail designs to resonate with specific audience demographics.",                imageSrc: "http://img.b2bpic.net/free-photo/digital-marketing-agency-concept-illustration_114360-6395.jpg?_wi=1",                imageAlt: "Audience Segmentation"
+              },
+              {
+                title: "A/B Testing Strategies",                description: "Implement effective A/B testing to continuously improve your thumbnail performance.",                imageSrc: "http://img.b2bpic.net/free-photo/ab-testing-concept-illustration_114360-1014.jpg?_wi=1",                imageAlt: "A/B Testing Strategies"
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/3d-network-data-communications-background-with-plexus-design_1048-17880.jpg"
+            imageAlt="Abstract tech background"
+            logoText="Yt Mugi"
+            columns={[
+              {
+                title: "Product",                items: [
+                  { label: "Discovery", href: "/#discovery" },
+                  { label: "Creation Lab", href: "/#creation-lab" },
+                  { label: "Thumbnail Guide", href: "/thumbnail-psychology-guide" },
+                  { label: "Competitor Finder", href: "/competitor-gap-finder" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#about" },
+                  { label: "Contact", href: "#" }
+                ]
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Blog", href: "#blog" },
+                  { label: "Support", href: "#" },
+                  { label: "Help Center", href: "/#faq" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            copyrightText="© 2025 | Yt Mugi. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}