116 lines
5.1 KiB
TypeScript
116 lines
5.1 KiB
TypeScript
import React from 'react'
|
|
import * as z from "zod";
|
|
import { ImageSchema } from '@/presentation-layouts/defaultSchemes';
|
|
|
|
|
|
export const layoutId = 'first-slide'
|
|
export const layoutName = 'First Slide'
|
|
export const layoutDescription = 'A slide with a title, subtitle, author, date, company, and background image'
|
|
|
|
const firstSlideSchema = z.object({
|
|
title: z.string().min(3).max(100).default('Welcome to Our Presentation').meta({
|
|
description: "Main title of the presentation",
|
|
}),
|
|
subtitle: z.string().min(10).max(200).default('Subtitle for the slide').optional().meta({
|
|
description: "Optional subtitle or tagline",
|
|
}),
|
|
author: z.string().max(100).default('John Doe').optional().meta({
|
|
description: "Author or presenter name",
|
|
}),
|
|
date: z.string().optional().meta({
|
|
description: "Presentation date",
|
|
}),
|
|
company: z.string().max(100).default('Company Name').optional().meta({
|
|
description: "Company or organization name",
|
|
}),
|
|
backgroundImage: ImageSchema.optional().meta({
|
|
description: "Background image for the slide",
|
|
})
|
|
})
|
|
|
|
export const Schema = firstSlideSchema
|
|
|
|
export type FirstSlideData = z.infer<typeof firstSlideSchema>
|
|
|
|
interface FirstSlideLayoutProps {
|
|
data?: Partial<FirstSlideData>
|
|
}
|
|
|
|
const FirstSlideLayout: React.FC<FirstSlideLayoutProps> = ({ data: slideData }) => {
|
|
|
|
|
|
return (
|
|
<div
|
|
className="relative w-full aspect-[16/9] flex flex-col bg-white overflow-hidden shadow-2xl border border-slate-200"
|
|
style={slideData?.backgroundImage ? {
|
|
backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData.backgroundImage.__image_url__})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center'
|
|
} : {}}
|
|
>
|
|
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 h-full flex flex-col">
|
|
{/* Header */}
|
|
<div className="flex-1 flex flex-col justify-center items-center text-center px-16 py-12">
|
|
{/* Title */}
|
|
<h1 className="text-7xl font-black mb-8 leading-tight tracking-tight max-w-4xl">
|
|
<span className="text-gray-900">{slideData?.title?.split(' ').slice(0, -1).join(' ')}</span>{' '}
|
|
<span className={`bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent`}>
|
|
{slideData?.title?.split(' ').slice(-1)[0]}
|
|
</span>
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
{slideData?.subtitle && (
|
|
<div className="relative mb-12">
|
|
<div className="relative">
|
|
<div className={`w-32 h-1.5 bg-gradient-to-r from-blue-600 to-blue-800 rounded-full shadow-lg`} />
|
|
<div className={`absolute inset-0 w-32 h-1.5 bg-gradient-to-r from-blue-600 to-blue-800 rounded-full blur-sm opacity-50`} />
|
|
</div>
|
|
<p className="text-2xl text-gray-600 font-light mt-6 max-w-2xl leading-relaxed">
|
|
{slideData.subtitle}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Date */}
|
|
{slideData?.date && (
|
|
<p className={`text-base font-medium break-words from-blue-600 to-blue-800 bg-gradient-to-r bg-clip-text text-transparent`}>
|
|
{slideData.date}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer with Author and Company */}
|
|
<div className="px-16 pb-8">
|
|
<div className="flex justify-between items-end">
|
|
<div className="text-left">
|
|
{slideData?.author && (
|
|
<p className="text-lg font-semibold text-gray-800 mb-1">{slideData.author}</p>
|
|
)}
|
|
{slideData?.company && (
|
|
<p className="text-sm text-gray-600">{slideData.company}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom accent */}
|
|
<div className="absolute bottom-0 left-0 right-0">
|
|
<div className={`absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-r from-blue-600 to-blue-800 shadow-lg`}>
|
|
{/* Glow effect */}
|
|
<div className={`absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-800 blur-sm opacity-50`} />
|
|
</div>
|
|
{/* Corner accents */}
|
|
<div className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-blue-600 to-blue-800 opacity-5 rounded-bl-full`} />
|
|
<div className={`absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-tr from-blue-600 to-blue-800 opacity-5 rounded-tr-full`} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FirstSlideLayout
|
|
|