Wu Peirong
2 years ago
parent
7d1ffb9887
commit
c9f7b59d52
@ -1,45 +0,0 @@
|
|||||||
import clsx from 'clsx';
|
|
||||||
import Link from 'next/link';
|
|
||||||
|
|
||||||
const baseStyles = {
|
|
||||||
outline:
|
|
||||||
'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none',
|
|
||||||
solid:
|
|
||||||
'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
|
|
||||||
};
|
|
||||||
|
|
||||||
const variantStyles = {
|
|
||||||
outline: {
|
|
||||||
slate:
|
|
||||||
'ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300',
|
|
||||||
white:
|
|
||||||
'ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white',
|
|
||||||
},
|
|
||||||
solid: {
|
|
||||||
blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
|
|
||||||
slate:
|
|
||||||
'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900',
|
|
||||||
white:
|
|
||||||
'bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export function Button({
|
|
||||||
variant = 'solid',
|
|
||||||
color = 'slate',
|
|
||||||
className,
|
|
||||||
href,
|
|
||||||
...props
|
|
||||||
}) {
|
|
||||||
className = clsx(
|
|
||||||
baseStyles[variant],
|
|
||||||
variantStyles[variant][color],
|
|
||||||
className,
|
|
||||||
);
|
|
||||||
|
|
||||||
return href ? (
|
|
||||||
<Link className={className} href={href} {...props} />
|
|
||||||
) : (
|
|
||||||
<button className={className} type="button" {...props} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
import Image from 'next/future/image';
|
|
||||||
|
|
||||||
import { Button } from './Button';
|
|
||||||
import { Container } from './Container';
|
|
||||||
import backgroundImage from './images/background-call-to-action.jpg';
|
|
||||||
|
|
||||||
export function CallToAction() {
|
|
||||||
return (
|
|
||||||
<section
|
|
||||||
className="relative overflow-hidden bg-blue-600 py-32"
|
|
||||||
id="get-started-today">
|
|
||||||
<Image
|
|
||||||
alt=""
|
|
||||||
className="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
|
|
||||||
height={1244}
|
|
||||||
src={backgroundImage}
|
|
||||||
unoptimized={true}
|
|
||||||
width={2347}
|
|
||||||
/>
|
|
||||||
<Container className="relative">
|
|
||||||
<div className="mx-auto max-w-lg text-center">
|
|
||||||
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
|
|
||||||
Resume review can start right now.
|
|
||||||
</h2>
|
|
||||||
<p className="mt-4 text-lg tracking-tight text-white">
|
|
||||||
It's free! Take charge of your resume game by learning from the top
|
|
||||||
engineers in the field.
|
|
||||||
</p>
|
|
||||||
<Button className="mt-10" color="white" href="/resumes/browse">
|
|
||||||
Start browsing now
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
import { Container } from './Container';
|
||||||
|
|
||||||
|
export function CallToAction() {
|
||||||
|
return (
|
||||||
|
<section className="relative overflow-hidden py-32" id="get-started-today">
|
||||||
|
<Container className="relative">
|
||||||
|
<div className="mx-auto max-w-lg text-center">
|
||||||
|
<h2 className="font-display text-3xl tracking-tight text-gray-900 sm:text-4xl">
|
||||||
|
Resume review can start right now.
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-lg tracking-tight text-gray-600">
|
||||||
|
It's free! Take charge of your resume game by learning from the top
|
||||||
|
engineers in the field.
|
||||||
|
</p>
|
||||||
|
<Link href="/resumes/browse">
|
||||||
|
<button
|
||||||
|
className="mt-4 rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white"
|
||||||
|
type="button">
|
||||||
|
Start browsing now
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import clsx from 'clsx'
|
|
||||||
|
|
||||||
export function Container({ className, ...props }) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import clsx from 'clsx';
|
||||||
|
import type { FC } from 'react';
|
||||||
|
|
||||||
|
type ContainerProps = {
|
||||||
|
children: Array<JSX.Element> | JSX.Element;
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Container: FC<ContainerProps> = ({ className, ...props }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,50 +0,0 @@
|
|||||||
import Link from 'next/link';
|
|
||||||
|
|
||||||
import { Container } from './Container';
|
|
||||||
import { Logo } from './Logo';
|
|
||||||
|
|
||||||
export function Footer() {
|
|
||||||
return (
|
|
||||||
<footer className="bg-slate-50">
|
|
||||||
<Container>
|
|
||||||
<div className="py-16">
|
|
||||||
<Logo className="mx-auto h-10 w-auto" />
|
|
||||||
<nav aria-label="quick links" className="mt-10 text-sm">
|
|
||||||
<div className="-my-1 flex justify-center gap-x-6">
|
|
||||||
<Link href="#features">Features</Link>
|
|
||||||
<Link href="#testimonials">Testimonials</Link>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
|
|
||||||
<div className="flex gap-x-6">
|
|
||||||
<Link
|
|
||||||
aria-label="TaxPal on Twitter"
|
|
||||||
className="group"
|
|
||||||
href="https://twitter.com">
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700">
|
|
||||||
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
|
|
||||||
</svg>
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
aria-label="TaxPal on GitHub"
|
|
||||||
className="group"
|
|
||||||
href="https://github.com">
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700">
|
|
||||||
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
|
|
||||||
</svg>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<p className="mt-6 text-sm text-slate-500 sm:mt-0">
|
|
||||||
Copyright © {new Date().getFullYear()} Resume Review. All
|
|
||||||
rights reserved.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 162 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 181 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 967 B |
Loading…
Reference in new issue