blocks-dusted 0.1.11 → 0.1.13

package/templates/blocks/DDHG-CTASection2/Component.tsx

@@ -1,185 +1,184 @@
-'use client'
-
-import { motion } from 'framer-motion'
-import React from 'react'
-
-import { cn } from '@/utilities/ui'
-
-type PortableDoc = {
-  slug?: string | null
-  breadcrumbs?: Array<{ url?: string | null }> | null
-  [key: string]: unknown
-}
-
-type LinkReference =
-  | { relationTo: 'pages'; value: number | PortableDoc }
-  | { relationTo: 'posts'; value: number | PortableDoc }
-  | { relationTo: 'projects'; value: number | PortableDoc }
-  | { relationTo: 'thoughts'; value: number | PortableDoc }
-
-type BlockLinkField = {
-  type?: 'reference' | 'custom' | null
-  reference?: LinkReference | null
-  url?: string | null
-  label?: string | null
-  newTab?: boolean | null
-} | null
-
-export type DDHGCTASection2Props = {
-  sectionId?: string | null
-  customClassName?: string | null
-  customCSS?: string | null
-  blockId?: string | null
-  scrollSpeed?: string | number | null
-  eyebrowPrefix?: string | null
-  eyebrowEmphasis?: string | null
-  headingLineOne?: string | null
-  headingLineTwo?: string | null
-  description?: string | null
-  showDivider?: boolean | null
-  primaryLink?: BlockLinkField
-  secondaryLink?: BlockLinkField
-}
-
-function getHref(link?: BlockLinkField): string | null {
-  if (!link) return null
-
-  if (link.type === 'custom' && link.url) return link.url
-
-  if (link.type === 'reference' && link.reference?.value) {
-    const { relationTo, value } = link.reference
-    if (typeof value === 'number') return null
-
-    if (relationTo === 'pages') {
-      const crumbs = Array.isArray(value.breadcrumbs) ? value.breadcrumbs : []
-      const last = crumbs[crumbs.length - 1]
-      if (last?.url) return last.url
-
-      const slug = value.slug
-      if (!slug || slug === 'home') return '/'
-      return slug.startsWith('/') ? slug : `/${slug}`
-    }
-
-    const slug = value.slug
-    if (!slug) return null
-
-    if (relationTo === 'projects') return `/archives/${slug}`
-    if (relationTo === 'posts' || relationTo === 'thoughts') return `/thoughts/${slug}`
-    return `/${slug}`
-  }
-
-  return null
-}
-
-function CTAButton({ link, variant }: { link?: BlockLinkField; variant: 'primary' | 'secondary' }) {
-  const href = getHref(link)
-  if (!href) return null
-
-  const target = link?.newTab ? '_blank' : undefined
-  const rel = link?.newTab ? 'noopener noreferrer' : undefined
-
-  return (
-    <a
-      href={href}
-      target={target}
-      rel={rel}
-      className={cn(
-        'inline-flex min-h-10 items-center justify-center px-5 py-2.5 text-sm font-medium transition-all duration-300',
-        variant === 'primary'
-          ? 'bg-stone-800 text-white hover:bg-stone-700'
-          : 'border border-stone-400 text-stone-700 dark:text-stone-200 hover:bg-stone-100'
-      )}
-    >
-      {link?.label || 'Learn More'}
-    </a>
-  )
-}
-
-const revealMotion = {
-  initial: { opacity: 0, y: 18 },
-  whileInView: { opacity: 1, y: 0 },
-  viewport: { once: true, amount: 0.25 },
-  transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] }
-}
-
-export const DDHGCTASection2: React.FC<DDHGCTASection2Props> = ({
-  sectionId,
-  customClassName,
-  customCSS,
-  blockId,
-  scrollSpeed,
-  eyebrowPrefix = 'ready to',
-  eyebrowEmphasis = 'begin?',
-  headingLineOne = "LET'S BUILD YOUR",
-  headingLineTwo = 'NEXT SPACE',
-  description = 'Every great space begins with a conversation. Share your vision, and we will map the path from where you are to where you want to be.',
-  showDivider = true,
-  primaryLink,
-  secondaryLink
-}) => {
-  const hasButtons = Boolean(getHref(primaryLink) || getHref(secondaryLink))
-
-  return (
-    <div
-      id={sectionId ?? undefined}
-      data-block-id={blockId ?? undefined}
-      data-scroll={scrollSpeed ? true : undefined}
-      data-scroll-speed={scrollSpeed ? String(scrollSpeed) : undefined}
-      className={cn('mb-10 px-5 py-20 md:px-8', customClassName)}
-    >
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div className="mx-auto max-w-7xl">
-        <motion.div
-          className="z-plane-2 relative overflow-hidden"
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, amount: 0.25 }}
-          transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
-        >
-          <div className="relative p-8 text-center md:p-12 lg:p-16">
-            {(eyebrowPrefix || eyebrowEmphasis) && (
-              <p className="mb-4 text-[10px] uppercase tracking-[0.2em] text-stone-600 dark:text-stone-300">
-                {eyebrowPrefix && <span className="font-light">{eyebrowPrefix} </span>}
-                {eyebrowEmphasis && <span className="font-medium">{eyebrowEmphasis}</span>}
-              </p>
-            )}
-
-            <motion.div className="heading" {...revealMotion}>
-              {(headingLineOne || headingLineTwo) && (
-                <h2 className="mb-4 text-3xl font-medium leading-none tracking-tight text-purple-700 dark:text-purple-500 md:text-5xl">
-                  {headingLineOne}
-                  {headingLineOne && headingLineTwo && <br />}
-                  <span className="font-bold">{headingLineTwo}</span>
-                </h2>
-              )}
-            </motion.div>
-
-            {showDivider && <div className="mx-auto mb-6 h-px w-12 bg-stone-500" />}
-
-            <motion.div
-              className="description"
-              {...revealMotion}
-              transition={{ ...revealMotion.transition, delay: 0.08 }}
-            >
-              {description && (
-                <p className="mx-auto mb-8 max-w-lg text-[14px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
-                  {description}
-                </p>
-              )}
-            </motion.div>
-
-            {hasButtons && (
-              <div className="flex flex-wrap items-center justify-center gap-3">
-                <CTAButton link={primaryLink} variant="primary" />
-                <CTAButton link={secondaryLink} variant="secondary" />
-              </div>
-            )}
-          </div>
-        </motion.div>
-      </div>
-    </div>
-  )
-}
-
+'use client'
+
+import { motion } from 'framer-motion'
+import React from 'react'
+
+import { cn } from '@/utilities/ui'
+
+type PortableDoc = {
+  slug?: string | null
+  breadcrumbs?: Array<{ url?: string | null }> | null
+  [key: string]: unknown
+}
+
+type LinkReference =
+  | { relationTo: 'pages'; value: number | PortableDoc }
+  | { relationTo: 'projects'; value: number | PortableDoc }
+  | { relationTo: 'thoughts'; value: number | PortableDoc }
+
+type BlockLinkField = {
+  type?: 'reference' | 'custom' | null
+  reference?: LinkReference | null
+  url?: string | null
+  label?: string | null
+  newTab?: boolean | null
+} | null
+
+export type DDHGCTASection2Props = {
+  sectionId?: string | null
+  customClassName?: string | null
+  customCSS?: string | null
+  blockId?: string | null
+  scrollSpeed?: string | number | null
+  eyebrowPrefix?: string | null
+  eyebrowEmphasis?: string | null
+  headingLineOne?: string | null
+  headingLineTwo?: string | null
+  description?: string | null
+  showDivider?: boolean | null
+  primaryLink?: BlockLinkField
+  secondaryLink?: BlockLinkField
+}
+
+function getHref(link?: BlockLinkField): string | null {
+  if (!link) return null
+
+  if (link.type === 'custom' && link.url) return link.url
+
+  if (link.type === 'reference' && link.reference?.value) {
+    const { relationTo, value } = link.reference
+    if (typeof value === 'number') return null
+
+    if (relationTo === 'pages') {
+      const crumbs = Array.isArray(value.breadcrumbs) ? value.breadcrumbs : []
+      const last = crumbs[crumbs.length - 1]
+      if (last?.url) return last.url
+
+      const slug = value.slug
+      if (!slug || slug === 'home') return '/'
+      return slug.startsWith('/') ? slug : `/${slug}`
+    }
+
+    const slug = value.slug
+    if (!slug) return null
+
+    if (relationTo === 'projects') return `/archives/${slug}`
+    if (relationTo === 'thoughts') return `/thoughts/${slug}`
+    return `/${slug}`
+  }
+
+  return null
+}
+
+function CTAButton({ link, variant }: { link?: BlockLinkField; variant: 'primary' | 'secondary' }) {
+  const href = getHref(link)
+  if (!href) return null
+
+  const target = link?.newTab ? '_blank' : undefined
+  const rel = link?.newTab ? 'noopener noreferrer' : undefined
+
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={rel}
+      className={cn(
+        'inline-flex min-h-10 items-center justify-center rounded-md squircle px-5 py-2.5 text-sm font-medium transition-all duration-300 0 hover:shadow-xl hover:-translate-y-0.5 hover:transition-all hover:duration-300',
+        variant === 'primary'
+          ? 'bg-stone-800 text-white hover:bg-stone-700'
+          : 'border border-stone-400 text-stone-700 dark:text-stone-200 hover:bg-stone-100 dark:hover:text-stone-700',
+      )}
+    >
+      {link?.label || 'Learn More'}
+    </a>
+  )
+}
+
+const revealMotion = {
+  initial: { opacity: 0, y: 18 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true, amount: 0.25 },
+  transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
+}
+
+export const DDHGCTASection2: React.FC<DDHGCTASection2Props> = ({
+  sectionId,
+  customClassName,
+  customCSS,
+  blockId,
+  scrollSpeed,
+  eyebrowPrefix = 'ready to',
+  eyebrowEmphasis = 'begin?',
+  headingLineOne = "LET'S BUILD YOUR",
+  headingLineTwo = 'NEXT SPACE',
+  description = 'Every great space begins with a conversation. Share your vision, and we will map the path from where you are to where you want to be.',
+  showDivider = true,
+  primaryLink,
+  secondaryLink,
+}) => {
+  const hasButtons = Boolean(getHref(primaryLink) || getHref(secondaryLink))
+
+  return (
+    <div
+      id={sectionId ?? undefined}
+      data-block-id={blockId ?? undefined}
+      data-scroll={scrollSpeed ? true : undefined}
+      data-scroll-speed={scrollSpeed ? String(scrollSpeed) : undefined}
+      className={cn('mb-10 px-5 py-20 md:px-8', customClassName)}
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div className="mx-auto max-w-7xl">
+        <motion.div
+          className="z-plane-2 relative overflow-hidden rounded-md squircle border border-stone-300/10 bg-stone-100/50 transition-all duration-300 dark:border-stone-700/10 dark:bg-stone-900/50 shadow-xl"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.25 }}
+          transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
+        >
+          <div className="relative p-8 text-center md:p-12 lg:p-16">
+            {(eyebrowPrefix || eyebrowEmphasis) && (
+              <p className="mb-4 text-xs uppercase tracking-[0.2em] text-stone-600 dark:text-stone-300">
+                {eyebrowPrefix && <span className="font-light">{eyebrowPrefix} </span>}
+                {eyebrowEmphasis && <span className="font-medium">{eyebrowEmphasis}</span>}
+              </p>
+            )}
+
+            <motion.div className="heading" {...revealMotion}>
+              {(headingLineOne || headingLineTwo) && (
+                <h2 className="mb-4 text-3xl font-medium leading-none tracking-tight text-purple-700 dark:text-purple-500 md:text-5xl">
+                  {headingLineOne}
+                  {headingLineOne && headingLineTwo && <br />}
+                  <span className="font-bold">{headingLineTwo}</span>
+                </h2>
+              )}
+            </motion.div>
+
+            {showDivider && <div className="mx-auto mb-6 h-px w-12 bg-stone-500" />}
+
+            <motion.div
+              className="description"
+              {...revealMotion}
+              transition={{ ...revealMotion.transition, delay: 0.08 }}
+            >
+              {description && (
+                <p className="mx-auto mb-8 max-w-lg text-[14px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                  {description}
+                </p>
+              )}
+            </motion.div>
+
+            {hasButtons && (
+              <div className="flex flex-wrap items-center justify-center gap-3">
+                <CTAButton link={primaryLink} variant="primary" />
+                <CTAButton link={secondaryLink} variant="secondary" />
+              </div>
+            )}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
 export default DDHGCTASection2