vojtech.mares/backup-websites-2024-01
Archived
1
0
Fork 0
Code Activity

feat: change color palette from blue to amber and reduce number of font sizes

Browse source 
- color change blue theme -> amber theme
- text color changes: grays to black & few grays
- font changes: less sizes (small -> normal)
This commit is contained in:
Vojtěch Mareš 2023-01-10 10:07:24 +01:00
parent 5f2c7d313b
commit 8d0450011a
14 changed files with 72 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

32
components/Button.tsx
View file

@ -11,33 +11,33 @@ const baseStyles = {
const variantStyles = { const variantStyles = {
solid: { solid: {
slate: black:
"bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900", "bg-black text-white hover:bg-slate-700 active:bg-slate-800 focus-visible:outline-slate-900",
blue: "bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600", amber:
"bg-amber-500 text-white hover:bg-amber-600 active:bg-amber-800 focus-visible:outline-amber-500",
white: white:
"bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white", "bg-white text-black hover:bg-amber-50 active:bg-amber-200 focus-visible:outline-white",
}, },
outline: { outline: {
slate: black:
"ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300", "ring-slate-200 text-black hover:ring-slate-300 active:bg-slate-100 focus-visible:outline-amber-500 focus-visible:ring-slate-300",
white: white:
"ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white", "ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 focus-visible:outline-white",
// Supress TypeScript error amber: "", // Outline buttons cannot be amber
blue: "", // TODO: fix properly
}, },
}; };
const transitionStyle = "transition duration-150 ease-in-out"; const transitionStyle = "transition duration-150 ease-in-out";
const sizeStyles = { const sizeStyles = {
default: "px-4 py-2 text-sm", medium: "px-4 py-2 text-sm",
large: "px-8 py-4 text-base", large: "px-8 py-4 text-base",
}; };
type Props = { type Props = {
variant?: "solid" | "outline"; variant?: "solid" | "outline";
color?: "slate" | "white" | "blue"; color?: "black" | "white" | "amber";
size?: "default" | "large"; size?: "medium" | "large";
className?: string; className?: string;
href?: string; href?: string;
children?: ReactNode; children?: ReactNode;
@ -45,12 +45,16 @@ type Props = {
export function Button({ export function Button({
variant = "solid", variant = "solid",
color = "slate", color = "black",
size = "default", size = "medium",
className, className,
href, href,
children, children,
}: Props) { }: Props) {
if (variant === "outline" && color === "amber") {
throw new Error("Outline buttons cannot be amber");
}
className = clsx( className = clsx(
baseStyles[variant], baseStyles[variant],
variantStyles[variant][color], variantStyles[variant][color],

4
components/CallToAction.tsx
View file

@ -5,14 +5,14 @@ export function CallToAction() {
return ( return (
<section <section
id="get-started-today" id="get-started-today"
className="relative overflow-hidden bg-blue-600 py-32" className="relative overflow-hidden bg-amber-500 py-32"
> >
<Container className="relative"> <Container className="relative">
<div className="mx-auto max-w-xl text-center"> <div className="mx-auto max-w-xl text-center">
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl"> <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
Posuňte svoji aplikaci už dnes Posuňte svoji aplikaci už dnes
</h2> </h2>
<p className="mt-4 text-lg tracking-tight text-white"> <p className="mt-4 text-lg tracking-tight text-slate-100">
Je na čase pozvednout vaši infrastrukturu na dnešní standardy. Vaše Je na čase pozvednout vaši infrastrukturu na dnešní standardy. Vaše
infrastruktura by měla nabídnout Vaši aplikaci světu, ne ji držet infrastruktura by měla nabídnout Vaši aplikaci světu, ne ji držet
zpátky. zpátky.

8
components/Environment.tsx
View file

@ -106,11 +106,11 @@ function Feature({ feature, className, ...props }: FeatureProps) {
color={feature.iconColor} color={feature.iconColor}
alt="" alt=""
/> />
<h3 className="mt-6 text-lg font-medium text-blue-600">{feature.name}</h3> <h3 className="mt-6 text-lg font-medium text-amber-500">{feature.name}</h3>
<p className="font-display mt-2 text-xl text-slate-900"> <p className="font-display mt-2 text-xl text-black">
{feature.summary} {feature.summary}
</p> </p>
<p className="mt-4 text-sm text-slate-600">{feature.description}</p> <p className="mt-4 text-slate-700">{feature.description}</p>
</div> </div>
); );
} }
@ -150,7 +150,7 @@ export function Environment() {
> >
<Container> <Container>
<div className="mx-auto max-w-2xl md:text-center"> <div className="mx-auto max-w-2xl md:text-center">
<h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"> <h2 className="font-display text-3xl tracking-tight text-black sm:text-4xl">
Jakákoliv platforma, kdekoliv Jakákoliv platforma, kdekoliv
</h2> </h2>
<p className="mt-4 text-lg tracking-tight text-slate-700"> <p className="mt-4 text-lg tracking-tight text-slate-700">

4
components/Faqs.tsx
View file

@ -76,7 +76,7 @@ export function Faqs() {
<div className="mx-auto max-w-2xl lg:mx-0"> <div className="mx-auto max-w-2xl lg:mx-0">
<h2 <h2
id="faq-title" id="faq-title"
className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl" className="font-display text-3xl tracking-tight text-black sm:text-4xl"
> >
Frequently asked questions Frequently asked questions
</h2> </h2>
@ -94,7 +94,7 @@ export function Faqs() {
<ul role="list" className="flex flex-col gap-y-8"> <ul role="list" className="flex flex-col gap-y-8">
{column.map((faq, faqIndex) => ( {column.map((faq, faqIndex) => (
<li key={faqIndex}> <li key={faqIndex}>
<h3 className="font-display text-lg leading-7 text-slate-900"> <h3 className="font-display text-lg leading-7 text-black">
{faq.question} {faq.question}
</h3> </h3>
<p className="mt-4 text-sm text-slate-700">{faq.answer}</p> <p className="mt-4 text-sm text-slate-700">{faq.answer}</p>

8
components/Footer.tsx
View file

@ -120,7 +120,7 @@ export function Footer() {
// viewBox="0 0 24 24" // viewBox="0 0 24 24"
// xmlns="http://www.w3.org/2000/svg" // xmlns="http://www.w3.org/2000/svg"
aria-hidden="true" aria-hidden="true"
className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700" className="h-6 w-6 fill-black group-hover:fill-slate-700"
> >
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
</svg> </svg>
@ -133,7 +133,7 @@ export function Footer() {
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700" className="h-6 w-6 fill-black group-hover:fill-slate-700"
> >
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" /> <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
</svg> </svg>
@ -146,13 +146,13 @@ export function Footer() {
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700" className="h-6 w-6 fill-black group-hover:fill-slate-700"
> >
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" /> <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
</svg> </svg>
</Link> </Link>
</div> </div>
<p className="mt-6 text-sm text-slate-500 sm:mt-0"> <p className="mt-6 text-slate-700 sm:mt-0">
Copyright &copy; {new Date().getFullYear()} Vojtěch Mareš. Všechna Copyright &copy; {new Date().getFullYear()} Vojtěch Mareš. Všechna
práva vyhrazena. práva vyhrazena.
</p> </p>

2
components/Header.tsx
View file

@ -22,7 +22,7 @@ export function Header() {
</div> </div>
</div> </div>
<div className="flex items-center gap-x-5 md:gap-x-8"> <div className="flex items-center gap-x-5 md:gap-x-8">
<Button href="mailto:iam@vojtechmares.com" color="blue"> <Button href="mailto:iam@vojtechmares.com" color="amber">
<span className="text-lg"> <span className="text-lg">
Napište mi{" "} Napište mi{" "}
<span className="hidden lg:inline">ještě dnes</span> <span className="hidden lg:inline">ještě dnes</span>

8
components/Hero.tsx
View file

@ -29,13 +29,13 @@ export function Hero() {
<Container className="pt-5 lg:pt-8"> <Container className="pt-5 lg:pt-8">
<div className="md:flex md:justify-between md:items-center"> <div className="md:flex md:justify-between md:items-center">
<div> <div>
<h1 className="font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl leading-10"> <h1 className="font-display text-5xl font-medium tracking-tight text-black sm:text-7xl leading-10">
Jsem{" "} Jsem{" "}
<span className="relative whitespace-nowrap text-blue-600"> <span className="relative whitespace-nowrap text-amber-500">
<svg <svg
aria-hidden="true" aria-hidden="true"
viewBox="0 0 418 42" viewBox="0 0 418 42"
className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70" className="absolute top-2/3 left-0 h-[0.58em] w-full fill-amber-300/70"
preserveAspectRatio="none" preserveAspectRatio="none"
> >
<path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" /> <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
@ -61,7 +61,7 @@ export function Hero() {
</Button> </Button>
</div> </div>
<div className="mt-10 "> {/* mt-36 lg:mt-44 */} <div className="mt-10 "> {/* mt-36 lg:mt-44 */}
<p className="font-display text-lg tracking-tight text-slate-900"> <p className="font-display text-lg tracking-tight text-slate-700">
Moji spokojení klienti, přidejte se k nim i Vy. Moji spokojení klienti, přidejte se k nim i Vy.
</p> </p>
<ul <ul

2
components/NavLink.tsx
View file

@ -10,7 +10,7 @@ export function NavLink({ href, children }: Props) {
return ( return (
<Link <Link
href={href} href={href}
className="inline-block rounded-lg py-1 px-2 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-slate-900" className="inline-block rounded-lg py-1 px-2 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-black"
> >
{children} {children}
</Link> </Link>

10
components/Pricing.tsx
View file

@ -43,8 +43,8 @@ function Plan({
<section <section
className={clsx( className={clsx(
"flex flex-col rounded-3xl px-6 sm:px-8", "flex flex-col rounded-3xl px-6 sm:px-8",
featured ? "order-first bg-blue-600 py-8 lg:order-none" : "lg:py-8", featured ? "order-first bg-amber-500 py-8 lg:order-none" : "lg:py-8",
featured ? "hover:bg-blue-700" : "md:ring-1 md:hover:ring-slate-700 md:ring-transparent", featured ? "hover:bg-amber-600" : "md:ring-1 md:hover:ring-slate-700 md:ring-transparent",
"transition ease-in-out duration-300 md:hover:-translate-y-1 md:hover:scale-110" "transition ease-in-out duration-300 md:hover:-translate-y-1 md:hover:scale-110"
)} )}
> >
@ -55,7 +55,7 @@ function Plan({
<p <p
className={clsx( className={clsx(
"mt-2 text-base", "mt-2 text-base",
featured ? "text-white" : "text-slate-400" featured ? "text-slate-100" : "text-slate-400"
)} )}
> >
{description} {description}
@ -78,13 +78,13 @@ export function Pricing() {
<section <section
id="pricing" id="pricing"
aria-label="Pricing" aria-label="Pricing"
className="bg-slate-900 py-20 sm:py-32" className="bg-black py-20 sm:py-32"
> >
<Container> <Container>
<div className="md:text-center"> <div className="md:text-center">
<h3 className="font-display text-xl tracking-tight text-white sm:text-4xl"> <h3 className="font-display text-xl tracking-tight text-white sm:text-4xl">
<span className="relative whitespace-nowrap"> <span className="relative whitespace-nowrap">
<SwirlyDoodle className="absolute top-1/2 left-0 h-[1em] w-full fill-blue-400" /> <SwirlyDoodle className="absolute top-1/2 left-0 h-[1em] w-full fill-amber-400" />
<span className="relative">Co pro Vás,</span> <span className="relative">Co pro Vás,</span>
</span>{" "} </span>{" "}
můžu udělat. můžu udělat.

10
components/PrimaryFeatures.tsx
View file

@ -30,14 +30,14 @@ export function PrimaryFeatures() {
<section <section
id="features" id="features"
aria-label="Features for running your books" aria-label="Features for running your books"
className="relative overflow-hidden bg-blue-600 pt-20 pb-28 sm:py-32" className="relative overflow-hidden bg-gradient-to-br to-amber-600 via-amber-500 from-amber-500 pt-20 pb-28 sm:py-32"
> >
<Container className="relative"> <Container className="relative">
<div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none"> <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl"> <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
Z nuly do cloudu. Z nuly do cloudu.
</h2> </h2>
<p className="mt-6 text-lg tracking-tight text-blue-100"> <p className="mt-6 text-lg tracking-tight text-slate-100">
Vše co budete potřebovat, od začátku až do cíle. Vše co budete potřebovat, od začátku až do cíle.
</p> </p>
</div> </div>
@ -62,15 +62,15 @@ export function PrimaryFeatures() {
) : null} ) : null}
<div className="group relative flex items-start"> <div className="group relative flex items-start">
<span className="flex h-9 items-center" aria-hidden="true"> <span className="flex h-9 items-center" aria-hidden="true">
<span className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 border-blue-600 bg-white"> <span className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 border-amber-500 bg-white">
<span className="h-3 w-3 rounded-full bg-blue-600" /> <span className="h-3 w-3 rounded-full bg-amber-500" />
</span> </span>
</span> </span>
<span className="ml-4 flex min-w-0 flex-col"> <span className="ml-4 flex min-w-0 flex-col">
<span className="text-2xl font-normal text-white"> <span className="text-2xl font-normal text-white">
{step.name} {step.name}
</span> </span>
<span className="text-lg text-blue-200"> <span className="text-lg text-slate-100">
{step.description} {step.description}
</span> </span>
</span> </span>

10
components/TechStack.tsx
View file

@ -102,22 +102,22 @@ function Feature({ feature, isActive, className, ...props }: FeatureProps) {
className={clsx( className={clsx(
// 'w-32', // 'w-32',
"flex justify-center rounded-lg p-2" "flex justify-center rounded-lg p-2"
// isActive ? 'fill-blue-600' : 'fill-slate-500' // isActive ? 'fill-amber-500' : 'fill-slate-500'
)} )}
alt="" alt=""
/> />
<h3 <h3
className={clsx( className={clsx(
"mt-6 text-lg font-medium", "mt-6 text-lg font-medium",
isActive ? "text-blue-600" : "text-slate-600" isActive ? "text-amber-500" : "text-slate-700"
)} )}
> >
{feature.name} {feature.name}
</h3> </h3>
<p className="font-display mt-2 text-xl text-slate-900"> <p className="font-display mt-2 text-xl text-black">
{feature.summary} {feature.summary}
</p> </p>
<p className="mt-4 text-sm text-slate-600">{feature.description}</p> <p className="mt-4 text-slate-700">{feature.description}</p>
</div> </div>
); );
} }
@ -213,7 +213,7 @@ export function TechStack() {
> >
<Container> <Container>
<div className="mx-auto max-w-2xl md:text-center"> <div className="mx-auto max-w-2xl md:text-center">
<h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"> <h2 className="font-display text-3xl tracking-tight text-black sm:text-4xl">
Open Source DevOps stack Open Source DevOps stack
</h2> </h2>
<p className="mt-4 text-lg tracking-tight text-slate-700"> <p className="mt-4 text-lg tracking-tight text-slate-700">

8
components/Testimonials.tsx
View file

@ -45,7 +45,7 @@ export function Testimonials() {
> >
<Container> <Container>
<div className="mx-auto max-w-2xl md:text-center"> <div className="mx-auto max-w-2xl md:text-center">
<h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"> <h2 className="font-display text-3xl tracking-tight text-black sm:text-4xl">
Napsali o mně Napsali o mně
</h2> </h2>
<p className="mt-4 text-lg tracking-tight text-slate-700"> <p className="mt-4 text-lg tracking-tight text-slate-700">
@ -64,16 +64,16 @@ export function Testimonials() {
<figure className="relative rounded-2xl bg-white p-6 shadow-xl shadow-slate-900/10"> <figure className="relative rounded-2xl bg-white p-6 shadow-xl shadow-slate-900/10">
<QuoteIcon className="absolute top-6 left-6 fill-slate-100" /> <QuoteIcon className="absolute top-6 left-6 fill-slate-100" />
<blockquote className="relative"> <blockquote className="relative">
<p className="text-lg tracking-tight text-slate-900"> <p className="text-lg tracking-tight text-black">
{testimonial.content} {testimonial.content}
</p> </p>
</blockquote> </blockquote>
<figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6"> <figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
<div> <div>
<div className="font-display text-base text-slate-900"> <div className="font-display text-base text-black">
{testimonial.author.name} {testimonial.author.name}
</div> </div>
<div className="mt-1 text-sm text-slate-500"> <div className="mt-1 text-sm text-slate-700">
{testimonial.author.role} {testimonial.author.role}
</div> </div>
</div> </div>

26
components/Training.tsx
View file

@ -17,7 +17,7 @@ export const Training = ({ training }: Props) => {
return ( return (
<> <>
<div className="pb-14 sm:pb-20 lg:pb-32"> <div className="pb-14 sm:pb-20 lg:pb-32">
<div className="bg-slate-900 pt-16 pb-16"> <div className="bg-black pt-16 pb-16">
<Container className="flex justify-around"> <Container className="flex justify-around">
<Image <Image
src={training.logo} src={training.logo}
@ -52,16 +52,16 @@ export const Training = ({ training }: Props) => {
className="h-5 w-5 text-blue-400" className="h-5 w-5 text-blue-400"
> >
<path <path
fill-rule="evenodd" fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
clip-rule="evenodd" clipRule="evenodd"
/> />
</svg> </svg>
</div> </div>
<div className="ml-3"> <div className="ml-3">
<p className="text-blue-700"> <p className="text-blue-600">
Toto školení je{" "} Toto školení je{" "}
<span className="font-medium text-blue-700"> <span className="font-medium">
dvoudenní. dvoudenní.
</span> </span>
</p> </p>
@ -73,25 +73,25 @@ export const Training = ({ training }: Props) => {
)} )}
<div className="mt-8 overflow-hidden rounded-lg bg-slate-50 shadow md:mt-0"> <div className="mt-8 overflow-hidden rounded-lg bg-slate-50 shadow md:mt-0">
<div className="px-4 py-5 sm:px-6"> <div className="px-4 py-5 sm:px-6">
<h3 className="text-lg font-medium leading-6 text-slate-900"> <h3 className="text-lg font-medium leading-6 text-black">
Cena za školení Cena za školení
</h3> </h3>
</div> </div>
<div className="border-t border-gray-200 px-4 py-5"> <div className="border-t border-slate-100 px-4 py-5">
<dl className="sm:divide-y sm:divide-gray-200"> <dl className="sm:divide-y sm:divide-slate-400">
<div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6"> <div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
<dt className="font-medium text-gray-500"> <dt className="font-medium text-slate-700">
Veřejný termín Veřejný termín
</dt> </dt>
<dd className="mt-1 text-gray-900 sm:mt-0"> <dd className="mt-1 text-black sm:mt-0">
{formatter.format(training.priceOpen)} bez DPH {formatter.format(training.priceOpen)} bez DPH
</dd> </dd>
</div> </div>
<div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6"> <div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
<dt className="font-medium text-gray-500"> <dt className="font-medium text-slate-700">
Firemní školení Firemní školení
</dt> </dt>
<dd className="mt-1 text-gray-900 sm:mt-0"> <dd className="mt-1 text-black sm:mt-0">
{formatter.format(training.priceCompany)} bez DPH {formatter.format(training.priceCompany)} bez DPH
</dd> </dd>
</div> </div>
@ -101,7 +101,7 @@ export const Training = ({ training }: Props) => {
<div className="mt-8"> <div className="mt-8">
<Button <Button
variant="solid" variant="solid"
color="blue" color="amber"
className="w-full text-lg font-medium" className="w-full text-lg font-medium"
href="mailto:iam@vojtechmares.com" href="mailto:iam@vojtechmares.com"
> >

11
components/TrainingListGrid.tsx
View file

@ -21,8 +21,8 @@ const TrainingDetail = ({
className={clsx( className={clsx(
className, className,
"rounded-3xl py-8 px-6 shadow sm:px-8", "rounded-3xl py-8 px-6 shadow sm:px-8",
training.featured ? "bg-blue-600 py-8" : "", training.featured ? "bg-amber-500 py-8" : "",
training.featured ? "hover:bg-blue-700" : "md:ring-1 md:hover:ring-slate-700 md:ring-transparent", training.featured ? "hover:bg-amber-600" : "md:ring-1 md:hover:ring-slate-700 md:ring-transparent",
"transition ease-in-out duration-300 md:hover:-translate-y-1 md:hover:scale-110 " "transition ease-in-out duration-300 md:hover:-translate-y-1 md:hover:scale-110 "
)} )}
{...props} {...props}
@ -54,10 +54,7 @@ const TrainingDetail = ({
</p> </p>
</div> </div>
<p <p
className={clsx( className="text-md mt-4 text-slate-100"
"text-md mt-4",
training.featured ? "text-white" : "text-slate-200"
)}
> >
{training.description.split(" ").splice(0, 40).join(" ") + "..."} {training.description.split(" ").splice(0, 40).join(" ") + "..."}
</p> </p>
@ -117,7 +114,7 @@ export const TrainingListGrid = ({ trainingList }: TrainingListProps) => {
<section <section
id="training-list" id="training-list"
aria-label="Seznam školení" aria-label="Seznam školení"
className="bg-slate-900 pt-16 pb-14 sm:pb-20 sm:pt-24 lg:pb-32" className="bg-black pt-16 pb-14 sm:pb-20 sm:pt-24 lg:pb-32"
> >
<Container> <Container>
<div className="mx-auto max-w-2xl md:text-center"> <div className="mx-auto max-w-2xl md:text-center">