'use client'
import {
ClerkLoaded,
ClerkLoading,
SignInButton,
SignedIn,
SignedOut,
UserButton,
useAuth,
} from '@clerk/nextjs';
import { Loader } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
// import { links } from '@/config';
export const Header = () => {
const { userId } = useAuth();
return (
<header className='h-20 w-full border-b-2 border-slate-200 px-4'>
<div className='mx-auto flex h-full items-center justify-between lg:max-w-screen-lg'>
<Link href='/' className='flex items-center gap-x-3 pb-7 pl-4 pt-8'>
<Image src='/mascot.svg' alt='Mascot' height={40} width={40} />
<h1 className='text-2xl font-extrabold tracking-wide text-green-600'>
Lingo
</h1>
</Link>
<div className='flex gap-x-3'>
<ClerkLoading>
<Loader className='h-5 w-5 animate-spin text-muted-foreground' />
</ClerkLoading>
<ClerkLoaded>
<SignedIn>
<UserButton afterSignOutUrl='/' />
</SignedIn>
<SignedOut>
<SignInButton
mode='modal'
// afterSignInUrl='/learn'
// afterSignUpUrl='/learn'
signUpFallbackRedirectUrl='/learn'
>
<Button size='lg' variant='ghost'>
Login
</Button>
</SignInButton>
</SignedOut>
<Link
// href={links.sourceCode}
href='/'
target='_blank'
rel='noreferrer noopener'
className={userId ? 'pt-1.5' : 'pt-3'}
>
</Link>
</ClerkLoaded>
</div>
</div>
</header>
);
};
'use client';
import {
ClerkLoaded,
ClerkLoading,
SignInButton,
SignUpButton,
SignedIn,
SignedOut,
} from '@clerk/nextjs';
import { Loader } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
export default function MarketingPage() {
return (
<div className='mx-auto flex w-full max-w-[988px] flex-1 flex-col items-center justify-center gap-2 p-4 lg:flex-row'>
<div className='relative mb-8 h-[240px] w-[240px] lg:mb-0 lg:h-[424px] lg:w-[424px]'>
<Image src='/hero.svg' alt='Hero' fill />
</div>
<div className='flex flex-col items-center gap-y-8'>
<h1 className='max-w-[480px] text-center text-xl font-bold text-neutral-600 lg:text-3xl'>
Learn, practice and master new languages with Lingo.
</h1>
<div className='flex w-full max-w-[330px] flex-col items-center gap-y-3'>
<ClerkLoading>
<Loader className='h-5 w-5 animate-spin text-muted-foreground' />
</ClerkLoading>
<ClerkLoaded>
<SignedOut>
<SignUpButton
mode='modal'
// afterSignInUrl='/learn'
// afterSignUpUrl='/learn'
>
<Button size='lg' variant='secondary' className='w-full'>
Get Started
</Button>
</SignUpButton>
<SignInButton
mode='modal'
// afterSignInUrl='/learn'
// afterSignUpUrl='/learn'
signUpFallbackRedirectUrl='/learn'
>
<Button size='lg' variant='primaryOutline' className='w-full'>
I already have an account
</Button>
</SignInButton>
</SignedOut>
<SignedIn>
<Button size='lg' variant='secondary' className='w-full' asChild>
<Link href='/learn'>Continue Learning</Link>
</Button>
</SignedIn>
</ClerkLoaded>
</div>
</div>
</div>
);
}