[resumes][feat] add resume landing page (#375)
Peirong
2 years ago
committed by
GitHub
parent
511087cf90
commit
dbdcd4dda9
Binary file not shown.
@ -0,0 +1,45 @@
|
|||||||
|
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} />
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
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,10 @@
|
|||||||
|
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,50 @@
|
|||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
import Image from 'next/future/image';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
import { Button } from './Button';
|
||||||
|
import { Container } from './Container';
|
||||||
|
import logoLaravel from './images/logos/laravel.svg';
|
||||||
|
import logoMirage from './images/logos/mirage.svg';
|
||||||
|
import logoStatamic from './images/logos/statamic.svg';
|
||||||
|
import logoStaticKit from './images/logos/statickit.svg';
|
||||||
|
import logoTransistor from './images/logos/transistor.svg';
|
||||||
|
import logoTuple from './images/logos/tuple.svg';
|
||||||
|
|
||||||
|
export function Hero() {
|
||||||
|
return (
|
||||||
|
<Container className="pt-20 pb-16 text-center lg:pt-32">
|
||||||
|
<h1 className="font-display mx-auto max-w-4xl text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
|
||||||
|
Resume review{' '}
|
||||||
|
<span className="relative whitespace-nowrap text-blue-600">
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
viewBox="0 0 418 42">
|
||||||
|
<path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
|
||||||
|
</svg>
|
||||||
|
<span className="relative">made simple</span>
|
||||||
|
</span>{' '}
|
||||||
|
for software engineers.
|
||||||
|
</h1>
|
||||||
|
<p className="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">
|
||||||
|
Get valuable feedback from the public or checkout reviewed resumes from
|
||||||
|
your fellow engineers
|
||||||
|
</p>
|
||||||
|
<div className="mt-10 flex justify-center gap-x-4">
|
||||||
|
<Link href="/resumes/browse">
|
||||||
|
<Button>Start browsing now</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
|
||||||
|
<Button variant="outline">
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="h-3 w-3 flex-none fill-blue-600 group-active:fill-current">
|
||||||
|
<path d="m9.997 6.91-7.583 3.447A1 1 0 0 1 1 9.447V2.553a1 1 0 0 1 1.414-.91L9.997 5.09c.782.355.782 1.465 0 1.82Z" />
|
||||||
|
</svg>
|
||||||
|
<span className="ml-3">Watch video</span>
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="mt-36 lg:mt-44">
|
||||||
|
<p className="font-display text-base text-slate-900">
|
||||||
|
Resumes reviewed from engineers from these companies so far
|
||||||
|
</p>
|
||||||
|
<ul
|
||||||
|
className="mt-8 flex items-center justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
|
||||||
|
role="list">
|
||||||
|
{[
|
||||||
|
{ logo: logoTransistor, name: 'Apple' },
|
||||||
|
{ logo: logoTuple, name: 'Meta' },
|
||||||
|
{ logo: logoStaticKit, name: 'Google' },
|
||||||
|
|
||||||
|
{ logo: logoMirage, name: 'Mirage' },
|
||||||
|
{ logo: logoLaravel, name: 'Laravel' },
|
||||||
|
{ logo: logoStatamic, name: 'Statamic' },
|
||||||
|
].map((company) => (
|
||||||
|
<li key={company.name} className="flex">
|
||||||
|
<Image alt={company.name} src={company.logo} unoptimized={true} />
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
export function Logo(props) {
|
||||||
|
return (
|
||||||
|
<svg aria-hidden="true" viewBox="0 0 109 40" {...props}>
|
||||||
|
<path
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="M0 20c0 11.046 8.954 20 20 20s20-8.954 20-20S31.046 0 20 0 0 8.954 0 20Zm20 16c-7.264 0-13.321-5.163-14.704-12.02C4.97 22.358 6.343 21 8 21h24c1.657 0 3.031 1.357 2.704 2.98C33.32 30.838 27.264 36 20 36Z"
|
||||||
|
fill="#2563EB"
|
||||||
|
fillRule="evenodd"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M55.528 26.57V15.842H52V13.97h9.108v1.872h-3.636V26.57h-1.944Z"
|
||||||
|
fill="#0F172A"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M83.084 26.57v-12.6h5.346c.744 0 1.416.18 2.016.54a3.773 3.773 0 0 1 1.44 1.44c.36.612.54 1.302.54 2.07 0 .78-.18 1.482-.54 2.106a4 4 0 0 1-1.44 1.494c-.6.36-1.272.54-2.016.54h-2.646v4.41h-2.7Zm2.664-6.84h2.376c.288 0 .546-.072.774-.216.228-.156.408-.36.54-.612a1.71 1.71 0 0 0 .216-.864c0-.324-.072-.606-.216-.846a1.394 1.394 0 0 0-.54-.576 1.419 1.419 0 0 0-.774-.216h-2.376v3.33ZM106.227 26.57V13.25h2.556v13.32h-2.556Z"
|
||||||
|
fill="#2563EB"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="M95.906 26.102c.636.432 1.35.648 2.142.648.444 0 .864-.066 1.26-.198a4.25 4.25 0 0 0 1.062-.558 3.78 3.78 0 0 0 .702-.668v1.244h2.574v-9.522h-2.538v1.248a3.562 3.562 0 0 0-.648-.672 3.13 3.13 0 0 0-1.026-.558 3.615 3.615 0 0 0-1.278-.216c-.828 0-1.566.216-2.214.648-.648.42-1.164 1.002-1.548 1.746-.372.732-.558 1.578-.558 2.538 0 .96.186 1.812.558 2.556.372.744.876 1.332 1.512 1.764Zm4.104-1.908c-.36.228-.78.342-1.26.342-.468 0-.882-.114-1.242-.342a2.387 2.387 0 0 1-.828-.954c-.204-.42-.306-.906-.306-1.458 0-.54.102-1.014.306-1.422.204-.408.48-.726.828-.954.36-.24.774-.36 1.242-.36.48 0 .9.12 1.26.36.36.228.636.546.828.954.204.408.306.882.306 1.422 0 .552-.102 1.038-.306 1.458a2.218 2.218 0 0 1-.828.954Z"
|
||||||
|
fill="#2563EB"
|
||||||
|
fillRule="evenodd"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="m76.322 23.197 2.595 3.373h2.268l-3.662-4.787 3.338-4.663h-2.196l-2.162 3.334-2.554-3.334h-2.34l3.652 4.71-3.634 4.74h2.196l2.5-3.373ZM62.738 26.102a3.78 3.78 0 0 0 2.142.648c.456 0 .888-.072 1.296-.216.42-.144.798-.336 1.134-.576a3.418 3.418 0 0 0 .864-.835v1.447h1.872v-9.45h-1.872v1.45a3.118 3.118 0 0 0-.72-.82 3.2 3.2 0 0 0-1.062-.612 4.033 4.033 0 0 0-1.35-.216c-.828 0-1.578.21-2.25.63-.66.42-1.188 1.002-1.584 1.746-.384.732-.576 1.572-.576 2.52 0 .936.192 1.776.576 2.52.384.744.894 1.332 1.53 1.764Zm4.122-1.476c-.432.276-.93.414-1.494.414a2.682 2.682 0 0 1-1.476-.414 2.987 2.987 0 0 1-1.008-1.134c-.24-.492-.36-1.05-.36-1.674 0-.612.12-1.158.36-1.638.252-.48.588-.858 1.008-1.134a2.682 2.682 0 0 1 1.476-.414c.564 0 1.062.138 1.494.414.432.276.768.654 1.008 1.134.252.48.378 1.026.378 1.638 0 .624-.126 1.182-.378 1.674-.24.48-.576.858-1.008 1.134Z"
|
||||||
|
fill="#0F172A"
|
||||||
|
fillRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,139 @@
|
|||||||
|
import clsx from 'clsx';
|
||||||
|
import Image from 'next/future/image';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { Tab } from '@headlessui/react';
|
||||||
|
|
||||||
|
import { Container } from './Container';
|
||||||
|
import backgroundImage from './images/background-features.jpg';
|
||||||
|
import screenshotExpenses from './images/screenshots/expenses.png';
|
||||||
|
import screenshotPayroll from './images/screenshots/payroll.png';
|
||||||
|
import screenshotVatReturns from './images/screenshots/vat-returns.png';
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
description:
|
||||||
|
'Browse the most popular reviewed resumes out there and see what you can learn',
|
||||||
|
image: screenshotPayroll,
|
||||||
|
title: 'Browse',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description:
|
||||||
|
'Upload your own resume easily to get feedback from people in industry.',
|
||||||
|
image: screenshotExpenses,
|
||||||
|
title: 'Submit',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description:
|
||||||
|
'Pass the baton forward by reviewing resumes and bounce off ideas with other engineers out there.',
|
||||||
|
image: screenshotVatReturns,
|
||||||
|
title: 'Review',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function PrimaryFeatures() {
|
||||||
|
const [tabOrientation, setTabOrientation] = useState('horizontal');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const lgMediaQuery = window.matchMedia('(min-width: 1024px)');
|
||||||
|
|
||||||
|
function onMediaQueryChange({ matches }) {
|
||||||
|
setTabOrientation(matches ? 'vertical' : 'horizontal');
|
||||||
|
}
|
||||||
|
|
||||||
|
onMediaQueryChange(lgMediaQuery);
|
||||||
|
lgMediaQuery.addEventListener('change', onMediaQueryChange);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
lgMediaQuery.removeEventListener('change', onMediaQueryChange);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
aria-label="Features for running your books"
|
||||||
|
className="relative overflow-hidden bg-blue-600 pt-20 pb-28 sm:py-32"
|
||||||
|
id="features">
|
||||||
|
<Image
|
||||||
|
alt=""
|
||||||
|
className="absolute top-1/2 left-1/2 max-w-none translate-x-[-44%] translate-y-[-42%]"
|
||||||
|
height={1636}
|
||||||
|
src={backgroundImage}
|
||||||
|
unoptimized={true}
|
||||||
|
width={2245}
|
||||||
|
/>
|
||||||
|
<Container className="relative">
|
||||||
|
<div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
|
||||||
|
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
|
||||||
|
Everything you need to up your resume game.
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<Tab.Group
|
||||||
|
as="div"
|
||||||
|
className="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0"
|
||||||
|
vertical={tabOrientation === 'vertical'}>
|
||||||
|
{({ selectedIndex }) => (
|
||||||
|
<>
|
||||||
|
<div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
|
||||||
|
<Tab.List className="relative z-10 flex gap-x-4 whitespace-nowrap px-4 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
|
||||||
|
{features.map((feature, featureIndex) => (
|
||||||
|
<div
|
||||||
|
key={feature.title}
|
||||||
|
className={clsx(
|
||||||
|
'group relative rounded-full py-1 px-4 lg:rounded-r-none lg:rounded-l-xl lg:p-6',
|
||||||
|
selectedIndex === featureIndex
|
||||||
|
? 'bg-white lg:bg-white/10 lg:ring-1 lg:ring-inset lg:ring-white/10'
|
||||||
|
: 'hover:bg-white/10 lg:hover:bg-white/5',
|
||||||
|
)}>
|
||||||
|
<h3>
|
||||||
|
<Tab
|
||||||
|
className={clsx(
|
||||||
|
'font-display text-lg [&:not(:focus-visible)]:focus:outline-none',
|
||||||
|
selectedIndex === featureIndex
|
||||||
|
? 'text-blue-600 lg:text-white'
|
||||||
|
: 'text-blue-100 hover:text-white lg:text-white',
|
||||||
|
)}>
|
||||||
|
<span className="absolute inset-0 rounded-full lg:rounded-r-none lg:rounded-l-xl" />
|
||||||
|
{feature.title}
|
||||||
|
</Tab>
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className={clsx(
|
||||||
|
'mt-2 hidden text-sm lg:block',
|
||||||
|
selectedIndex === featureIndex
|
||||||
|
? 'text-white'
|
||||||
|
: 'text-blue-100 group-hover:text-white',
|
||||||
|
)}>
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</Tab.List>
|
||||||
|
</div>
|
||||||
|
<Tab.Panels className="lg:col-span-7">
|
||||||
|
{features.map((feature) => (
|
||||||
|
<Tab.Panel key={feature.title} unmount={false}>
|
||||||
|
<div className="relative sm:px-6 lg:hidden">
|
||||||
|
<div className="absolute -inset-x-4 top-[-6.5rem] bottom-[-4.25rem] bg-white/10 ring-1 ring-inset ring-white/10 sm:inset-x-0 sm:rounded-t-xl" />
|
||||||
|
<p className="relative mx-auto max-w-2xl text-base text-white sm:text-center">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="mt-10 w-[45rem] overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-blue-900/20 sm:w-auto lg:mt-0 lg:w-[67.8125rem]">
|
||||||
|
<Image
|
||||||
|
alt=""
|
||||||
|
className="w-full"
|
||||||
|
priority={true}
|
||||||
|
sizes="(min-width: 1024px) 67.8125rem, (min-width: 640px) 100vw, 45rem"
|
||||||
|
src={feature.image}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Tab.Panel>
|
||||||
|
))}
|
||||||
|
</Tab.Panels>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Tab.Group>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 162 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 181 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 967 B |
|
After Width: | Height: | Size: 181 KiB |
|
After Width: | Height: | Size: 179 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 174 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 149 KiB |
@ -0,0 +1,25 @@
|
|||||||
|
import Head from 'next/head';
|
||||||
|
|
||||||
|
import { CallToAction } from '~/components/resumes/landing/CallToAction';
|
||||||
|
import { Footer } from '~/components/resumes/landing/Footer';
|
||||||
|
import { Hero } from '~/components/resumes/landing/Hero';
|
||||||
|
import { PrimaryFeatures } from '~/components/resumes/landing/PrimaryFeatures';
|
||||||
|
import { Testimonials } from '~/components/resumes/landing/Testimonials';
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>Resume Review</title>
|
||||||
|
</Head>
|
||||||
|
|
||||||
|
<main className="h-[calc(100vh-2rem)] w-full overflow-y-auto">
|
||||||
|
<Hero />
|
||||||
|
<PrimaryFeatures />
|
||||||
|
<CallToAction />
|
||||||
|
<Testimonials />
|
||||||
|
<Footer />
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in new issue