feat: New template improvements
This commit is contained in:
shiva raj badu
parent
de290281eb
commit
679ae31a4e
7 changed files with 21 additions and 21 deletions
|
|
@ -54,7 +54,7 @@ const BusinessChallengesGridSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] flex flex-col"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
|
|
@ -70,7 +70,7 @@ const BusinessChallengesGridSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
</div>
|
||||
|
||||
<div
|
||||
className="grid grid-cols-2 justify-between items-center gap-y-[63px] px-[84px] py-[70px] gap-x-[63px]"
|
||||
className="grid grid-cols-2 justify-between items-center flex-1 gap-y-[63px] px-[84px] py-[70px] gap-x-[63px]"
|
||||
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{challenges?.map((challenge, index) => (
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
{columns?.map((column, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex h-[94px] items-center justify-center border-r text-[20px] font-semibold uppercase tracking-[0.2em]"
|
||||
className="flex h-[94px] items-center px-[33px] justify-center border-r text-[20px] font-semibold uppercase tracking-[0.2em]"
|
||||
style={{
|
||||
backgroundColor:
|
||||
index === 3
|
||||
|
|
@ -183,7 +183,7 @@ const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
style={{ borderColor: "var(--stroke,#c5cccb)" }}
|
||||
>
|
||||
<div
|
||||
className="flex h-[94px] items-center border-r pl-[34px] text-[20px] font-semibold uppercase tracking-[0.2em]"
|
||||
className="flex items-center border-r pl-[34px] text-[20px] font-semibold uppercase tracking-[0.2em]"
|
||||
style={{
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
borderColor: "var(--stroke,#c5cccb)",
|
||||
|
|
@ -196,7 +196,7 @@ const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
{cells?.map((status, cellIndex) => (
|
||||
<div
|
||||
key={cellIndex}
|
||||
className="flex h-[94px] items-center justify-center border-r"
|
||||
className="flex p-[33px] items-center justify-center border-r"
|
||||
style={{
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
borderColor: "var(--stroke,#c5cccb)",
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ const ImageGallerySlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
{title}
|
||||
</h2>
|
||||
<p
|
||||
className="mt-[24px] w-[620px] text-[24px] font-normal text-[#15342DCC]"
|
||||
className="mt-[24px] w-[584px] text-[24px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{description}
|
||||
|
|
@ -134,12 +134,12 @@ const ImageGallerySlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<img
|
||||
src={bottomCenterImage?.__image_url__}
|
||||
alt={bottomCenterImage?.__image_prompt__}
|
||||
className="h-[290px] w-[270px] object-cover"
|
||||
className="h-[294px] w-[270px] object-cover"
|
||||
/>
|
||||
<img
|
||||
src={bottomRightImage?.__image_url__}
|
||||
alt={bottomRightImage?.__image_prompt__}
|
||||
className="h-[290px] w-[270px] object-cover"
|
||||
className="h-[294px] w-[270px] object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ export const slideLayoutDescription =
|
|||
|
||||
const KpiSchema = z.object({
|
||||
value: z.string().max(5).meta({
|
||||
description: "Primary KPI value shown in a card.",
|
||||
description: "Primary KPI value shown in a card. Should be less than 5 characters.",
|
||||
}),
|
||||
body: z.string().max(20).meta({
|
||||
description: "Short KPI supporting text.",
|
||||
body: z.string().max(16).meta({
|
||||
description: "Short KPI supporting text. Should be less than 16 characters.",
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ const PlanSchema = z.object({
|
|||
price: z.string().min(4).max(12).meta({
|
||||
description: "Plan price label shown at the top of each card.",
|
||||
}),
|
||||
description: z.string().max(20).meta({
|
||||
description: z.string().max(18).meta({
|
||||
description: "Short statement describing the plan.",
|
||||
}),
|
||||
features: z
|
||||
.array(z.string().max(18))
|
||||
.array(z.string().max(14))
|
||||
|
||||
.max(4)
|
||||
.meta({
|
||||
|
|
|
|||
|
|
@ -365,7 +365,7 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
{taglineLabel}
|
||||
</p>
|
||||
<p
|
||||
className="mt-[12px] text-[24px] leading-[1.11] text-[#083F37]/75"
|
||||
className="mt-[12px] text-[24px] mb-5 leading-[1.11] text-[#083F37]/75"
|
||||
style={{ color: "var(--background-text,#083F37BF)" }}
|
||||
>
|
||||
{taglineBody}
|
||||
|
|
@ -374,7 +374,7 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
</div>
|
||||
|
||||
<div
|
||||
className={`absolute bottom-[50px] left-[266px] w-[580px] bg-[#F3F3F3] px-[28px] pb-[18px] pt-[20px] ${activeChartStyle === "mini-bars" ? "h-[308px]" : "h-[350px]"
|
||||
className={`absolute bottom-[40px] left-[266px] w-[580px] bg-[#F3F3F3] px-[28px] pb-[18px] pt-[20px] ${activeChartStyle === "mini-bars" ? "h-[308px]" : "h-[350px]"
|
||||
}`}
|
||||
style={{ backgroundColor: "var(--card-color,#F3F3F3)" }}
|
||||
>
|
||||
|
|
@ -660,10 +660,10 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
</div>
|
||||
|
||||
<div
|
||||
className={`absolute right-[38px] w-[362px] ${activeChartStyle === "mini-bars" ? "top-[382px]" : "top-[320px]"
|
||||
className={`absolute right-[38px] bottom-[40px] w-[362px] ${activeChartStyle === "mini-bars" ? "top-[382px]" : "top-[320px]"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col gap-[24px]">
|
||||
<div className="flex flex-col justify-end items-end gap-[24px]">
|
||||
{visibleMetricCards.map((metric, index) => (
|
||||
<div
|
||||
key={`${metric.value}-${index}`}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export const Schema = z.object({
|
|||
}),
|
||||
sections: z
|
||||
.array(SectionSchema)
|
||||
.min(6)
|
||||
|
||||
.max(6)
|
||||
.default([
|
||||
{ title: "SECTION TITLE", number: "01", description: "Lorem ipsum dolor sit." },
|
||||
|
|
@ -64,7 +64,7 @@ const TableOfContentSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
>
|
||||
<div className="grid h-full grid-cols-[1fr_1fr]">
|
||||
<div className="px-[128px] pt-[69px]" style={{ backgroundColor: PRODUCT_DARK }}>
|
||||
<div className="space-y-[52px]">
|
||||
<div className="space-y-[40px]">
|
||||
{sections?.map((section, index) => (
|
||||
<div key={index} className="flex items-center justify-between">
|
||||
<div>
|
||||
|
|
@ -75,12 +75,12 @@ const TableOfContentSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
>
|
||||
{section.title}
|
||||
</p>
|
||||
<p
|
||||
{section.description && <p
|
||||
className="mt-[6px] text-[18px] leading-[1.2] text-[#ecf2f1]"
|
||||
style={{ color: "var(--primary-text,#ecf2f1)" }}
|
||||
>
|
||||
{section.description}
|
||||
</p>
|
||||
</p>}
|
||||
</div>
|
||||
<p
|
||||
className="text-[22px] font-medium text-[#ecf2f1]"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue