Merge pull request #50 from jakala-na/nextjs-conf

feat(demo): Add demo content. Adjust components.
jakala-na · Oct 22, 2024 · ba4381c · ba4381c
2 parents 715b44a + 9fc4f1a
commit ba4381c
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 16 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -74,3 +74,7 @@
     @apply bg-background text-foreground;
   }
 }
+
+.wysiwyg p {
+  margin-block: 16px;
+}
diff --git a/components/hero-banner-ctf/hero-banner-ctf-client.tsx b/components/hero-banner-ctf/hero-banner-ctf-client.tsx
@@ -35,6 +35,8 @@ export const HeroBannerCtfClient: React.FC<{
           priority: true,
         })
       }
+      size={data.heroSize}
+      colorPalette={data.colorPalette}
       addAttributes={addAttributes}
     />
   );

diff --git a/components/icons/icons.tsx b/components/icons/icons.tsx
@@ -54,4 +54,12 @@ export const Icons = {
       </g>
     </svg>
   ),
+  altLogo: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 267.998 267.998" {...props}>
+      <g fill="#030104">
+        <path d="M243.378 112.894c0-11.622-21.626-21.782-53.851-27.296l23.658-77.62a5.139 5.139 0 0 0-3.417-6.419l-4.38-1.333a5.137 5.137 0 0 0-6.415 3.417l-24.341 79.834c-12.562-1.456-26.27-2.26-40.627-2.26-60.411 0-109.384 14.187-109.384 31.678 0 6.328 6.408 12.232 17.47 17.178l-.153.33c-20.466 27.539-9.843 68.85-9.843 68.85 3.238 13.608 10.943 23.73 20.83 31.254h-.142v16.004c-4.149-.914-7.909.604-8.516 3.537-.638 3.049 2.376 6.46 6.728 7.62 4.344 1.157 8.385-.368 9.017-3.417l.056-.352.202-18.488c21.307 12.53 49.031 15.752 65.63 16.482l.161 12.301c.632 3.05 4.671 4.574 9.016 3.417 4.351-1.159 7.366-4.571 6.728-7.62-.605-2.934-4.367-4.451-8.516-3.537v-4.369c13.895-.104 45.322-1.905 69.779-14.936l.184 16.75.057.352c.631 3.049 4.671 4.574 9.016 3.417 4.351-1.16 7.365-4.571 6.727-7.62-.606-2.934-4.366-4.451-8.516-3.537v-13.865c11.305-7.712 20.238-18.451 23.795-33.393 0 0 10.564-41.088-9.672-68.627h.004c11.812-5.066 18.715-11.167 18.715-17.732zm-109.372 23.409c-50.637 0-91.678-10.918-91.678-24.398 0-13.467 41.041-24.385 91.678-24.385 13.83 0 26.945.817 38.703 2.276l-1.122 3.674h-.001c-8.16.798-14.539 7.683-14.539 16.055 0 .666.053 1.324.129 1.968h32.002c.08-.644.133-1.302.133-1.968 0-4.005-1.465-7.67-3.881-10.49l2.11-6.925c23.098 4.425 38.133 11.643 38.133 19.795 0 13.479-41.041 24.398-91.667 24.398z" />
+        <path d="M99.498 113.853c-6.299 0-11.408 5.112-11.408 11.412 0 .469.038.933.094 1.389h22.629c.059-.456.097-.92.097-1.389 0-6.3-5.108-11.412-11.412-11.412zm24.197-19.365a8.262 8.262 0 0 0-8.262 8.262c0 .342.028.677.07 1.006h16.388a8.12 8.12 0 0 0 .066-1.006 8.26 8.26 0 0 0-8.262-8.262z" />
+      </g>
+    </svg>
+  ),
 };
