redirect /ui to verveui.pro

app/components/ArticlePreview.tsx

@@ -1,7 +1,7 @@
 import { type Post } from '~/routes/_marketing+/articles/_index.tsx'
 import { Badge } from './ui/badge.tsx'
-import { H3 } from '~/routes/_marketing+/ui+/components/typography/h3.tsx'
-import { P } from '~/routes/_marketing+/ui+/components/typography/p.tsx'
+import { H3 } from '~/ui_components/typography/h3.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 export const ArticlePreview = ({ post }: { post: Post }) => {
 	return (

app/components/CoursePresentation.tsx

@@ -1,9 +1,9 @@
 import { Button } from './ui/button.tsx'
 import { Link } from '@remix-run/react'
 import { Icon } from './ui/icon.tsx'
-import { H2 } from '~/routes/_marketing+/ui+/components/typography/h2.tsx'
-import { P } from '~/routes/_marketing+/ui+/components/typography/p.tsx'
-import { Span } from '~/routes/_marketing+/ui+/components/typography/span.tsx'
+import { H2 } from '~/ui_components/typography/h2.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
+import { Span } from '~/ui_components/typography/span.tsx'
 
 export const CoursePresentation = ({
 	course: {

app/components/error-boundary.tsx

@@ -1,8 +1,8 @@
 import { isRouteErrorResponse, useParams, useRouteError } from '@remix-run/react'
 import { type ErrorResponse } from '@remix-run/router'
-import { Container } from '~/routes/_marketing+/ui+/components/layout/container.tsx'
-import { P } from '~/routes/_marketing+/ui+/components/typography/p.tsx'
 import { getErrorMessage } from '~/utils/misc.ts'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 type StatusHandler = (info: { error: ErrorResponse; params: Record<string, string | undefined> }) => JSX.Element | null
 

app/components/footer.tsx

@@ -1,8 +1,8 @@
-import { Container } from '~/routes/_marketing+/ui+/components/layout/container.tsx'
-import { H2 } from '~/routes/_marketing+/ui+/components/typography/h2.tsx'
-import { H3 } from '~/routes/_marketing+/ui+/components/typography/h3.tsx'
-import { P } from '~/routes/_marketing+/ui+/components/typography/p.tsx'
-import { Span } from '~/routes/_marketing+/ui+/components/typography/span.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { H2 } from '~/ui_components/typography/h2.tsx'
+import { H3 } from '~/ui_components/typography/h3.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
+import { Span } from '~/ui_components/typography/span.tsx'
 
 const navigation = {
 	social: [

app/components/header.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useRef, useState } from 'react'
-import { Container } from '~/routes/_marketing+/ui+/components/layout/container.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
 import { Dialog, DialogTrigger, DialogContent, DialogClose } from '~/components/ui/dialog.tsx'
 import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuContent } from '~/components/ui/navigation-menu.tsx'
 import { Separator } from '~/components/ui/separator.tsx'
@@ -65,7 +65,7 @@ export default function Header() {
 														to={href}
 														className="relative block after:absolute after:bottom-0 after:left-0 after:right-0 after:block after:h-0.5 after:max-w-0 after:bg-foreground after:transition-max-width after:duration-500 aria-[current]:after:max-w-full"
 													>
-														{name} {external ? <Icon name="paper-plane" className="h-4 w-4 inline-block -mt-1" /> : null}
+														{name} {external ? <Icon name="paper-plane" className="-mt-1 inline-block h-4 w-4" /> : null}
 													</NavLink>
 												</NavigationMenuLink>
 											</NavigationMenuItem>

app/components/newsletter.tsx

@@ -7,15 +7,15 @@ import { type action, newsletterSchema } from '~/routes/_marketing+/newsletter.t
 import { parse } from '@conform-to/zod'
 import { cn } from '~/utils/tailwind-merge.ts'
 import guide from '~/routes/_marketing+/images/guide-to-modern-full-stack-web-dev.png'
-import { H2 } from '~/routes/_marketing+/ui+/components/typography/h2.tsx'
-import { P } from '~/routes/_marketing+/ui+/components/typography/p.tsx'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import { Player } from '@lottiefiles/react-lottie-player'
 import * as newsletterAnimation from '~/components/newsletter-animation.json'
 import { useEffect, useRef, useState } from 'react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
-import { Flex } from '~/routes/_marketing+/ui+/components/layout/flex.tsx'
+import { H2 } from '~/ui_components/typography/h2.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
+import { Flex } from '~/ui_components/layout/flex.tsx'
 
 type NewsletterProps = {
 	className?: string

app/components/ui/toast.tsx

@@ -5,7 +5,7 @@ import cg from 'classgroup'
 import { cn } from '~/utils/tailwind-merge.ts'
 import { Icon } from './icon.tsx'
 import { Button } from './button.tsx'
-import { P } from '~/routes/_marketing+/ui+/components/typography/p.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 const ToastProvider = ToastPrimitives.Provider
 

app/routes/_auth+/forgot-password/index.tsx

@@ -12,9 +12,9 @@ import { getDomainUrl } from '~/utils/misc.ts'
 import { generateTOTP } from '~/utils/totp.server.ts'
 import { emailSchema, usernameSchema } from '~/utils/user-validation.ts'
 import { ForgotPasswordEmail } from './email.server.tsx'
-import { Container } from '~/routes/_marketing+/ui+/components/layout/container.tsx'
-import { H1 } from '~/routes/_marketing+/ui+/components/typography/h1.tsx'
-import { P } from '~/routes/_marketing+/ui+/components/typography/p.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 export const forgotPasswordOTPQueryParam = 'code'
 export const forgotPasswordTargetQueryParam = 'usernameOrEmail'

app/routes/_auth+/forgot-password_.verify.tsx

@@ -13,9 +13,9 @@ import { resetPasswordUsernameSessionKey } from './reset-password.tsx'
 import { verifyTOTP } from '~/utils/totp.server.ts'
 import invariant from 'tiny-invariant'
 import { StatusButton } from '~/components/ui/status-button.tsx'
-import { Container } from '../_marketing+/ui+/components/layout/container.tsx'
-import { H1 } from '../_marketing+/ui+/components/typography/h1.tsx'
-import { P } from '../_marketing+/ui+/components/typography/p.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 const verifySchema = z.object({
 	[forgotPasswordTargetQueryParam]: z.union([emailSchema, usernameSchema]),

app/routes/_auth+/login.tsx

@@ -6,8 +6,8 @@ import { authenticator, requireAnonymous } from '~/utils/auth.server.ts'
 import { commitSession, getSession } from '~/utils/session.server.ts'
 import { InlineLogin } from '../resources+/login.tsx'
 import { Verifier, unverifiedSessionKey } from '../resources+/verify.tsx'
-import { H1 } from '../_marketing+/ui+/components/typography/h1.tsx'
-import { P } from '../_marketing+/ui+/components/typography/p.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 export async function loader({ request }: DataFunctionArgs) {
 	await requireAnonymous(request)

app/routes/_auth+/onboarding.tsx

@@ -12,9 +12,9 @@ import { commitSession, getSession } from '~/utils/session.server.ts'
 import { nameSchema, passwordSchema, usernameSchema } from '~/utils/user-validation.ts'
 import { checkboxSchema } from '~/utils/zod-extensions.ts'
 import { redirectWithConfetti } from '~/utils/flash-session.server.ts'
-import { Container } from '../_marketing+/ui+/components/layout/container.tsx'
-import { H1 } from '../_marketing+/ui+/components/typography/h1.tsx'
-import { P } from '../_marketing+/ui+/components/typography/p.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 export const onboardingEmailSessionKey = 'onboardingEmail'
 

app/routes/_auth+/reset-password.tsx

@@ -9,9 +9,9 @@ import { StatusButton } from '~/components/ui/status-button.tsx'
 import { authenticator, requireAnonymous, resetUserPassword } from '~/utils/auth.server.ts'
 import { commitSession, getSession } from '~/utils/session.server.ts'
 import { passwordSchema } from '~/utils/user-validation.ts'
-import { Container } from '../_marketing+/ui+/components/layout/container.tsx'
-import { H1 } from '../_marketing+/ui+/components/typography/h1.tsx'
-import { P } from '../_marketing+/ui+/components/typography/p.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 export const resetPasswordUsernameSessionKey = 'resetPasswordUsername'
 

app/routes/_auth+/signup/index.tsx

@@ -12,9 +12,9 @@ import { getDomainUrl } from '~/utils/misc.ts'
 import { generateTOTP } from '~/utils/totp.server.ts'
 import { emailSchema } from '~/utils/user-validation.ts'
 import { SignupEmail } from './email.server.tsx'
-import { Container } from '~/routes/_marketing+/ui+/components/layout/container.tsx'
-import { H1 } from '~/routes/_marketing+/ui+/components/typography/h1.tsx'
-import { P } from '~/routes/_marketing+/ui+/components/typography/p.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 export const onboardingOTPQueryParam = 'code'
 export const onboardingEmailQueryParam = 'email'

app/routes/_auth+/signup_.verify.tsx

@@ -10,9 +10,9 @@ import { commitSession, getSession } from '~/utils/session.server.ts'
 import { verifyTOTP } from '~/utils/totp.server.ts'
 import { onboardingEmailSessionKey } from './onboarding.tsx'
 import { onboardingEmailQueryParam, onboardingOTPQueryParam, verificationType } from './signup/index.tsx'
-import { Container } from '../_marketing+/ui+/components/layout/container.tsx'
-import { H1 } from '../_marketing+/ui+/components/typography/h1.tsx'
-import { P } from '../_marketing+/ui+/components/typography/p.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 const verifySchema = z.object({
 	[onboardingEmailQueryParam]: z.string().email(),

app/routes/_marketing+/about.tsx

@@ -1,8 +1,8 @@
-import { Container } from '~/routes/_marketing+/ui+/components/layout/container.tsx'
 import HeroAndre from './components/hero-andre.tsx'
-import { H2 } from './ui+/components/typography/h2.tsx'
-import { P } from './ui+/components/typography/p.tsx'
 import { type LinksFunction } from '@remix-run/node'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { H2 } from '~/ui_components/typography/h2.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 export const links: LinksFunction = () => {
 	return [{ rel: 'canonical', href: 'https://andrecasal.com/about' }]

app/routes/_marketing+/articles/_index.tsx

@@ -1,19 +1,18 @@
 import { useLoaderData } from '@remix-run/react'
-import { Container } from '~/routes/_marketing+/ui+/components/layout/container.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'
 import { useState } from 'react'
 import { type LinksFunction, json } from '@remix-run/node'
-import { H1 } from '../ui+/components/typography/h1.tsx'
-
 /* import { post as layout } from './layout/index.tsx' */
 import { post as theDarkSideOfTheGridPost } from './the-dark-side-of-the-grid/index.tsx'
 import { post as fluidSpacePost } from './fluid-space-sizing/index.tsx'
 import { post as fluidTypographyPost } from './fluid-typography-sizing-with-modular-scales/index.tsx'
 import { post as remixDataFlowPost } from './remix-data-flow/index.tsx'
-import { P } from '../ui+/components/typography/p.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 export const links: LinksFunction = () => {
 	return [{ rel: 'canonical', href: 'https://andrecasal.com/articles' }]

app/routes/_marketing+/articles/fluid-space-sizing/index.tsx

@@ -1,11 +1,11 @@
 import fluidSpaceSizingImage from './fluid-space-sizing.png'
 import { Link } from '@remix-run/react'
-import { Kbd } from '../../ui+/components/typography/kbd.tsx'
 import { type Post } from '../_index.tsx'
-import { H1 } from '../../ui+/components/typography/h1.tsx'
-import { H2 } from '../../ui+/components/typography/h2.tsx'
-import { P } from '../../ui+/components/typography/p.tsx'
 import { type LinksFunction } from '@remix-run/node'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { H2 } from '~/ui_components/typography/h2.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
+import { Kbd } from '~/ui_components/typography/kbd.tsx'
 
 export const post: Post = {
 	title: 'Fluid Space Sizing',

app/routes/_marketing+/articles/fluid-typography-sizing-with-modular-scales/index.tsx

@@ -2,10 +2,10 @@ import { CodeBlock } from '~/components/ui/code-block.tsx'
 import fluidTypographySizingWithModularScales from './fluid-typography.png'
 import { type CSSProperties } from 'react'
 import { type Post } from '../_index.tsx'
-import { H1 } from '../../ui+/components/typography/h1.tsx'
-import { H2 } from '../../ui+/components/typography/h2.tsx'
-import { P } from '../../ui+/components/typography/p.tsx'
 import { type LinksFunction } from '@remix-run/node'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
+import { H2 } from '~/ui_components/typography/h2.tsx'
 
 export const post: Post = {
 	title: 'Fluid Typography Sizing and Scales',

app/routes/_marketing+/articles/index.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from '@remix-run/react'
 import { Newsletter } from '~/components/newsletter.tsx'
-import { Container } from '~/routes/_marketing+/ui+/components/layout/container.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
 
 const ArticlesLayoutRoute = () => {
 	return (

app/routes/_marketing+/articles/layout/index.tsx

@@ -1,13 +1,13 @@
 import layout from './layout.png'
 import { type Post } from '../_index.tsx'
-import { H1 } from '../../ui+/components/typography/h1.tsx'
-import { H2 } from '../../ui+/components/typography/h2.tsx'
-import { P } from '../../ui+/components/typography/p.tsx'
-import { H3 } from '../../ui+/components/typography/h3.tsx'
-import { Code } from '../../ui+/components/typography/code.tsx'
-import { H4 } from '../../ui+/components/typography/h4.tsx'
 import { CodeBlock } from '~/components/ui/code-block.tsx'
 import { type LinksFunction } from '@remix-run/node'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
+import { H2 } from '~/ui_components/typography/h2.tsx'
+import { H3 } from '~/ui_components/typography/h3.tsx'
+import { H4 } from '~/ui_components/typography/h4.tsx'
+import { Code } from '~/ui_components/typography/code.tsx'
 
 export const post: Post = {
 	title: 'CSS Layout Algorithms',

app/routes/_marketing+/articles/quotes/index.tsx

@@ -1,7 +1,7 @@
 import theDarkSideOfTheGrid from './the-dark-side-of-the-grid.png'
-import { H1 } from '../../ui+/components/typography/h1.tsx'
-import { H2 } from '../../ui+/components/typography/h2.tsx'
-import { P } from '../../ui+/components/typography/p.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
+import { H2 } from '~/ui_components/typography/h2.tsx'
 
 export const title = 'Quotes'
 export const description =

app/routes/_marketing+/articles/remix-data-flow/index.tsx

@@ -2,8 +2,8 @@ import remixDataFlow from './remix-data-flow.png'
 import remixDataFlowDiagram from './remix-data-flow-diagram.png'
 import { type LinksFunction, type V2_MetaFunction } from '@remix-run/node'
 import { type Post } from '../_index.tsx'
-import { H1 } from '../../ui+/components/typography/h1.tsx'
-import { P } from '../../ui+/components/typography/p.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 export const post: Post = {
 	title: 'Remix Data Flow',

app/routes/_marketing+/articles/the-dark-side-of-the-grid/index.tsx

@@ -1,12 +1,12 @@
 import theDarkSideOfTheGrid from './the-dark-side-of-the-grid.png'
 import { Link } from '@remix-run/react'
-import { Kbd } from '../../ui+/components/typography/kbd.tsx'
 import { CodeBlock } from '~/components/ui/code-block.tsx'
 import { type Post } from '../_index.tsx'
-import { H1 } from '../../ui+/components/typography/h1.tsx'
-import { H2 } from '../../ui+/components/typography/h2.tsx'
-import { P } from '../../ui+/components/typography/p.tsx'
 import { type LinksFunction } from '@remix-run/node'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
+import { H2 } from '~/ui_components/typography/h2.tsx'
+import { Kbd } from '~/ui_components/typography/kbd.tsx'
 
 export const post: Post = {
 	title: 'The Dark Side Of The Grid (and Flexbox)',

app/routes/_marketing+/components/brands.tsx

@@ -1,8 +1,8 @@
 import DiamondBackground from './bg-diamonds.tsx'
-import { Container } from '~/routes/_marketing+/ui+/components/layout/container.tsx'
 import { trusted } from '../logos/logos.ts'
-import { H2 } from '../ui+/components/typography/h2.tsx'
-import { P } from '../ui+/components/typography/p.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
+import { H2 } from '~/ui_components/typography/h2.tsx'
 
 const Brands = () => {
 	return (

app/routes/_marketing+/components/hero-andre.tsx

@@ -1,10 +1,10 @@
 import { Link } from '@remix-run/react'
 import BackgroundDiagonal from './bg-diagonal.tsx'
-import { Container } from '~/routes/_marketing+/ui+/components/layout/container.tsx'
 import { Button } from '~/components/ui/button.tsx'
 import { Badge } from '~/components/ui/badge.tsx'
-import { H1 } from '../ui+/components/typography/h1.tsx'
-import { P } from '../ui+/components/typography/p.tsx'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 const HeroAndre = () => {
 	return (
@@ -27,7 +27,12 @@ const HeroAndre = () => {
 							I'm a tech entrepreneur that loves to build stuff.
 						</P>
 						<div className="mt-10 flex items-center gap-x-6">
-							<Link to="#built" className="h-14 px-10 text-size-md inline-flex whitespace-nowrap items-center justify-center rounded-md font-semibold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-muted-50 text-muted-800 hover:bg-muted-100 border">What have you built?</Link>
+							<Link
+								to="#built"
+								className="inline-flex h-14 items-center justify-center whitespace-nowrap rounded-md border bg-muted-50 px-10 text-size-md font-semibold text-muted-800 ring-offset-background transition-colors hover:bg-muted-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+							>
+								What have you built?
+							</Link>
 							<Button size="lg" asChild>
 								<Link to="/mentorship">Let's build together</Link>
 							</Button>

app/routes/_marketing+/courses+/index.tsx

@@ -1,9 +1,9 @@
-import { Container } from '~/routes/_marketing+/ui+/components/layout/container.tsx'
 import { CoursePresentation } from '~/components/CoursePresentation.tsx'
 import { Newsletter } from '~/components/newsletter.tsx'
-import { H1 } from '../ui+/components/typography/h1.tsx'
-import { P } from '../ui+/components/typography/p.tsx'
 import { type LinksFunction } from '@remix-run/node'
+import { Container } from '~/ui_components/layout/container.tsx'
+import { H1 } from '~/ui_components/typography/h1.tsx'
+import { P } from '~/ui_components/typography/p.tsx'
 
 export const links: LinksFunction = () => {
 	return [{ rel: 'canonical', href: 'https://andrecasal.com/courses' }]