[resumes][chore] add screenshots to landing
@@ -9,7 +9,7 @@ type ContainerProps = {
|
||||
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)}
|
||||
className={clsx('mx-auto max-w-7xl px-4 lg:px-2', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -4,27 +4,27 @@ import { useEffect, useState } from 'react';
|
||||
import { Tab } from '@headlessui/react';
|
||||
|
||||
import { Container } from './Container';
|
||||
import screenshotExpenses from './images/screenshots/expenses.png';
|
||||
import screenshotPayroll from './images/screenshots/payroll.png';
|
||||
import screenshotVatReturns from './images/screenshots/vat-returns.png';
|
||||
import resumeBrowse from './images/screenshots/resumes-browse.png';
|
||||
import resumeReview from './images/screenshots/resumes-review.png';
|
||||
import resumeSubmit from './images/screenshots/resumes-submit.png';
|
||||
|
||||
const features = [
|
||||
{
|
||||
description:
|
||||
'Browse the most popular reviewed resumes out there and see what you can learn',
|
||||
image: screenshotPayroll,
|
||||
image: resumeBrowse,
|
||||
title: 'Browse',
|
||||
},
|
||||
{
|
||||
description:
|
||||
'Upload your own resume easily to get feedback from people in industry.',
|
||||
image: screenshotExpenses,
|
||||
image: resumeSubmit,
|
||||
title: 'Submit',
|
||||
},
|
||||
{
|
||||
description:
|
||||
'Pass the baton forward by reviewing resumes and bounce off ideas with other engineers out there.',
|
||||
image: screenshotVatReturns,
|
||||
image: resumeReview,
|
||||
title: 'Review',
|
||||
},
|
||||
];
|
||||
@@ -49,7 +49,6 @@ export function PrimaryFeatures() {
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-label="Features for running your books"
|
||||
className="relative overflow-hidden bg-gradient-to-r from-indigo-400 to-indigo-700 pt-20 pb-28 sm:py-32"
|
||||
id="features">
|
||||
<Container className="relative">
|
||||
@@ -64,7 +63,7 @@ export function PrimaryFeatures() {
|
||||
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">
|
||||
<div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-4">
|
||||
<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
|
||||
@@ -100,7 +99,7 @@ export function PrimaryFeatures() {
|
||||
))}
|
||||
</Tab.List>
|
||||
</div>
|
||||
<Tab.Panels className="lg:col-span-7">
|
||||
<Tab.Panels className="lg:col-span-8">
|
||||
{features.map((feature) => (
|
||||
<Tab.Panel key={feature.title} unmount={false}>
|
||||
<div className="relative sm:px-6 lg:hidden">
|
||||
|
||||
@@ -94,7 +94,6 @@ function QuoteIcon(props: QuoteProps) {
|
||||
export function Testimonials() {
|
||||
return (
|
||||
<section
|
||||
aria-label="What our customers are saying"
|
||||
className="bg-gradient-to-r from-indigo-700 to-indigo-400 py-20 sm:py-32"
|
||||
id="testimonials">
|
||||
<Container>
|
||||
|
||||
|
Before Width: | Height: | Size: 181 KiB |
|
Before Width: | Height: | Size: 179 KiB |
|
Before Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 174 KiB |
|
Before Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 652 KiB |
|
After Width: | Height: | Size: 1006 KiB |
|
After Width: | Height: | Size: 437 KiB |
|
Before Width: | Height: | Size: 149 KiB |
@@ -3,7 +3,6 @@ import Head from 'next/head';
|
||||
import { CallToAction } from '~/components/resumes/landing/CallToAction';
|
||||
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 (
|
||||
@@ -16,7 +15,6 @@ export default function Home() {
|
||||
<Hero />
|
||||
<PrimaryFeatures />
|
||||
<CallToAction />
|
||||
<Testimonials />
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
|
||||