import H2 from "@/components/lib/layout/H2";
import Link from "@/components/lib/layout/Link";
import Row from "@/components/lib/layout/Row";
import Section from "@/components/lib/layout/Section";
import Span from "@/components/lib/layout/Span";
import Stack from "@/components/lib/layout/Stack";
import { UserRoundSearch } from "lucide-react";

export default function AboutSection() {
    return (
        <Section>
            <Stack className="w-full max-w-full xl:max-w-[50vw]">
                <H2 className="leading-snug">About Me</H2>
                <Span>
                    I'm passionate and dedicated to solving problems using the
                    best technologies available.
                </Span>
                <Link className="dotted-text" href="/about">
                    <Row>
                        <UserRoundSearch size={19} />
                        <Span>Learn More About Me</Span>
                    </Row>
                </Link>
            </Stack>
        </Section>
    );
}