miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(nx-dev): display image for testimonial on enterprise mobile screen (#29377)

Browse Source 
Display the testimonial image associated to Hetzner Cloud on
enterprise's mobile screen. Adjusted styles and dimensions for improved
design consistency across breakpoints. Updated iframe dimensions to
better fit the layout.
This commit is contained in:
Benjamin Cabanes 2024-12-16 15:34:13 -05:00 committed by GitHub
parent 1d7465b02e
commit ee4de0b3ac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
nx-dev/ui-enterprise/src/lib/hetzner-cloud-testimonial.tsx
View File

@ -1,15 +1,11 @@
import { ComponentProps, Fragment, ReactElement, useState } from 'react'; import { ComponentProps, Fragment, ReactElement, useState } from 'react';
import { Button, ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common'; import { Button, SectionHeading } from '@nx/nx-dev/ui-common';
import { HetznerCloudIcon } from '@nx/nx-dev/ui-icons'; import { HetznerCloudIcon } from '@nx/nx-dev/ui-icons';
import Link from 'next/link'; import Link from 'next/link';
import { cx } from '@nx/nx-dev/ui-primitives'; import { cx } from '@nx/nx-dev/ui-primitives';
import { MovingBorder } from '@nx/nx-dev/ui-animations'; import { MovingBorder } from '@nx/nx-dev/ui-animations';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { import { PlayIcon } from '@heroicons/react/24/outline';
ArrowDownTrayIcon,
PlayIcon,
VideoCameraIcon,
} from '@heroicons/react/24/outline';
import Image from 'next/image'; import Image from 'next/image';
import { Dialog, Transition } from '@headlessui/react'; import { Dialog, Transition } from '@headlessui/react';
import { sendCustomEvent } from '@nx/nx-dev/feature-analytics'; import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
@ -93,7 +89,7 @@ export function HetznerCloudTestimonial(): ReactElement {
<span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent"> <span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">
speeds build and test times speeds build and test times
</span>{' '} </span>{' '}
<br /> <br className="hidden md:block" />
as Hetzner Cloud{' '} as Hetzner Cloud{' '}
<span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent"> <span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">
scales up scales up
@ -101,7 +97,7 @@ export function HetznerCloudTestimonial(): ReactElement {
product offering product offering
</SectionHeading> </SectionHeading>
<div className="mt-8 md:grid md:grid-cols-2 md:items-center md:gap-10 lg:gap-12"> <div className="mt-8 md:grid md:grid-cols-2 md:items-center md:gap-10 lg:gap-12">
<div className="mb-24 hidden sm:px-6 md:mb-0 md:block"> <div className="mb-24 block sm:px-6 md:mb-0">
<div className="relative"> <div className="relative">
<div className="absolute bottom-0 start-0 -translate-x-14 translate-y-10"> <div className="absolute bottom-0 start-0 -translate-x-14 translate-y-10">
<svg <svg
@ -296,8 +292,8 @@ export function HetznerCloudTestimonial(): ReactElement {
> >
<Dialog.Panel className="relative w-auto transform overflow-hidden rounded-2xl border border-slate-950 bg-black text-left align-middle shadow-xl transition-all focus:outline-none"> <Dialog.Panel className="relative w-auto transform overflow-hidden rounded-2xl border border-slate-950 bg-black text-left align-middle shadow-xl transition-all focus:outline-none">
<iframe <iframe
width="812" width="808"
height="468" height="454"
src="https://www.youtube.com/embed/2BLqiNnBPuU?si=752RGHhozOMzbWlx" src="https://www.youtube.com/embed/2BLqiNnBPuU?si=752RGHhozOMzbWlx"
title="YouTube video player" title="YouTube video player"
frameBorder="0" frameBorder="0"