content: Screen recorder page

apps/web/components/Footer.tsx

@@ -25,7 +25,7 @@ export const Footer = () => {
         className="wrapper bg-gray-100 border-[1px] border-gray-200 p-8 lg:p-12 rounded-[20px] mb-10 relative overflow-hidden"
       >
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start justify-between z-10 relative">
-          <div className="space-y-4 lg:col-span-6">
+          <div className="space-y-4 col-span-12 lg:col-span-6">
             <Logo showBeta={true} className="w-[104px] h-auto" />
             <p className="text-gray-500 max-w-md">
               Cap is the open source alternative to Loom. Lightweight, powerful,
@@ -43,7 +43,7 @@ export const Footer = () => {
               </a>
             </div>
           </div>
-          <div className="space-y-4 lg:col-span-2">
+          <div className="space-y-4 col-span-12 sm:col-span-6 lg:col-span-2">
             <h3 className="text-lg font-semibold">Product</h3>
             <ul className="space-y-2">
               <li>
@@ -67,7 +67,7 @@ export const Footer = () => {
               </li>
             </ul>
           </div>
-          <div className="space-y-4 lg:col-span-2">
+          <div className="space-y-4 col-span-12 sm:col-span-6 lg:col-span-2">
             <h3 className="text-lg font-semibold">Help</h3>
             <ul className="space-y-2">
               <li>
@@ -88,7 +88,7 @@ export const Footer = () => {
               </li>
             </ul>
           </div>
-          <div className="space-y-4 lg:col-span-2">
+          <div className="space-y-4 col-span-12 sm:col-span-6 lg:col-span-2">
             <h3 className="text-lg font-semibold">Socials</h3>
             <ul className="space-y-2">
               <li>
@@ -111,9 +111,9 @@ export const Footer = () => {
               </li>
             </ul>
           </div>
-          <div className="space-y-4 lg:col-span-12">
+          <div className="space-y-4 sm:col-span-6 lg:col-span-5">
             <h3 className="text-lg font-semibold">Additional Links</h3>
-            <ul className="space-y-2">
+            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
               <li>
                 <a href="/screen-recorder">Screen Recorder</a>
               </li>
@@ -123,6 +123,11 @@ export const Footer = () => {
               <li>
                 <a href="/screen-recorder-mac">Screen Recorder for Mac</a>
               </li>
+              <li>
+                <a href="/screen-recording-software">
+                  Screen Recording Software
+                </a>
+              </li>
             </ul>
           </div>
         </div>

apps/web/components/Navbar.tsx

@@ -16,11 +16,12 @@ import Link from "next/link";
 import { useState } from "react";
 import { Menu, X } from "lucide-react";
 import { classNames } from "@cap/utils";
+import { seoPages } from "../lib/seo-pages";
 
 export const Navbar = ({ auth }: { auth: boolean }) => {
   const pathname = usePathname();
   const isHomePage = pathname === "/";
-  const isSeoPage = pathname.startsWith("/screen-recorder");
+  const isSeoPage = pathname.slice(1) in seoPages;
   const [showMobileMenu, setShowMobileMenu] = useState(false);
 
   if (

apps/web/components/pages/seo/FreeScreenRecorderPage.tsx

@@ -13,9 +13,9 @@ export const freeScreenRecorderContent = {
 
   features: [
     {
-      title: "Completely Free",
+      title: "Professional-Grade Software",
       description:
-        "Enjoy full access to Cap’s professional-grade screen recording features without any cost.",
+        "Get access to professional <a href='/screen-recording-software'>screen recording software</a> features completely free.",
     },
     {
       title: "High-Quality Video Capture",
@@ -52,7 +52,7 @@ export const freeScreenRecorderContent = {
     {
       title: "Professional Presentations",
       description:
-        "Capture high-quality presentations and demos to share with clients and colleagues.",
+        "Capture high-quality presentations and demos using our powerful <a href='/screen-recorder'>screen recording software</a> to share with clients and colleagues.",
     },
     {
       title: "Educational Content",
@@ -71,12 +71,12 @@ export const freeScreenRecorderContent = {
     {
       question: "Is Cap really free?",
       answer:
-        "Yes, Cap is completely free, with no hidden fees. You get access to professional-grade screen recording tools without a subscription.",
+        "Yes, Cap is completely free, with no hidden fees. You get access to professional-grade <a href='/screen-recorder'>screen recording</a> tools without a subscription.",
     },
     {
       question: "How long can I record for on the free plan?",
       answer:
-        "Cap’s free plan allows for unlimited recording time, so you can capture your screen without interruptions.",
+        "Cap's free plan allows for unlimited recording time, so you can capture your screen without interruptions. Whether you're on <a href='/screen-recorder-mac'>Mac</a> or Windows, there are no time limits.",
     },
     {
       question: "Can I store my recordings in the cloud?",

apps/web/components/pages/seo/ScreenRecordMacPage.tsx

@@ -15,7 +15,7 @@ export const screenRecordMacContent = {
     {
       title: "Optimized for macOS",
       description:
-        "Cap is fully optimized for Mac, delivering smooth performance and seamless integration with macOS.",
+        "Cap is fully optimized for Mac, delivering smooth performance and seamless integration with macOS. Looking for a <a href='/free-screen-recorder'>free screen recorder</a>? Cap works great on Mac!",
     },
     {
       title: "High-Quality Video Capture",
@@ -37,6 +37,11 @@ export const screenRecordMacContent = {
       description:
         "Save and share your recordings effortlessly with Cap’s built-in export options for Mac.",
     },
+    {
+      title: "Professional Tools",
+      description:
+        "Access professional <a href='/screen-recording-software'>screen recording software</a> features optimized for Mac.",
+    },
   ],
 
   useCasesTitle: "Popular Uses for Cap’s Screen Recorder on Mac",
@@ -47,7 +52,7 @@ export const screenRecordMacContent = {
     {
       title: "Creating Tutorials",
       description:
-        "Easily create detailed tutorials or training videos on your Mac.",
+        "Easily create detailed tutorials or training videos on your Mac using our professional <a href='/screen-recorder'>screen recording software</a>.",
     },
     {
       title: "Professional Presentations",
@@ -71,7 +76,7 @@ export const screenRecordMacContent = {
     {
       question: "Is Cap compatible with macOS?",
       answer:
-        "Yes, Cap is fully compatible with macOS and optimized to work seamlessly on Mac devices.",
+        "Yes, Cap is fully compatible with macOS and optimized to work seamlessly on Mac devices. If you're looking for a <a href='/free-screen-recorder'>free screen recorder</a>, Cap is perfect for Mac users.",
     },
     {
       question: "Can I record my screen with audio on Mac?",

apps/web/components/pages/seo/ScreenRecorderPage.tsx

@@ -22,10 +22,15 @@ export const screenRecorderContent = {
       description:
         "Capture crystal-clear footage with smooth frame rates and synchronized audio.",
     },
+    {
+      title: "Cross-Platform Support",
+      description:
+        "Whether you need to <a href='/screen-recorder-mac'>screen record on Mac</a> or Windows, Cap works perfectly on both platforms.",
+    },
     {
       title: "Completely Free",
       description:
-        "Enjoy professional-grade screen recording without any cost or subscription fees. The local version of Cap is 100% free with no usage limits.",
+        "Enjoy professional-grade screen recording without any cost or subscription fees. Try our <a href='/free-screen-recorder'>free screen recorder</a> today.",
     },
     {
       title: "Unlimited Cloud Storage",
@@ -37,6 +42,11 @@ export const screenRecorderContent = {
       description:
         "Boost team productivity with features designed for efficient collaboration and easy sharing.",
     },
+    {
+      title: "Professional Software",
+      description:
+        "Cap is professional-grade <a href='/screen-recording-software'>screen recording software</a> that's both powerful and easy to use.",
+    },
   ],
 
   useCasesTitle: "Popular Uses",
@@ -86,7 +96,7 @@ export const screenRecorderContent = {
     {
       question: "What platforms does Cap support?",
       answer:
-        "Cap is compatible with macOS and Windows, making it versatile for any user or team.",
+        "Cap is compatible with <a href='/screen-recorder-mac'>macOS</a> and Windows, making it versatile for any user or team. Our <a href='/free-screen-recorder'>free screen recorder</a> works great on both platforms.",
     },
     {
       question: "How does Cap improve team productivity?",

apps/web/components/pages/seo/ScreenRecordingSoftwarePage.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { SeoPageTemplate } from "../../seo/SeoPageTemplate";
+
+export const screenRecordingSoftwareContent = {
+  title: "Screen Recording Software: High-Quality, User-Friendly, and Free",
+  description:
+    "Cap is an all-in-one screen recording software offering high-quality video capture with an intuitive interface. Ideal for creating tutorials, presentations, and educational content, Cap provides everything you need at no cost.",
+
+  featuresTitle: "Why Cap is the Best Screen Recording Software",
+  featuresDescription:
+    "Discover the features that make Cap the ultimate software for high-quality screen recordings",
+
+  features: [
+    {
+      title: "Professional-Grade Quality",
+      description:
+        "Capture clear, high-definition video with perfectly synchronized audio, designed for professional results. Try our <a href='/free-screen-recorder'>free screen recorder</a> today.",
+    },
+    {
+      title: "User-Friendly Interface",
+      description:
+        "Cap's intuitive design makes it easy to start recording right away, no technical experience required.",
+    },
+    {
+      title: "Free Access to Full Features",
+      description:
+        "Enjoy professional screen recording software without any subscription fees or hidden costs.",
+    },
+    {
+      title: "Multi-Platform Support",
+      description:
+        "Cap is compatible with Windows and <a href='/screen-recorder-mac'>Mac</a>, making it versatile for any user.",
+    },
+    {
+      title: "Unlimited Recording and Cloud Storage",
+      description:
+        "Record as much as you need, with no limits on recording time and unlimited cloud storage for your projects.",
+    },
+    {
+      title: "Pro Features for Advanced Users",
+      description:
+        "Upgrade to Cap Pro, starting at $6/month, to unlock additional features like shareable links for easy content sharing and enhanced productivity.",
+    },
+  ],
+
+  useCasesTitle: "Popular Uses for Cap’s Screen Recording Software",
+  useCasesDescription:
+    "Explore how Cap’s software can support a wide range of recording needs",
+
+  useCases: [
+    {
+      title: "Creating Tutorials",
+      description:
+        "Develop high-quality tutorials with Cap's seamless <a href='/screen-recorder'>screen recording</a> tools and professional-grade output.",
+    },
+    {
+      title: "Professional Presentations",
+      description:
+        "Record polished presentations and demos to share with clients or colleagues.",
+    },
+    {
+      title: "Educational Content",
+      description:
+        "Produce training videos and educational content with ease, perfect for remote learning or team training.",
+    },
+    {
+      title: "Remote Team Collaboration",
+      description:
+        "Share recorded content with your team for feedback, training, or collaborative projects.",
+    },
+  ],
+
+  faqsTitle: "Frequently Asked Questions",
+  faqs: [
+    {
+      question: "Is Cap truly free screen recording software?",
+      answer:
+        "Yes, Cap provides a completely free version with professional-grade features. Our <a href='/free-screen-recorder'>free screen recorder</a> includes everything you need to get started.",
+    },
+    {
+      question: "Can I use Cap on multiple platforms?",
+      answer:
+        "Yes, Cap is available for Windows and <a href='/screen-recorder-mac'>Mac</a>, offering seamless performance across all major platforms.",
+    },
+    {
+      question: "Does Cap offer unlimited recording time?",
+      answer:
+        "Absolutely. Cap allows for unlimited recording time, ideal for extended projects or detailed presentations.",
+    },
+    {
+      question: "Can I share recordings with others?",
+      answer:
+        "Yes, Cap Pro, starting at $6/month, enables you to create shareable links, making it easy to share recordings with colleagues, clients, or students.",
+    },
+    {
+      question: "How does Cap compare to other screen recording software?",
+      answer:
+        "Cap is designed to be user-friendly while delivering high-quality results, making it a great choice for users seeking a professional, cost-effective solution.",
+    },
+  ],
+
+  video: {
+    url: "/videos/cap-screen-recording-software-demo.mp4",
+    thumbnail: "/videos/cap-screen-recording-software-thumbnail.png",
+    alt: "Cap screen recording software demo showing intuitive features",
+  },
+
+  cta: {
+    title: "Get Started with Cap – The Ultimate Screen Recording Software",
+    buttonText: "Download Cap Free",
+  },
+};
+
+export const ScreenRecordingSoftwarePage = () => {
+  return <SeoPageTemplate content={screenRecordingSoftwareContent} />;
+};

apps/web/components/seo/SeoPageTemplate.tsx

@@ -4,6 +4,15 @@ import { Button } from "@cap/ui";
 import { SeoPageContent } from "@/components/seo/types";
 import { useEffect } from "react";
 
+const renderHTML = (content: string) => {
+  const styledContent = content.replace(
+    /<a\s/g,
+    '<a class="font-semibold text-gray-500" '
+  );
+
+  return <span dangerouslySetInnerHTML={{ __html: styledContent }} />;
+};
+
 export const SeoPageTemplate = ({
   content,
   showVideo = true,
@@ -125,7 +134,7 @@ export const SeoPageTemplate = ({
               {content.featuresTitle}
             </h2>
             <p className="text-lg text-gray-600">
-              {content.featuresDescription}
+              {renderHTML(content.featuresDescription)}
             </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
@@ -134,7 +143,9 @@ export const SeoPageTemplate = ({
                 <h3 className="text-xl mb-3 text-gray-500 font-medium">
                   {feature.title}
                 </h3>
-                <p className="text-gray-600">{feature.description}</p>
+                <p className="text-gray-600">
+                  {renderHTML(feature.description)}
+                </p>
               </div>
             ))}
           </div>
@@ -147,7 +158,7 @@ export const SeoPageTemplate = ({
               {content.useCasesTitle}
             </h2>
             <p className="text-lg text-gray-600">
-              {content.useCasesDescription}
+              {renderHTML(content.useCasesDescription)}
             </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
@@ -156,7 +167,9 @@ export const SeoPageTemplate = ({
                 <h3 className="text-xl mb-3 text-gray-500 font-medium">
                   {useCase.title}
                 </h3>
-                <p className="text-gray-600">{useCase.description}</p>
+                <p className="text-gray-600">
+                  {renderHTML(useCase.description)}
+                </p>
               </div>
             ))}
           </div>
@@ -173,7 +186,7 @@ export const SeoPageTemplate = ({
             {content.faqs.map((faq, index) => (
               <div key={index} className="max-w-2xl mx-auto my-8">
                 <h2 className="text-xl text-gray-500 mb-2">{faq.question}</h2>
-                <p className="text-lg">{faq.answer}</p>
+                <p className="text-lg">{renderHTML(faq.answer)}</p>
               </div>
             ))}
           </div>

apps/web/lib/seo-pages.ts

@@ -2,6 +2,8 @@ import { SeoPageContent } from '@/components/seo/types';
 import { ScreenRecorderPage, screenRecorderContent } from '@/components/pages/seo/ScreenRecorderPage';
 import { FreeScreenRecorderPage, freeScreenRecorderContent } from '@/components/pages/seo/FreeScreenRecorderPage';
 import { ScreenRecordMacPage, screenRecordMacContent } from '@/components/pages/seo/ScreenRecordMacPage';
+import { ScreenRecordingSoftwarePage, screenRecordingSoftwareContent } from '@/components/pages/seo/ScreenRecordingSoftwarePage';
+
 export const seoPages: Record<string, {
   component: React.ComponentType;
   content: SeoPageContent;
@@ -18,6 +20,10 @@ export const seoPages: Record<string, {
     component: ScreenRecordMacPage,
     content: screenRecordMacContent,
   },
+  'screen-recording-software': {
+    component: ScreenRecordingSoftwarePage,
+    content: screenRecordingSoftwareContent,
+  },
 };
 
 export const getPageBySlug = (slug: string) => seoPages[slug];