diff --git a/apps/portal/src/components/offers/OffersNavigation.ts b/apps/portal/src/components/offers/OffersNavigation.ts index c1ae24e1..68f84113 100644 --- a/apps/portal/src/components/offers/OffersNavigation.ts +++ b/apps/portal/src/components/offers/OffersNavigation.ts @@ -1,8 +1,8 @@ import type { ProductNavigationItems } from '~/components/global/ProductNavigation'; const navigation: ProductNavigationItems = [ - { href: '/offers/browse', name: 'Browse all offers' }, { href: '/offers/submit', name: 'Analyze your offers' }, + { href: '/offers/features', name: 'Features' }, ]; const config = { diff --git a/apps/portal/src/components/offers/landing/LeftTextCard.tsx b/apps/portal/src/components/offers/landing/LeftTextCard.tsx index 329a58f5..b4fac765 100644 --- a/apps/portal/src/components/offers/landing/LeftTextCard.tsx +++ b/apps/portal/src/components/offers/landing/LeftTextCard.tsx @@ -1,3 +1,5 @@ +import type { StaticImageData } from 'next/image'; +import Image from 'next/image'; import type { ReactNode } from 'react'; import { HOME_URL } from '~/components/offers/types'; @@ -6,7 +8,7 @@ type LeftTextCardProps = Readonly<{ description: string; icon: ReactNode; imageAlt: string; - imageSrc: string; + imageSrc: StaticImageData; title: string; }>; @@ -18,7 +20,7 @@ export default function LeftTextCard({ title, }: LeftTextCardProps) { return ( -
+
@@ -42,10 +44,10 @@ export default function LeftTextCard({
-
- + {imageAlt}
diff --git a/apps/portal/src/components/offers/landing/RightTextCard.tsx b/apps/portal/src/components/offers/landing/RightTextCard.tsx index 9028ad16..9ca0f949 100644 --- a/apps/portal/src/components/offers/landing/RightTextCard.tsx +++ b/apps/portal/src/components/offers/landing/RightTextCard.tsx @@ -1,3 +1,5 @@ +import type { StaticImageData } from 'next/image'; +import Image from 'next/image'; import type { ReactNode } from 'react'; import { HOME_URL } from '~/components/offers/types'; @@ -6,7 +8,7 @@ type RightTextCarddProps = Readonly<{ description: string; icon: ReactNode; imageAlt: string; - imageSrc: string; + imageSrc: StaticImageData; title: string; }>; @@ -18,7 +20,7 @@ export default function RightTextCard({ title, }: RightTextCarddProps) { return ( -
+
@@ -42,10 +44,10 @@ export default function RightTextCard({
-
- + {imageAlt}
diff --git a/apps/portal/src/components/offers/landing/images/offers-analysis.png b/apps/portal/src/components/offers/landing/images/offers-analysis.png new file mode 100644 index 00000000..896c23f7 Binary files /dev/null and b/apps/portal/src/components/offers/landing/images/offers-analysis.png differ diff --git a/apps/portal/src/components/offers/landing/images/offers-browse.png b/apps/portal/src/components/offers/landing/images/offers-browse.png new file mode 100644 index 00000000..09968721 Binary files /dev/null and b/apps/portal/src/components/offers/landing/images/offers-browse.png differ diff --git a/apps/portal/src/components/offers/landing/images/offers-profile.png b/apps/portal/src/components/offers/landing/images/offers-profile.png new file mode 100644 index 00000000..e47af859 Binary files /dev/null and b/apps/portal/src/components/offers/landing/images/offers-profile.png differ diff --git a/apps/portal/src/components/offers/types.ts b/apps/portal/src/components/offers/types.ts index c09b8da2..59704f33 100644 --- a/apps/portal/src/components/offers/types.ts +++ b/apps/portal/src/components/offers/types.ts @@ -2,7 +2,7 @@ import type { JobType } from '@prisma/client'; import type { MonthYear } from '~/components/shared/MonthYearPicker'; -export const HOME_URL = '/offers/browse'; +export const HOME_URL = '/offers'; /* * Offer Profile diff --git a/apps/portal/src/pages/offers/browse.tsx b/apps/portal/src/pages/offers/browse.tsx deleted file mode 100644 index dbfe6323..00000000 --- a/apps/portal/src/pages/offers/browse.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import Link from 'next/link'; -import { useState } from 'react'; -import { Banner } from '@tih/ui'; - -import OffersTable from '~/components/offers/table/OffersTable'; -import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead'; -import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead'; - -export default function OffersHomePage() { - const [jobTitleFilter, setjobTitleFilter] = useState('software-engineer'); - const [companyFilter, setCompanyFilter] = useState(''); - - return ( -
- - ⭐ Check if your offer is competitive by submitting it{' '} - - here - - . ⭐ - -
-
-
-

- Tech Offers Repo -

-
-
- Find out how good your offer is. Discover how others got their - offers. -
-
-
- Viewing offers for -
- setjobTitleFilter(value)} - /> - in - setCompanyFilter(value)} - /> -
-
-
-
- -
-
- ); -} diff --git a/apps/portal/src/pages/offers/features.tsx b/apps/portal/src/pages/offers/features.tsx new file mode 100644 index 00000000..be5f06ac --- /dev/null +++ b/apps/portal/src/pages/offers/features.tsx @@ -0,0 +1,246 @@ +import type { SVGProps } from 'react'; +import { + BookmarkSquareIcon, + ChartBarSquareIcon, + InformationCircleIcon, + ShareIcon, + TableCellsIcon, + UsersIcon, +} from '@heroicons/react/24/outline'; + +import offersAnalysis from '~/components/offers/landing/images/offers-analysis.png'; +import offersBrowse from '~/components/offers/landing/images/offers-browse.png'; +import offersProfile from '~/components/offers/landing/images/offers-profile.png'; +import LeftTextCard from '~/components/offers/landing/LeftTextCard'; +import RightTextCard from '~/components/offers/landing/RightTextCard'; +import { HOME_URL } from '~/components/offers/types'; + +const features = [ + { + description: + 'Profile names are randomly generated to keep your offers strictly anonymous.', + icon: UsersIcon, + name: 'Anonymized Profile Name', + }, + { + description: + 'Only users with the edit link can edit that profile. Share profiles to others using a public link without giving edit permission.', + icon: ShareIcon, + name: 'Edit Link v.s. Public Link', + }, + { + description: + "Offer profiles will not be automatically saved under creators' account in our database unless explicit permission is given.", + icon: BookmarkSquareIcon, + name: 'Save with Permission', + }, +]; + +const footerNavigation = { + social: [ + { + href: '#', + icon: (props: JSX.IntrinsicAttributes & SVGProps) => ( + + + + ), + name: 'Facebook', + }, + { + href: '#', + icon: (props: JSX.IntrinsicAttributes & SVGProps) => ( + + + + ), + name: 'Instagram', + }, + { + href: 'https://github.com/yangshun/tech-interview-handbook', + icon: (props: JSX.IntrinsicAttributes & SVGProps) => ( + + + + ), + name: 'GitHub', + }, + ], +}; + +export default function LandingPage() { + return ( +
+
+ {/* Hero section */} +
+
+

+ Choosing offers + + made easier + +

+

+ Analyze your offers using profiles from fellow software engineers. +

+ +
+
+ + {/* Alternating Feature Sections */} +
+ + + {/* Gradient Feature Section */} +
+
+

+ Your privacy is our priority. +

+

+ All offer profiles are anonymized and we do not store information + about your personal identity. +

+
+ {features.map((feature) => ( +
+
+ + +
+
+

+ {feature.name} +

+

+ {feature.description} +

+
+
+ ))} +
+
+
+ + {/* CTA Section */} +
+
+

+ Ready to get started? + + Create your own offer profile today. + +

+ +
+
+
+ +
+ +
+
+
+ {footerNavigation.social.map((item) => ( + + {item.name} + + ))} +
+

+ © 2022 Tech Offers Repo. All rights reserved. +

+
+
+
+
+ ); +} diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx index 75471156..dbfe6323 100644 --- a/apps/portal/src/pages/offers/index.tsx +++ b/apps/portal/src/pages/offers/index.tsx @@ -1,244 +1,59 @@ -import type { SVGProps } from 'react'; -import { - BookmarkSquareIcon, - ChartBarSquareIcon, - InformationCircleIcon, - ShareIcon, - TableCellsIcon, - UsersIcon, -} from '@heroicons/react/24/outline'; +import Link from 'next/link'; +import { useState } from 'react'; +import { Banner } from '@tih/ui'; -import LeftTextCard from '~/components/offers/landing/LeftTextCard'; -import RightTextCard from '~/components/offers/landing/RightTextCard'; -import { HOME_URL } from '~/components/offers/types'; +import OffersTable from '~/components/offers/table/OffersTable'; +import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead'; +import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead'; -const features = [ - { - description: - 'Profile names are randomly generated to keep your offers strictly anonymous.', - icon: UsersIcon, - name: 'Anonymized Profile Name', - }, - { - description: - 'Only users with the edit link can edit that profile. Share profiles to others using a public link without giving edit permission.', - icon: ShareIcon, - name: 'Edit Link v.s. Public Link', - }, - { - description: - "Offer profiles will not be automatically saved under creators' account in our database unless explicit permission is given.", - icon: BookmarkSquareIcon, - name: 'Save with Permission', - }, -]; +export default function OffersHomePage() { + const [jobTitleFilter, setjobTitleFilter] = useState('software-engineer'); + const [companyFilter, setCompanyFilter] = useState(''); -const footerNavigation = { - social: [ - { - href: '#', - icon: (props: JSX.IntrinsicAttributes & SVGProps) => ( - - - - ), - name: 'Facebook', - }, - { - href: '#', - icon: (props: JSX.IntrinsicAttributes & SVGProps) => ( - - - - ), - name: 'Instagram', - }, - { - href: 'https://github.com/yangshun/tech-interview-handbook', - icon: (props: JSX.IntrinsicAttributes & SVGProps) => ( - - - - ), - name: 'GitHub', - }, - ], -}; - -export default function LandingPage() { return ( -
-
- {/* Hero section */} -
-
-

- Choosing offers - - made easier - +
+ + ⭐ Check if your offer is competitive by submitting it{' '} + + here + + . ⭐ + +
+
+
+

+ Tech Offers Repo

-

- Analyze your offers using profiles from fellow software engineers. -

-
-
- - {/* Alternating Feature Sections */} -
-
- -
- -
-
-
- {footerNavigation.social.map((item) => ( - - {item.name} - - ))} -
-

- © 2022 Tech Interview Handbook Offer Profile Repository. All - rights reserved. -

-
-
-
-

+
+
+ +
+
); }