Skip to content

Commit

Permalink
add tutoring page
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrecasal
andrecasal committed Jul 20, 2023
1 parent 3409d97 commit c92039a
Show file tree
Hide file tree
Showing 24 changed files with 868 additions and 100 deletions.
90 changes: 64 additions & 26 deletions app/components/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,23 +67,31 @@ const navigation = {
],
sitemap: [
{ name: 'Tips', href: '/tips' },
{ name: 'Shorts', href: '/shorts' },
{ name: 'Articles', href: '/articles' },
{ name: 'Talks', href: '/talks' },
{ name: 'Courses', href: '/courses' },
{ name: 'Mentoring', href: '/mentorship' },
{ name: 'About', href: '/about' },
{ name: 'Uses', href: '/uses' },
{ name: 'Transparency', href: '/transparency' },
],
courses: [{ name: 'Mastery for VS Code', href: '/courses/mastery-for-vs-code' }],
legal: [
{ name: 'Privacy', href: '/privacy' },
{ name: 'Terms', href: '/terms' },
],
}

const Footer = () => {
return (
<footer aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<Container>
<Container className="mt-12 sm:mt-36">
<footer aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="mt-8 border-t border-muted-900/10 pb-8 pt-8 sm:mt-12 sm:pt-12 lg:mt-16 lg:pt-16">
<div className="md:grid md:grid-cols-3 md:gap-8">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div className="space-y-8">
<Text heading="h2" size="2xl" className="font-semibold tracking-normal">
André Casal
Expand All @@ -100,24 +108,54 @@ const Footer = () => {
))}
</div>
</div>
<div className="mt-16 grid grid-cols-2 gap-8 md:col-span-2 md:mt-0">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<Text heading="h3" size="sm" className="font-semibold tracking-normal text-muted-900">
Sitemap
</Text>
<ul className="mt-6 space-y-4">
{navigation.sitemap.map(item => (
<Text key={item.name} size="sm" asChild>
<li>
<a href={item.href} className="text-size-sm text-muted-600 hover:text-muted-900">
{item.name}
</a>
</li>
</Text>
))}
</ul>
</div>
<div className="mt-16 grid grid-cols-3 gap-8 xl:col-span-2 xl:mt-0">
<div>
<Text heading="h3" size="sm" className="font-semibold tracking-normal text-muted-900">
Sitemap
</Text>
<ul className="mt-6 space-y-4">
{navigation.sitemap.map(item => (
<Text key={item.name} size="sm" asChild>
<li>
<a href={item.href} className="text-size-sm text-muted-600 hover:text-muted-900">
{item.name}
</a>
</li>
</Text>
))}
</ul>
</div>
<div className="mt-10 md:mt-0">
<Text heading="h3" size="sm" className="font-semibold tracking-normal text-muted-900">
Courses
</Text>
<ul className="mt-6 space-y-4">
{navigation.courses.map(item => (
<Text key={item.name} size="sm" asChild>
<li>
<a href={item.href} className="text-size-sm text-muted-600 hover:text-muted-900">
{item.name}
</a>
</li>
</Text>
))}
</ul>
</div>
<div className="mt-10 md:mt-0">
<Text heading="h3" size="sm" className="font-semibold tracking-normal text-muted-900">
Legal
</Text>
<ul className="mt-6 space-y-4">
{navigation.legal.map(item => (
<Text key={item.name} size="sm" asChild>
<li>
<a href={item.href} className="text-size-sm text-muted-600 hover:text-muted-900">
{item.name}
</a>
</li>
</Text>
))}
</ul>
</div>
</div>
</div>
Expand All @@ -127,8 +165,8 @@ const Footer = () => {
</Text>
</div>
</div>
</Container>
</footer>
</footer>
</Container>
)
}

Expand Down
108 changes: 42 additions & 66 deletions app/components/newsletter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,80 +3,56 @@ import { Text } from '~/components/ui/text.tsx'
import { Icon } from '~/components/ui/icon.tsx'
import { Input } from '~/components/ui/input.tsx'
import { Label } from '~/components/ui/label.tsx'
import { cn } from '~/utils/misc.ts'

