Merge pull request #138 from gruz0/feature/add-about-page

Add About Page

src/app/about/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'About CheckMVP – Build Products People Love with Confidence',
+  description:
+    'Discover the story behind CheckMVP, the AI tool helping developers, indie hackers, and founders to validate ideas and build products people will love.',
+}
+
+export default function AboutLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <>{children}</>
+}

src/app/about/page.tsx

@@ -0,0 +1,106 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+import Photo from './photo.jpeg'
+
+export default async function AboutPage() {
+  return (
+    <div className="p-4 md:p-6 lg:p-8">
+      <h1 className="mb-6 mt-2 text-center text-3xl font-bold text-blue-600 md:mb-8 md:mt-4 md:text-4xl">
+        About CheckMVP
+      </h1>
+
+      <div className="text-justify text-lg leading-relaxed">
+        <Image
+          src={Photo.src}
+          width={600}
+          height={488}
+          alt="Idea Report 01"
+          className="float-none mb-4 w-full rounded-lg shadow-lg md:float-right md:ml-8 md:w-2/5"
+        />
+
+        <p className="mb-4">
+          Hey! I&apos;m Alex, the creator of CheckMVP. I&apos;ve been building
+          and launching my own products since I started programming
+          professionally back in 2005. Over the years, I&apos;ve had my share of
+          wins... and my share of products that didn&apos;t quite take off.
+        </p>
+
+        <p className="mb-4">
+          After a while, I started to see the pattern: I was pouring time and
+          effort into building things that, honestly, no one really wanted to
+          use. Sound familiar? We&apos;ve all been there!
+        </p>
+
+        <p className="mb-4">
+          So I decided to solve this problem for good. I wanted a tool that
+          could take a raw idea and transform it into something actionable -
+          showing me the potential market, possible customers, competitors, and
+          the steps to get it out there fast. I wanted to validate ideas without
+          losing months in development.
+        </p>
+      </div>
+
+      <div className="mt-8 text-justify text-lg md:mt-10 lg:mt-14">
+        <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl">
+          Just Talk to Your Customers!
+        </h2>
+
+        <p className="mb-4">
+          Now, people always say that, and they&apos;re right! But what if you
+          don&apos;t know exactly who your customers are yet? Or you&apos;re new
+          to marketing and sales? What if you&apos;re guessing instead of
+          knowing exactly who your ideal customer is? That&apos;s where CheckMVP
+          comes in.
+        </p>
+
+        <p className="mb-4">
+          CheckMVP is designed for us: developers, indie hackers, digital
+          creators, and early-stage founders. It helps us shape our raw ideas
+          into clear, actionable concepts and validate them fast. So we can
+          focus on building things people will love. Validate first – then
+          build. This is the way.
+        </p>
+      </div>
+
+      <div className="mt-8 text-justify text-lg md:mt-10 lg:mt-14">
+        <h2 className="mb-4 text-center text-2xl font-bold text-gray-700 md:mb-8 md:text-3xl lg:text-4xl">
+          What We Bring to The Table?
+        </h2>
+
+        <p className="mb-4">
+          CheckMVP is an AI-powered platform that uses vast knowledge to help
+          you refine your idea, concept, product, or startup using proven
+          techniques that people have used successfully for years. AI is great;
+          we love AI. These days, most of us turn to AI before using search
+          engines. Why not utilize its power, right?
+        </p>
+
+        <p className="mb-4">
+          This is the 5th version of CheckMVP. I started with simple DMs on X
+          and a few of my friends, asking them about their product ideas. Then I
+          jumped into ChatGPT and built a few reports. Once people were
+          satisfied, I created a Google Form to collect more detailed answers
+          without spending too much time in chat. After that, I set up an
+          automation using Tally, Google Docs, and other tools. Only after all
+          these steps did I start building this web app.
+        </p>
+
+        <p className="mb-4">
+          It&apos;s been a long journey. And do you know how I got to this
+          point? By using my own tool to build my own tool. Everything you see
+          here was suggested to me by CheckMVP while I was developing CheckMVP.
+        </p>
+      </div>
+
+      <div className="mb-6 pt-6 text-center">
+        <Link
+          href="/start"
+          className="justify-center rounded-md border border-transparent bg-blue-600 px-8 py-4 text-2xl font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        >
+          Take the First Step
+        </Link>
+      </div>
+    </div>
+  )
+}

src/app/start/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'CheckMVP: Validate Your Startup Idea with AI-Powered Insights',
+  description:
+    'Transform your raw idea into a validated concept. CheckMVP uses AI to help developers, indie hackers, and founders identify their market, audience, and potential.',
+}
+
+export default function StartLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <>{children}</>
+}

src/app/template.tsx

@@ -17,12 +17,20 @@ const Template = ({ children }: { children: React.ReactNode }) => (
           </Link>
 
           <div className="flex items-center space-x-4 md:space-x-6">
+            <Link
+              href="/about"
+              className="flex items-center space-x-1 text-gray-900 hover:text-blue-500"
+              title="About"
+            >
+              About
+            </Link>
+
             <Link
               href="/supporters"
               className="flex items-center space-x-1 text-gray-900 hover:text-blue-500"
               title="Supporters"
             >
-              ❤️ Supporters
+              Supporters
             </Link>
           </div>
         </div>