page.tsx

/**
 * Pixelated-CSS Landing Page
 *
 * Design: Minimalist Luxury
 *
 * Creative Direction:
 * Refined elegance through constraint. "Perfection in simplicity."
 * This design embraces extreme restraint—lots of whitespace, minimal color,
 * and premium typography. Every element earns its place. It positions
 * Pixelated-CSS as a sophisticated, high-end tool for discerning developers
 * who appreciate the beauty of well-crafted simplicity.
 *
 * Key Design Decisions:
 * - Typography: Cormorant Garamond (elegant serif) + Jost (refined sans-serif)
 * - Colors: Near-white (#FAFAF9), charcoal (#1C1917), sage green (#6B8E6B) accent
 * - Spacing: Extremely generous, breathing room, vertical rhythm
 * - Animations: Subtle, slow, and deliberate (fades, gentle slides)
 * - Unique Element: The extreme whitespace and restrained color palette
 */

import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Pixelated-CSS | Visual CSS Learning",
  description:
    "Build CSS with quiet confidence. A refined approach to visual learning.",
};

export default function MinimalistLanding() {
  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: `
        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');
        
        :root {
          --white: #FAFAF9;
          --cream: #F5F5F0;
          --charcoal: #1C1917;
          --charcoal-light: #44403C;
          --sage: #6B8E6B;
          --sage-light: #8AAE8A;
          --sage-dark: #557055;
          --stone: #A8A29E;
        }
        
        .font-display { font-family: 'Cormorant Garamond', serif; }
        .font-body { font-family: 'Jost', sans-serif; }
        
        body {
          font-family: 'Jost', sans-serif;
          background: var(--white);
          color: var(--charcoal);
        }
        
        .min-btn {
          background: var(--charcoal);
          color: var(--white);
          transition: all 0.4s ease;
        }
        
        .min-btn:hover {
          background: var(--sage-dark);
        }
        
        .min-btn-outline {
          background: transparent;
          border: 1px solid var(--charcoal);
          color: var(--charcoal);
          transition: all 0.4s ease;
        }
        
        .min-btn-outline:hover {
          background: var(--charcoal);
          color: var(--white);
        }
        
        .subtle-border {
          border: 1px solid rgba(28, 25, 23, 0.1);
        }
        
        .sage-accent {
          color: var(--sage);
        }
        
        .divider {
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(28, 25, 23, 0.1), transparent);
        }
        
        @keyframes fade-in-up {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .animate-fade-in {
          animation: fade-in-up 1s ease-out forwards;
        }
        
        .delay-1 { animation-delay: 0.2s; opacity: 0; }
        .delay-2 { animation-delay: 0.4s; opacity: 0; }
        .delay-3 { animation-delay: 0.6s; opacity: 0; }
        
        .hover-lift {
          transition: transform 0.4s ease;
        }
        
        .hover-lift:hover {
          transform: translateY(-4px);
        }
        
        .text-balance {
          text-wrap: balance;
        }
      `,
        }}
      />

      <div
        className="min-h-screen"
        style={{ background: "var(--white)", color: "var(--charcoal)" }}
      >
        {/* Navigation */}
        <nav className="px-8 py-8 lg:px-16">
          <div className="mx-auto flex max-w-6xl items-center justify-between">
            <span className="font-display text-2xl font-medium tracking-wide">
              Pixelated<span className="sage-accent">.</span>
            </span>

            <div className="hidden items-center gap-12 md:flex">
              <a
                href="#"
                className="font-body text-stone hover:text-charcoal text-sm tracking-wide transition-colors duration-300"
              >
                Features
              </a>
              <a
                href="#"
                className="font-body text-stone hover:text-charcoal text-sm tracking-wide transition-colors duration-300"
              >
                Method
              </a>
              <a
                href="#"
                className="font-body text-stone hover:text-charcoal text-sm tracking-wide transition-colors duration-300"
              >
                Pricing
              </a>
            </div>

            <Link
              href="/que/Q1"
              className="min-btn font-body inline-block rounded-full px-6 py-2 text-sm tracking-wide"
            >
              Begin
            </Link>
          </div>
        </nav>

        {/* Hero Section */}
        <section className="px-8 pt-20 pb-24 lg:px-16 lg:pt-32">
          <div className="mx-auto max-w-4xl text-center">
            <p className="font-body sage-accent animate-fade-in mb-8 text-sm tracking-[0.3em] uppercase">
              Visual Learning Refined
            </p>

            <h1 className="font-display animate-fade-in mb-8 text-5xl leading-[1.1] font-medium text-balance delay-1 lg:text-7xl xl:text-8xl">
              Build CSS with
              <em className="sage-accent block font-normal italic">
                quiet confidence
              </em>
            </h1>

            <p
              className="font-body animate-fade-in mx-auto mb-12 max-w-2xl text-lg leading-relaxed font-light delay-2 lg:text-xl"
              style={{ color: "var(--charcoal-light)" }}
            >
              A refined approach to visual learning. Write code, observe
              results, achieve precision—all in a space designed for focus.
            </p>

            <div className="animate-fade-in flex flex-wrap justify-center gap-4 delay-3">
              <Link
                href="/que/Q1"
                className="min-btn font-body inline-block rounded-full px-10 py-4 text-sm tracking-wide"
              >
                Begin
              </Link>
              <Link
                href="#method"
                className="min-btn-outline font-body inline-block rounded-full px-10 py-4 text-sm tracking-wide"
              >
                Learn More
              </Link>
            </div>
          </div>
        </section>

        {/* Divider */}
        <div className="divider mx-auto max-w-4xl"></div>

        {/* Preview Section */}
        <section id="method" className="px-8 py-24 lg:px-16">
          <div className="mx-auto max-w-5xl">
            <div className="grid items-center gap-16 lg:grid-cols-2">
              <div className="order-2 lg:order-1">
                <div
                  className="subtle-border rounded-lg p-8"
                  style={{ background: "var(--cream)" }}
                >
                  <div className="mb-6 flex items-center justify-between">
                    <span
                      className="font-body text-xs tracking-wider uppercase"
                      style={{ color: "var(--stone)" }}
                    >
                      Editor
                    </span>
                    <div className="flex gap-1.5">
                      <div
                        className="h-2 w-2 rounded-full"
                        style={{ background: "var(--stone)" }}
                      ></div>
                      <div
                        className="h-2 w-2 rounded-full"
                        style={{ background: "var(--stone)" }}
                      ></div>
                      <div
                        className="h-2 w-2 rounded-full"
                        style={{ background: "var(--stone)" }}
                      ></div>
                    </div>
                  </div>

                  <pre
                    className="overflow-x-auto font-mono text-sm leading-loose"
                    style={{ color: "var(--charcoal-light)" }}
                  >
                    <code>{`<div class="flex flex-col
  items-center justify-center
  min-h-[200px] bg-stone-50
  rounded-lg">
  
  <h2 class="text-3xl font-serif
    text-stone-800">
    Simplicity
  </h2>
  
  <p class="text-stone-500 mt-2">
    is the ultimate sophistication
  </p>
</div>`}</code>
                  </pre>
                </div>

                {/* Preview */}
                <div
                  className="subtle-border mt-4 rounded-lg p-8"
                  style={{ background: "var(--white)" }}
                >
                  <span
                    className="font-body mb-4 block text-xs tracking-wider uppercase"
                    style={{ color: "var(--stone)" }}
                  >
                    Preview
                  </span>
                  <div
                    className="flex min-h-[120px] flex-col items-center justify-center rounded-lg"
                    style={{ background: "var(--cream)" }}
                  >
                    <h2
                      className="font-display text-2xl"
                      style={{ color: "var(--charcoal)" }}
                    >
                      Simplicity
                    </h2>
                    <p className="mt-1" style={{ color: "var(--stone)" }}>
                      is the ultimate sophistication
                    </p>
                  </div>
                </div>
              </div>

              <div className="order-1 lg:order-2">
                <p className="font-body sage-accent mb-6 text-sm tracking-[0.2em] uppercase">
                  The Method
                </p>
                <h2 className="font-display mb-6 text-4xl leading-tight font-medium text-balance lg:text-5xl">
                  Code and result,
                  <em className="block font-normal italic">side by side</em>
                </h2>
                <p
                  className="font-body mb-8 text-lg leading-relaxed font-light"
                  style={{ color: "var(--charcoal-light)" }}
                >
                  Your creative space distilled to its essence. Every keystroke
                  reflected instantly. No distraction, only focus.
                </p>

                <div className="space-y-4">
                  {[
                    "Real-time rendering",
                    "Visual comparison",
                    "Pixel precision",
                  ].map((item, i) => (
                    <div key={i} className="flex items-center gap-4">
                      <div
                        className="h-1.5 w-1.5 rounded-full"
                        style={{ background: "var(--sage)" }}
                      ></div>
                      <span className="font-body text-sm tracking-wide">
                        {item}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Divider */}
        <div className="divider mx-auto max-w-4xl"></div>

        {/* Features Section */}
        <section className="px-8 py-24 lg:px-16">
          <div className="mx-auto max-w-5xl">
            <div className="mb-20 text-center">
              <p className="font-body sage-accent mb-6 text-sm tracking-[0.2em] uppercase">
                Four Principles
              </p>
              <h2 className="font-display text-4xl font-medium text-balance lg:text-5xl">
                Everything you need,
                <br />
                <em className="font-normal italic">nothing you don&apos;t</em>
              </h2>
            </div>

            <div className="grid gap-x-16 gap-y-16 md:grid-cols-2">
              {[
                {
                  num: "01",
                  title: "Live Preview",
                  desc: "Watch your code take shape in real-time. Every change, rendered instantly.",
                },
                {
                  num: "02",
                  title: "Visual Feedback",
                  desc: "Immediate confirmation of precision. Know when you've achieved perfection.",
                },
                {
                  num: "03",
                  title: "Learn Tailwind",
                  desc: "Master utility-first CSS through practice. Build understanding organically.",
                },
                {
                  num: "04",
                  title: "Match Designs",
                  desc: "Train your eye for detail. Develop pixel-perfect precision through repetition.",
                },
              ].map((feature, i) => (
                <div key={i} className="hover-lift">
                  <span className="font-display sage-accent text-5xl font-light">
                    {feature.num}
                  </span>
                  <h3 className="font-display mt-4 mb-3 text-2xl font-medium">
                    {feature.title}
                  </h3>
                  <p
                    className="font-body leading-relaxed font-light"
                    style={{ color: "var(--charcoal-light)" }}
                  >
                    {feature.desc}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Divider */}
        <div className="divider mx-auto max-w-4xl"></div>

        {/* CTA Section */}
        <section className="px-8 py-24 lg:px-16 lg:py-32">
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="font-display mb-8 text-4xl leading-tight font-medium text-balance lg:text-6xl">
              Begin your journey toward
              <em className="sage-accent block font-normal italic">
                quiet mastery
              </em>
            </h2>

            <p
              className="font-body mb-12 text-lg leading-relaxed font-light"
              style={{ color: "var(--charcoal-light)" }}
            >
              Join those who appreciate the refined approach to CSS learning.
              Free to begin, with no unnecessary complexity.
            </p>

            <Link
              href="/que/Q1"
              className="min-btn font-body inline-block rounded-full px-12 py-5 tracking-wide"
            >
              Begin
            </Link>

            <p
              className="font-body mt-8 text-sm"
              style={{ color: "var(--stone)" }}
            >
              Free forever · No account required
            </p>
          </div>
        </section>

        {/* Footer */}
        <footer
          className="px-8 py-12 lg:px-16"
          style={{ borderTop: "1px solid rgba(28, 25, 23, 0.05)" }}
        >
          <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-6 md:flex-row">
            <span className="font-display text-xl font-medium">
              Pixelated<span className="sage-accent">.</span>
            </span>

            <div className="flex items-center gap-8">
              <a
                href="#"
                className="font-body hover:sage-accent text-sm tracking-wide transition-colors duration-300"
                style={{ color: "var(--stone)" }}
              >
                Twitter
              </a>
              <a
                href="#"
                className="font-body hover:sage-accent text-sm tracking-wide transition-colors duration-300"
                style={{ color: "var(--stone)" }}
              >
                GitHub
              </a>
              <a
                href="#"
                className="font-body hover:sage-accent text-sm tracking-wide transition-colors duration-300"
                style={{ color: "var(--stone)" }}
              >
                Discord
              </a>
            </div>

            <p className="font-body text-sm" style={{ color: "var(--stone)" }}>
              © 2024
            </p>
          </div>
        </footer>
      </div>
    </>
  );
}