Skip to content

Commit

Permalink
feat(nx-dev): add Monorepo World banner to hero
Browse files Browse the repository at this point in the history 
Integrate a new Monorepo World banner with animations in the hero section using framer-motion. Updated the UI icons library to include Monorepo World icon and relevant SVG file.
  • Loading branch information
@bcabanes
bcabanes committed Aug 16, 2024
1 parent 89f6ad4 commit ae4a112
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 23 deletions.
Binary file added nx-dev/nx-dev/public/images/conferences/monorepoworld-vertical-banner.avif
View file
Binary file not shown.
106 changes: 89 additions & 17 deletions nx-dev/ui-home/src/lib/hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { Theme, useTheme } from '@nx/nx-dev/ui-theme';
import { useState } from 'react';
import Link from 'next/link';
import { useIsomorphicLayoutEffect } from '@nx/nx-dev/ui-primitives';
import { MonorepoWorldIcon } from '@nx/nx-dev/ui-icons';
import { motion, MotionConfig } from 'framer-motion';

export function Hero(): JSX.Element {
return (
Expand All @@ -23,23 +25,6 @@ export function Hero(): JSX.Element {
</div>
<div className="z-20 mx-auto grid h-screen max-w-6xl grid-cols-1 place-items-center text-center">
<div className="container">
<div className="-mt-16 hidden sm:mb-8 sm:flex sm:justify-center">
<div className="relative rounded-full bg-white px-3 py-1 text-sm leading-6 ring-1 ring-slate-900/10 transition-all hover:ring-slate-900/20 dark:bg-slate-950 dark:ring-slate-100/10 dark:hover:ring-slate-100/20">
<span className="text-blue-500 dark:text-sky-500">
Monorepo World
</span>{' '}
- The conf for monorepos and dev tooling.{' '}
<Link
href="https://monorepo.world"
title="Discover Nx Agents"
className="font-semibold text-blue-500 dark:text-sky-500"
prefetch={false}
>
<span className="absolute inset-0" aria-hidden="true"></span>
Find out more <span aria-hidden="true">→</span>
</Link>
</div>
</div>
<SectionHeading as="h1" variant="display" data-cy="primary-heading">
<span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">
Smart
Expand Down Expand Up @@ -96,6 +81,93 @@ export function Hero(): JSX.Element {
Contact us
</ButtonLink>
</div>
<div className="mt-12 hidden sm:flex sm:justify-center">
<MotionConfig reducedMotion="user">
<motion.div
initial={{
y: 16,
opacity: 0,
}}
whileInView={{
y: 0,
opacity: 1,
}}
viewport={{ once: true }}
transition={{
ease: 'easeOut',
duration: 0.225,
delay: 1,
}}
className="pointer-events-auto relative mx-auto w-full max-w-lg overflow-hidden rounded-lg bg-slate-950 text-left text-white shadow-lg ring-1 ring-white ring-opacity-5 transition hover:bg-slate-800"
>
<div className="p-4">
<div className="flex items-start gap-6">
<div className="-m-4 flex-shrink-0">
<img
src="/images/conferences/monorepoworld-vertical-banner.avif"
alt="MonorepoWorld conference image"
className="size-32"
/>
{/*<MonorepoWorldIcon*/}
{/* className="h-8 w-8 text-slate-950"*/}
{/* aria-hidden="true"*/}
{/*/>*/}
</div>
<div className="w-0 flex-1 pt-1">
<p className="text-base font-semibold">
<a
href="https://monorepo.world/?utm_source=nxdev&utm_medium=website&utm_campaign=homepage_banner&utm_campaign=monorepoworld"
title="Join us at Monorepo World"
target="_blank"
>
<span className="absolute inset-0" />
The Nx team will be at Monorepo World!
</a>
</p>
<p className="mt-1 text-sm text-slate-300">
The ultimate conference for{' '}
<span className="text-[#DDFB24]">monorepos</span> and
developer{' '}
<span className="text-[#DDFB24]">tooling</span> on 0ct.
7. 2024, Mountain View, CA.
</p>
</div>
{/*<div className="flex-shrink-0 place-self-end">*/}
{/* <a*/}
{/* href="https://monorepo.world/?utm_source=nxdev&utm_medium=website&utm_campaign=homepage_banner&utm_campaign=monorepoworld"*/}
{/* title="Join us at Monorepo World"*/}
{/* className="rounded-md bg-slate-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"*/}
{/* >*/}
{/* <span className="absolute inset-0" /> Join us*/}
{/* </a>*/}
{/*</div>*/}
</div>
</div>
{/*<span className="inline-flex gap-2 font-semibold text-slate-950 dark:text-white">*/}
{/* <MonorepoWorldIcon aria-hidden="true" className="size-6" />*/}
{/* Monorepo World*/}
{/*</span>*/}
{/*<svg*/}
{/* width="2"*/}
{/* height="2"*/}
{/* fill="currentColor"*/}
{/* aria-hidden="true"*/}
{/*>*/}
{/* <circle cx="1" cy="1" r="1"></circle>*/}
{/*</svg>*/}
{/*<span>The conf for monorepos and dev tooling.</span>*/}
{/*<Link*/}
{/* href="https://monorepo.world"*/}
{/* title="Monorepo World conference"*/}
{/* className="font-semibold"*/}
{/* prefetch={false}*/}
{/*>*/}
{/* <span className="absolute inset-0" aria-hidden="true"></span>*/}
{/* Find out more <span aria-hidden="true">→</span>*/}
{/*</Link>*/}
</motion.div>
</MotionConfig>
</div>
</div>
</div>
</div>
Expand Down
15 changes: 9 additions & 6 deletions nx-dev/ui-icons/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,15 @@ export * from './lib/customers/zipari';
export * from './lib/editors/jetbrains';
export * from './lib/editors/visual-studio-code';

// OTHERS
export * from './lib/monorepo-world';

// PODCASTS
export * from './lib/podcasts/amazon-music';
export * from './lib/podcasts/apple-podcasts';
export * from './lib/podcasts/i-heart-radio';
export * from './lib/podcasts/spotify';

// PRODUCTS
export * from './lib/products';

Expand Down Expand Up @@ -119,9 +128,3 @@ export * from './lib/technologies/vite';
export * from './lib/technologies/vitest';
export * from './lib/technologies/vue';
export * from './lib/technologies/webpack';

// PODCASTS
export * from './lib/podcasts/amazon-music';
export * from './lib/podcasts/apple-podcasts';
export * from './lib/podcasts/i-heart-radio';
export * from './lib/podcasts/spotify';
14 changes: 14 additions & 0 deletions nx-dev/ui-icons/src/lib/monorepo-world.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { ComponentPropsWithoutRef } from 'react';

export function MonorepoWorldIcon(props: ComponentPropsWithoutRef<'svg'>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 24 24"
{...props}
>
<path d="M4.95951 15.2616v-4.7654c0-.82631.64074-1.49877 1.45095-1.49877.77235 0 1.43154.67246 1.43154 1.49877v3.296l1.96008-.9991v-2.2969c0-.82631.65942-1.49877 1.45092-1.49877.7724 0 1.4129.67246 1.4129 1.49877v.8369l1.9746-1.0066C14.5545 8.46636 13.0638 7 11.2536 7c-.9797 0-1.82771.44126-2.44924 1.13332C8.2568 7.44126 7.37148 7 6.41027 7 4.52607 7 3 8.55635 3 10.4962v5.7643l1.95951-.9989ZM17.5251 9.72944v4.76546c0 .8263-.6408 1.4988-1.451 1.4988-.7723 0-1.4315-.6725-1.4315-1.4988v-3.296l-1.9601.9991v2.2969c0 .8263-.6594 1.4988-1.451 1.4988-.7723 0-1.41287-.6725-1.41287-1.4988v-.8369L7.8441 14.6646c.08596 1.8601 1.57666 3.3265 3.3869 3.3265.9796 0 1.8277-.4413 2.4492-1.1333.5476.692 1.4329 1.1333 2.3941 1.1333 1.8842 0 3.4103-1.5564 3.4103-3.4962V8.73073l-1.9595.99871ZM21.0205 18c.541 0 .9795-.4472.9795-.9989 0-.5517-.4385-.9989-.9795-.9989-.5409 0-.9794.4472-.9794.9989 0 .5517.4385.9989.9794.9989Z" />
</svg>
);
}

0 comments on commit ae4a112

Please sign in to comment.