const Newsletter = ({ title, description }: { title: string; description: string }) => {
const Newsletter = ({ className, title, description }: { className?: string; title: string; description: string }) => {
return (
<>
<div className="flex flex-col justify-between">
<Text heading="h2" size="3xl" className="sm:text-size-4xl">
{title}
</Text>
<Text size="lg" className="mt-4 text-muted-400">
{description}
</Text>
<div className="mt-6 flex gap-x-4 rounded-lg border bg-muted-50 p-4">
<div>
<Icon name="person" size="xl" className="mt-1 rounded-full bg-muted-100" />
</div>
<div className="flex flex-col gap-y-4">
<blockquote>
<Text size="xl">
<q>I thought the website was good. But the newsletter? Even better!</q>
</Text>
</blockquote>
<Text size="md">Zayd Flanegan, CTO at TimeTable</Text>
</div>
</div>
<div className="flex flex-col gap-y-4">
<div className="mt-6 flex gap-x-4">
<Label htmlFor="name" className="sr-only">
Name
</Label>
<Input id="name" name="name" type="text" required placeholder="Enter your name" />
<Label htmlFor="email-address" className="sr-only">
Email address
</Label>
<Input id="email-address" name="email" type="email" autoComplete="email" required placeholder="Enter your email" />
</div>
<Button type="submit">I want my gold</Button>
</div>
</div>
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
{/* <dl className="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-3 lg:pt-2">
<div className="flex flex-col items-start">
<div className="rounded-md bg-muted-50 p-2 ring-1 ring-muted-100">
<Icon name="bolt" className="h-6 w-6" aria-hidden="true" />
</div>
<Text size="md" asChild>
<dt className="mt-4 font-semibold">Optimal solutions</dt>
<div className={cn('mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2', className)}>
<div className="flex flex-col justify-between">
<Text heading="h2" size="3xl" className="sm:text-size-4xl">
{title}
</Text>
<Text size="md" asChild>
<dd className="mt-2 text-muted-600">Learn about the best solutions and alternatives to common problems.</dd>
<Text size="lg" className="mt-4 text-muted-400">
{description}
</Text>
</div>
<div className="flex flex-col items-start">
<div className="rounded-md bg-muted-50 p-2 ring-1 ring-muted-100">
<Icon name="code" className="h-6 w-6" aria-hidden="true" />
<div className="flex flex-col gap-y-4">
<div className="mt-6 flex gap-x-4">
<Label htmlFor="name" className="sr-only">
Name
</Label>
<Input id="name" name="name" type="text" required placeholder="Enter your name" />
<Label htmlFor="email-address" className="sr-only">
Email address
</Label>
<Input id="email-address" name="email" type="email" autoComplete="email" required placeholder="Enter your email" />
</div>
<Button type="submit">I want my tips</Button>
</div>
<Text size="md" asChild>
<dt className="mt-4 font-semibold">Real code</dt>
</Text>
<Text size="md" asChild>
<dd className="mt-2 text-muted-600">I provide you with useful code you can copy+paste.</dd>
</Text>
</div>
<div className="flex flex-col items-start">
<div className="rounded-md bg-muted-50 p-2 ring-1 ring-muted-100">
<Icon name="bell" className="h-6 w-6" aria-hidden="true" />
</div>
<Text size="md" asChild>
<dt className="mt-4 font-semibold">Stay notified</dt>
</Text>
<Text size="md" asChild>
<dd className="mt-2 text-muted-600">Stay updated with the latest insights in full-stack web dev.</dd>
</Text>
<div className="space-y-8 xl:contents xl:space-y-0">
<figure className="col-span-2 hidden sm:block sm:rounded-2xl sm:bg-white sm:shadow-lg sm:ring-1 sm:ring-muted-900/5 xl:col-start-2 xl:row-end-1">
<blockquote className="p-12 text-xl font-semibold leading-8 tracking-tight text-muted-900">
<p>“I thought the website was good. But the newsletter? Even better!”</p>
</blockquote>
<figcaption className="flex items-center gap-x-4 border-t border-muted-900/10 px-6 py-4">
{/* <img
className="h-10 w-10 flex-none rounded-full bg-muted-50"
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=1024&amp;h=1024&amp;q=80"
alt=""
/> */}
<Icon name="person" className="h-10 w-10 flex-none rounded-full bg-muted-50" />
<div className="flex-auto">
<Text size="sm" className="font-semibold">
Zayd Flanegan
</Text>
<Text size="sm" className="text-muted-600">
@zaydflanegan
</Text>
</div>
</figcaption>
</figure>
</div>
</dl> */}
</div>
</>
)
Expand Down
8 changes: 8 additions & 0 deletions app/components/ui/icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions app/components/ui/icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export type IconName =
| "bug"
| "camera"
| "chart-bar"
| "chat"
| "check"
| "chevron-down"
| "chevron-right"
Expand Down Expand Up @@ -106,9 +107,11 @@ export type IconName =
| "presentation-chart-line"
| "presentation-chart"
| "rocket"
| "star"
| "sun"
| "swatch"
| "trash"
| "trophy"
| "tsx"
| "video"
| "x-mark"
10 changes: 8 additions & 2 deletions app/routes/_marketing+/articles.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Link, useLoaderData } from '@remix-run/react'
import { Container } from '../../components/ui/container.tsx'
import Newsletter from './components/newsletter.tsx'
import { Newsletter } from '~/components/newsletter.tsx'
import BackgroundBlur from './components/bg-blur.tsx'
import { ArticlePreview } from '~/components/ArticlePreview.tsx'
import { Button } from '~/components/ui/button.tsx'
Expand Down Expand Up @@ -107,7 +107,13 @@ const Blog = () => {
</div>
</Container>
</BackgroundBlur>
<Newsletter />
<Container>
<Newsletter
className="relative isolate mt-32 sm:mt-56"
title="Get exclusive articles that I only share with email subscribers"
description="Golden nuggets of in-depth code knowledge. Delivered to your inbox every 2 weeks."
/>
</Container>
</>
)
}
Expand Down
2 changes: 1 addition & 1 deletion app/routes/_marketing+/courses+/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Container } from '~/components/ui/container.tsx'
import { Text } from '~/components/ui/text.tsx'
import { CoursePresentation } from '~/components/CoursePresentation.tsx'
import Newsletter from '../components/newsletter.tsx'
import Newsletter from '../newsletter.tsx'