diff --git a/components/navigation/navigation.tsx b/components/navigation/navigation.tsx
@@ -198,7 +198,7 @@ export const Navigation = (props: NavigationProps) => {
       <div className="mx-auto flex w-full max-w-6xl items-center justify-between">
         <div className="flex items-center justify-center sm:justify-start">
           <Link href="/">
-            <Icons.logo className="h-8 w-8 md:mr-10" />
+            <Icons.altLogo className="h-8 w-8 md:mr-10" />
           </Link>
           <MainMenuDesktop />
         </div>
@@ -231,11 +231,10 @@ export const Navigation = (props: NavigationProps) => {
                 <SheetTitle>Notifications</SheetTitle>
               </SheetHeader>
               <SheetDescription className="mt-2">
-                This is an example of the shadcn/ui{' '}
-                <a className="font-bold" href="https://ui.shadcn.com/docs/components/sheet">
-                  Sheet
-                </a>{' '}
-                component used to display a notification sidebar.
+                <strong>
+                  Your inbox is as quiet as a wizard’s spellbook at midnight. Check back later for magical updates,
+                  order statuses, or special offers from The Alchemist’s Vault.
+                </strong>
               </SheetDescription>
             </SheetContent>
           </Sheet>

diff --git a/components/ui/hero-banner/hero-banner.tsx b/components/ui/hero-banner/hero-banner.tsx
@@ -1,5 +1,8 @@
 import { ReactNode } from 'react';
 
+import { cn } from '#/lib/utils';
+import { getColorConfigFromPalette } from '#/theme';
+
 import { Button } from '../button/button';
 import { Image, ImageProps } from '../image';
 import { Link, LinkProps } from '../link';
@@ -9,6 +12,8 @@ interface HeroBannerProps {
   bodyText?: ReactNode;
   image?: ImageProps | null;
   cta?: LinkProps | null;
+  size?: boolean | null;
+  colorPalette?: string | null;
   addAttributes?: (name: string) => object | null;
 }
 
@@ -18,11 +23,19 @@ export function HeroBanner(props: HeroBannerProps) {
     headline,
     bodyText,
     cta,
+    size,
+    colorPalette,
     addAttributes = () => ({}), // Default to no-op.
   } = props;
 
+  const colorConfig = getColorConfigFromPalette(colorPalette || '');
+
   return (
-    <div className="relative flex min-h-[calc(100vh-9rem)] items-center">
+    <div
+      className={cn('relative flex min-h-[calc(100vh-9rem)] items-center', {
+        'mx-auto max-w-6xl overflow-hidden rounded-xl': !size,
+      })}
+    >
       {image && (
         <Image
           {...addAttributes('image')}
@@ -31,16 +44,34 @@ export function HeroBanner(props: HeroBannerProps) {
           alt={image.alt}
         />
       )}
-      <div className="mx-auto w-full max-w-6xl px-5 pt-10">
+      <div
+        style={{ backgroundColor: colorConfig.backgroundColor }}
+        className="absolute left-0 top-0 h-full w-full opacity-25"
+      ></div>
+      <div
+        className={cn('z-10 pt-10', {
+          'mx-auto w-full px-5 md:max-w-[65%]': size,
+          'max-w-3xl px-10': !size,
+        })}
+      >
         {headline && (
           <h1
+            style={{ color: colorConfig.headlineColor }}
             {...addAttributes('headline')}
             className={'text-gray-900 mb-4 text-3xl font-extrabold leading-none tracking-tight md:text-4xl lg:text-5xl'}
           >
             {headline}
           </h1>
         )}
-        {bodyText && <div {...addAttributes('bodyText')}>{bodyText}</div>}
+        {bodyText && (
+          <div
+            style={{ color: colorConfig.headlineColor }}
+            {...addAttributes('bodyText')}
+            className="text-lg font-medium leading-6"
+          >
+            {bodyText}
+          </div>
+        )}
         {cta?.href && cta?.children && (
           <div className="mt-6">
             <Button {...addAttributes('ctaText')} asChild>

diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
@@ -66,7 +66,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
+      'left-0 top-0 w-full whitespace-nowrap px-2 py-3 data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
       className
     )}
     {...props}

diff --git a/components/ui/topic-business-info/topic-business-info.tsx b/components/ui/topic-business-info/topic-business-info.tsx
@@ -21,15 +21,15 @@ export const TopicBusinessInfo = ({
     <div className="flex justify-center py-12">
       <div className="max-w-6xl px-5">
         {featuredImage && (
-          <div className="overflow-hidden rounded-lg shadow-lg">
+          <div className="inline-block overflow-hidden rounded-lg shadow-lg">
             <Image {...addAttributes('image')} {...featuredImage} alt={featuredImage.alt} />
           </div>
         )}
 
         <div className="py-6">
           <h2 className="text-3xl">{name}</h2>
           {shortDescription && <div className="pt-6">{shortDescription}</div>}
-          {body && <div className="pt-6">{body}</div>}
+          {body && <div className="wysiwyg pt-6">{body}</div>}
         </div>
       </div>
     </div>

diff --git a/components/ui/topic-person/topic-person.tsx b/components/ui/topic-person/topic-person.tsx
@@ -23,14 +23,14 @@ export const TopicPerson = ({
   addAttributes = () => ({}),
 }: TopicBusinessInfoProps) => {
   return (
-    <div className="mb-12 flex flex-col items-center rounded-xl px-6 py-6 shadow-lg md:flex-row md:gap-6 md:py-0">
+    <div className="my-12 flex flex-col items-center rounded-xl bg-secondaryDark px-10 py-6 text-white md:flex-row md:gap-10">
       {avatar && (
         <div className="flex flex-shrink-0 flex-col items-center">
           <div className="overflow-hiddenshadow-lg flex-shrink-0 rounded-xl">
             <Image {...addAttributes('image')} {...avatar} alt={avatar.alt} />
           </div>
           {!cardStyle && (
-            <div className="mt-3 rounded-md bg-accent px-3 py-2 text-xs">
+            <div className="mt-3 rounded-md bg-accent px-3 py-2 text-xs text-black">
               <strong>Leader profile</strong>
             </div>
           )}