Janady13/llms-txt-hub / apps/web/components/sections/how-it-works-section.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/llms-txt-hub / apps/web/components/sections/how-it-works-section.tsx
Date	Not specified in source
Repository	Janady13/llms-txt-hub
Revision	e0f4bf978d4df168369c7601d9c5f5ea89e84377
Branch	main
Path or archive member	apps/web/components/sections/how-it-works-section.tsx
Original SHA-256	984ea557396de0012a2cf918c54e411d812682916ec9321c8473fa334fb25c56
Git blob SHA	b5dad4a40e048dbd5b3062bf42efebebac84bf10
Reading-copy SHA-256	984ea557396de0012a2cf918c54e411d812682916ec9321c8473fa334fb25c56

Original source ↗

Recovered source transcript

Download complete source text ↓53 lines · 2.3 KB

import { Code2, FileText, Zap } from 'lucide-react'
import { Section } from '@/components/layout/section'
import { Card, CardContent } from '@/components/ui/card'

/**
 * Renders the "How llms.txt Works" explainer section
 */
export function HowItWorksSection() {
  return (
    <Section
      title="How llms.txt Works"
      description="Learn how to implement llms.txt in three simple steps"
    >
      <div className="grid gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardContent className="p-2 text-center space-y-1.5">
            <div className="bg-primary/10 p-2 sm:p-2.5 rounded-full w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center mx-auto">
              <FileText className="h-6 w-6 sm:h-7 sm:w-7 text-primary" />
            </div>
            <h3 className="text-sm sm:text-base font-semibold">1. Create llms.txt</h3>
            <p className="text-xs sm:text-sm text-muted-foreground">
              Add a llms.txt file to your website's root directory with markdown format, similar to
              robots.txt.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-2 text-center space-y-1.5">
            <div className="bg-primary/10 p-2 sm:p-2.5 rounded-full w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center mx-auto">
              <Code2 className="h-6 w-6 sm:h-7 sm:w-7 text-primary" />
            </div>
            <h3 className="text-sm sm:text-base font-semibold">2. Define Structure</h3>
            <p className="text-xs sm:text-sm text-muted-foreground">
              Specify your website's content structure and documentation paths.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-2 text-center space-y-1.5">
            <div className="bg-primary/10 p-2 sm:p-2.5 rounded-full w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center mx-auto">
              <Zap className="h-6 w-6 sm:h-7 sm:w-7 text-primary" />
            </div>
            <h3 className="text-sm sm:text-base font-semibold">3. Enhance AI Interactions</h3>
            <p className="text-xs sm:text-sm text-muted-foreground">
              Help AI models better understand and navigate your website's content.
            </p>
          </CardContent>
        </Card>
      </div>
    </Section>
  )
}