import React from 'react';
import SignupButton from '@/components/auth/SignupButton';

const AboutHead: React.FC = () => {
    return (

        <div className="relative overflow-hidden before:absolute before:top-0 before:start-1/2 before:bg-[url('https://preline.co/assets/svg/examples/squared-bg-element.svg')] dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/squared-bg-element.svg')] before:bg-no-repeat before:bg-top before:size-full before:-z-[1] before:transform before:-translate-x-1/2">
            <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">


                <div className="mt-5 max-w-xl text-center mx-auto">
                    <h1 className="block font-bold text-gray-800 text-4xl md:text-5xl lg:text-6xl dark:text-neutral-200">
                        About Us
                    </h1>
                </div>


                <div className="mt-5 max-w-4xl text-center mx-auto">
                    <p className="tracking-wide text-lg text-gray-600 dark:text-neutral-400">At Prejee, we are pioneering a new era in the learning process. The AI that learns with you, adapts to your learning style.</p>
                </div>


                <div className="mt-8 gap-3 flex justify-center">
                    <SignupButton>
                    <div className="inline-flex justify-center items-center gap-x-1 text-center bg-gradient-to-tl from-blue-600 to-violet-600 hover:from-violet-600 hover:to-blue-600 focus:outline-none focus:from-violet-600 focus:to-blue-600 border border-transparent text-white text-sm font-medium rounded-full py-3 px-4">
                        Register for free
                        <svg className="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                    </div>
                    </SignupButton>
                </div>

            </div>
        </div>

    );
};

export default AboutHead;