const Courses = () => {
const courses = [
Expand Down
Binary file added app/routes/_marketing+/images/andre-on-macbook-pro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/routes/_marketing+/images/college-life.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/routes/_marketing+/images/goncalo-barreiros.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/routes/_marketing+/images/miguel-ferreira.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/routes/_marketing+/images/paulo-jorge.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/routes/_marketing+/images/satisfaction-guarantee.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/routes/_marketing+/images/signature.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 6 additions & 4 deletions app/routes/_marketing+/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import type { LinksFunction, V2_MetaFunction } from '@remix-run/node'
import HeroAndre from './components/hero-andre.tsx'
import Brands from './components/brands.tsx'
import Newsletter from './components/newsletter.tsx'
import { Newsletter } from '~/components/newsletter.tsx'
import { Container } from '~/components/ui/container.tsx'
import { Icon } from '~/components/ui/icon.tsx'
import { Text } from '~/components/ui/text.tsx'
import { Spacer } from '~/components/spacer.tsx'
import { Link } from '@remix-run/react'

export const links: LinksFunction = () => {
Expand Down Expand Up @@ -88,9 +87,12 @@ export default function Index() {
</dl>
</div>
</div>
<Newsletter
className="mt-32 sm:mt-56"
title="Get exclusive web dev tips that I only share with email subscribers"
description="Golden nuggets of code knowledge you can read in 5 minutes. Delivered to your inbox every 2 weeks."
/>
</Container>
<Newsletter />
<Spacer size="2xl" />
</>
)
}
2 changes: 1 addition & 1 deletion ...tes/_marketing+/components/newsletter.tsx → app/routes/_marketing+/newsletter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const Newsletter = () => {
<Container className="relative isolate mt-32 sm:mt-56">
<NewsletterComponent
title="Get exclusive web dev tips that I only share with email subscribers"
description="Golden nuggets of knowledge you can read in 5 min. Delivered to your inbox every 2 weeks."
description="Golden nuggets of code knowledge you can read in 5 minutes. Delivered to your inbox every 2 weeks."
/>
</Container>
)
Expand Down
11 changes: 11 additions & 0 deletions app/routes/_marketing+/privacy.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Container } from '~/components/ui/container.tsx'

const Privacy = () => {
return (
<Container>
<p>Privacy</p>
</Container>
)
}

export default Privacy
Loading

0 comments on commit c92039a

Please sign in to comment.