src/components/HeroSection.tsx

import { Button } from '@/components/base';
import { Download } from 'lucide-react';
import Image from 'next/image';

export function HeroSection() {
  return (
    <div className="relative">
      <div className="container flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center text-center">
        <div className="mx-auto max-w-5xl space-y-4">
          <h1 className="text-4xl font-bold sm:text-5xl md:text-6xl lg:text-7xl">
            Chat with AI
            <br />
            without privacy concerns
          </h1>
          <p className="mx-auto max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
            Jan is an open source ChatGPT-alternative that runs 100% offline.
          </p>
          <div className="space-y-4">
            <Button size="lg" className="h-12">
              <Download className="mr-2 size-4" />
              Download for Windows
            </Button>
            <p className="text-sm text-muted-foreground">
              <span className="font-semibold text-primary">2.5M+</span>
              {' '}
              downloads | Free & Open Source
            </p>
          </div>
        </div>
        <div className="mt-16 w-full max-w-5xl rounded-lg border bg-muted/50 p-4">
          <Image
            src="https://sjc.microlink.io/-ax0tIqUfnMYpO1Y6sFNuRcGN_Oe6cQwpzrnQR5q5pzkpfA29UGKZ228lDnpeQCpNANORBcNBmQgFoOtLn18vw.jpeg"
            alt="Jan AI Interface"
            className="rounded-lg shadow-2xl"
            width={1200}
            height={675}
          />
        </div>
      </div>
    </div>
  );
}