Picasso your pour with a sleek ceramic cup designed for beautiful
espresso drinks. Engineered for the outdoors and designed to enhance
the taste of your libation of choice.
diff --git a/apps/web/components/one-product-with-image-on-the-left/tailwind.tsx b/apps/web/components/one-product-with-image-on-the-left/tailwind.tsx
index e094f2e654..d449adb367 100644
--- a/apps/web/components/one-product-with-image-on-the-left/tailwind.tsx
+++ b/apps/web/components/one-product-with-image-on-the-left/tailwind.tsx
@@ -15,14 +15,14 @@ export const component = (
/>
-
+
Great Timepiece
-
+
Renowned for their minimalist design and high functionality,
celebrating the principles of simplicity and clarity.
-
+
$120.00
-
+
Classic Watches
Elegant Comfort
-
+
Dieter Rams’ work has an outstanding quality which distinguishes it from
the vast majority of industrial design of the entire 20th Century.
-
+
$210.00
Before divider
- After divider
);
diff --git a/apps/web/components/survey-section/tailwind.tsx b/apps/web/components/survey-section/tailwind.tsx
index 67ba198727..1e40dfcbe4 100644
--- a/apps/web/components/survey-section/tailwind.tsx
+++ b/apps/web/components/survey-section/tailwind.tsx
@@ -10,16 +10,16 @@ import { Layout } from '../_components/layout';
export const component = (
-
+
Your opinion matters
We want to hear you
-
+
How would you rate your experience using our product in a scale from 1 to
5?
@@ -30,7 +30,7 @@ export const component = (
{[1, 2, 3, 4, 5].map((number) => (
diff --git a/apps/web/components/text-with-styling/tailwind.tsx b/apps/web/components/text-with-styling/tailwind.tsx
index 9e9a71eef0..b36689e7f6 100644
--- a/apps/web/components/text-with-styling/tailwind.tsx
+++ b/apps/web/components/text-with-styling/tailwind.tsx
@@ -3,7 +3,7 @@ import { Layout } from '../_components/layout';
export const component = (
<>
-
+
Amazing content
diff --git a/apps/web/components/three-columns-with-images/tailwind.tsx b/apps/web/components/three-columns-with-images/tailwind.tsx
index 967ea62154..1b9753b91e 100644
--- a/apps/web/components/three-columns-with-images/tailwind.tsx
+++ b/apps/web/components/three-columns-with-images/tailwind.tsx
@@ -5,13 +5,13 @@ export const component = (
-
+
Our products
-
+
Elegant Style
-
+
We spent two years in development to bring you the next generation of
our award-winning home brew grinder. From the finest pour-overs to the
coarsest cold brews, your coffee will never be the same again.
diff --git a/apps/web/components/title-four-cards/tailwind.tsx b/apps/web/components/title-four-cards/tailwind.tsx
index d22bc2404c..9b5695c356 100644
--- a/apps/web/components/title-four-cards/tailwind.tsx
+++ b/apps/web/components/title-four-cards/tailwind.tsx
@@ -13,10 +13,10 @@ export const component = (
-
+
Timing Products
-
+
Dieter Rams consistently implemented his design principles over the
course of over three decades as the Braun design leader.
@@ -29,13 +29,13 @@ export const component = (
height={250}
src="/static/braun-wall-clock.jpg"
/>
-
+
Wall Clock
-
+
Easy to read dial layout.
-
+
$45.00
+
Wireless Alarm
-
+
Designed with a focus on function.
-
+
$50.00
-
@@ -80,13 +80,13 @@ export const component = (
height={250}
src="/static/braun-classic-watch.jpg"
/>
-
+
Classic Watch
-
+
Functional, classic, and built to last.
-
+
$210.00
+
Analogue Clock
-
+
Thoughtful and simply designed.
-
+
$40.00
-
+
Timing Products
-
+
Dieter Rams consistently implemented his design principles over the
course of over three decades as the Braun design leader.
@@ -21,13 +21,13 @@ export const component = (
height={180}
src="/static/braun-analogue-clock.jpg"
/>
-
+
Analogue Clock
-
+
Thoughtful and simply designed.
-
+
$40.00
+
Wall Clock
-
+
The original easy to read dial layout.
-
+
$45.00
+
Classic Watch
-
+
Functional, classic, and built to last.
-
+
$210.00
Sign up
diff --git a/apps/web/src/app/components/[slug]/page.tsx b/apps/web/src/app/components/[slug]/page.tsx
index 903e07c735..d5b1575539 100644
--- a/apps/web/src/app/components/[slug]/page.tsx
+++ b/apps/web/src/app/components/[slug]/page.tsx
@@ -68,13 +68,13 @@ const ComponentPage: React.FC = async ({ params }) => {
<>
-
-
+
+
Back
-
+
{foundCategory.name}
-
+
diff --git a/apps/web/src/app/components/page.tsx b/apps/web/src/app/components/page.tsx
index 63f2e7afe9..f1954f8f5e 100644
--- a/apps/web/src/app/components/page.tsx
+++ b/apps/web/src/app/components/page.tsx
@@ -32,21 +32,21 @@ const ComponentsPage = async () => (
<>
-
-
Components
+
+
Components
Build beautiful emails with pre-built components that you can
copy-and-paste into your app.
-
-
+
+
{componentsStructure.map((category, index) => {
const slug = slugify(category.name);
const Illustration = dynamic(
@@ -61,7 +61,7 @@ const ComponentsPage = async () => (
return (
(
index % 3 === 0,
'md:group-hover:-translate-y-2 md:group-focus:-translate-y-2':
index % 3 === 1,
- 'md:group-hover:-translate-y-2 md:group-hover:translate-x-2 md:group-focus:-translate-y-2 md:group-focus:translate-x-2':
+ 'md:group-hover:-translate-y-2 md:group-focus:-translate-y-2 md:group-focus:translate-x-2 md:group-hover:translate-x-2':
index % 3 === 2,
},
)}
>
-
+
{category.name}
-
+
{category.components.length} component
{category.components.length > 1 && 's'}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 68ac1ea157..1ff7c06be3 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -89,7 +89,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
lang="en"
color-scheme="dark"
>
-
+
(
<>
-
+
404
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 51f563754a..ba105b156f 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -26,7 +26,7 @@ const Home = () => (
/>
The next generation of writing emails
@@ -45,7 +45,7 @@ const Home = () => (
+
npx create-email@latest
diff --git a/apps/web/src/components/code-block.tsx b/apps/web/src/components/code-block.tsx
index df0a4f7330..f74573adb6 100644
--- a/apps/web/src/components/code-block.tsx
+++ b/apps/web/src/components/code-block.tsx
@@ -54,7 +54,7 @@ export const CodeBlock: React.FC
> = ({
{({ tokens, getLineProps, getTokenProps }) => (
<>
> = ({
{({ tokens, getLineProps, getTokenProps }) => (
> = ({
)}
-
+
{
@@ -187,7 +187,7 @@ const ReactVariantSelect = ({
{['tailwind', 'inline-styles'].map((variant) => (
diff --git a/apps/web/src/components/component-view.tsx b/apps/web/src/components/component-view.tsx
index d574cce4e0..06b7090345 100644
--- a/apps/web/src/components/component-view.tsx
+++ b/apps/web/src/components/component-view.tsx
@@ -82,7 +82,7 @@ export const ComponentView: React.FC = ({
className,
)}
>
-
+
{component.title}
@@ -111,15 +111,15 @@ export const ComponentView: React.FC = ({
-
+
-
+
-
+
diff --git a/apps/web/src/components/components-view.tsx b/apps/web/src/components/components-view.tsx
index 2e282de041..0c408d179a 100644
--- a/apps/web/src/components/components-view.tsx
+++ b/apps/web/src/components/components-view.tsx
@@ -12,7 +12,7 @@ export const ComponentsView: React.FC = ({
<>
{components.map((component, index) => (
> = ({
-
+
diff --git a/apps/web/src/components/spotlight.tsx b/apps/web/src/components/spotlight.tsx
index abcda76818..76c1c7b543 100644
--- a/apps/web/src/components/spotlight.tsx
+++ b/apps/web/src/components/spotlight.tsx
@@ -35,7 +35,7 @@ export const Spotlight = ({ children, className }: SpotlightProps) => {
>
{children}
diff --git a/apps/web/src/components/tooltip-content.tsx b/apps/web/src/components/tooltip-content.tsx
index e4d50c186e..4c521b3d00 100644
--- a/apps/web/src/components/tooltip-content.tsx
+++ b/apps/web/src/components/tooltip-content.tsx
@@ -18,7 +18,7 @@ export const TooltipContent = React.forwardRef<
diff --git a/apps/web/src/illustrations/articles.tsx b/apps/web/src/illustrations/articles.tsx
index 7e38355dbd..a85eb9493e 100644
--- a/apps/web/src/illustrations/articles.tsx
+++ b/apps/web/src/illustrations/articles.tsx
@@ -1,5 +1,5 @@
const IllustrationArticles: React.FC = () => (
-
+
diff --git a/apps/web/src/illustrations/buttons.tsx b/apps/web/src/illustrations/buttons.tsx
index a1aa8a8620..bc67851417 100644
--- a/apps/web/src/illustrations/buttons.tsx
+++ b/apps/web/src/illustrations/buttons.tsx
@@ -4,7 +4,7 @@ const IllustrationButtons: React.FC = () => (
diff --git a/apps/web/src/illustrations/features.tsx b/apps/web/src/illustrations/features.tsx
index de5363ddb1..aae3d8063c 100644
--- a/apps/web/src/illustrations/features.tsx
+++ b/apps/web/src/illustrations/features.tsx
@@ -1,8 +1,8 @@
const IllustrationFeatures: React.FC = () => (
<>
-
-
-
+
+
+
diff --git a/apps/web/src/illustrations/footers.tsx b/apps/web/src/illustrations/footers.tsx
index af5a7a740d..8e91b05c9a 100644
--- a/apps/web/src/illustrations/footers.tsx
+++ b/apps/web/src/illustrations/footers.tsx
@@ -1,5 +1,5 @@
const IllustrationFooters: React.FC = () => (
-
+
diff --git a/apps/web/src/illustrations/grid.tsx b/apps/web/src/illustrations/grid.tsx
index 5d530759f5..6efab6b4c7 100644
--- a/apps/web/src/illustrations/grid.tsx
+++ b/apps/web/src/illustrations/grid.tsx
@@ -3,11 +3,11 @@ import { MoveDownRightIcon } from 'lucide-react';
const IllustrationGrid: React.FC = () => (
-
-
-
+
+
+
diff --git a/apps/web/src/illustrations/headers.tsx b/apps/web/src/illustrations/headers.tsx
index c12efb23ee..e28fc94a55 100644
--- a/apps/web/src/illustrations/headers.tsx
+++ b/apps/web/src/illustrations/headers.tsx
@@ -1,12 +1,12 @@
const IllustrationHeaders: React.FC = () => (
-
+
);
diff --git a/apps/web/src/illustrations/heading.tsx b/apps/web/src/illustrations/heading.tsx
index 3e3bbca8e7..578b1be0bb 100644
--- a/apps/web/src/illustrations/heading.tsx
+++ b/apps/web/src/illustrations/heading.tsx
@@ -1,5 +1,5 @@
const IllustrationHeading: React.FC = () => (
-
+
diff --git a/apps/web/src/illustrations/markdown.tsx b/apps/web/src/illustrations/markdown.tsx
index 7d4095f6d8..488638787c 100644
--- a/apps/web/src/illustrations/markdown.tsx
+++ b/apps/web/src/illustrations/markdown.tsx
@@ -1,6 +1,6 @@
const IllustrationMarkdown: React.FC = () => (
-
+
diff --git a/apps/web/src/illustrations/marketing.tsx b/apps/web/src/illustrations/marketing.tsx
index d0b5d9680b..28dec98797 100644
--- a/apps/web/src/illustrations/marketing.tsx
+++ b/apps/web/src/illustrations/marketing.tsx
@@ -1,7 +1,7 @@
import { CircleDollarSign } from 'lucide-react';
const IllustrationMarketing: React.FC = () => (
-
+
diff --git a/apps/web/src/illustrations/section.tsx b/apps/web/src/illustrations/section.tsx
index c54eafa5c3..7e58f711bb 100644
--- a/apps/web/src/illustrations/section.tsx
+++ b/apps/web/src/illustrations/section.tsx
@@ -1,5 +1,5 @@
const IllustrationSection: React.FC = () => (
-
+
);
export default IllustrationSection;
diff --git a/apps/web/src/illustrations/text.tsx b/apps/web/src/illustrations/text.tsx
index e07daf46e7..180e79996d 100644
--- a/apps/web/src/illustrations/text.tsx
+++ b/apps/web/src/illustrations/text.tsx
@@ -1,5 +1,5 @@
const IllustrationText: React.FC = () => (
-