Skip to content

Added dream-studio #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Ankitgkp merged 1 commit into from
Apr 10, 2026
Merged

Added dream-studio #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 125 additions & 0 deletions servers/nextjs/app/presentation-templates/dream-studio/DreamStudioAboutLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import React from 'react';
import * as z from "zod";
import { ImageSchema } from '../defaultSchemes';

export const layoutId = "dream-studio-about";
export const layoutName = "Dream Studio About";
export const layoutDescription = "A text-heavy about slide with soft pastel gradients, a rounded image, and two-column text layout for detailed descriptions.";

export const Schema = z.object({
badge: z.string().min(2).max(30).default("about us.").meta({
description: "Badge/label text at the top. Max 3 words.",
}),
heading: z.string().min(5).max(100).default("We are a group of artists, designers and creatives in London.").meta({
description: "Main heading text. Max 15 words.",
}),
paragraph1: z.string().min(10).max(300).default("We use our expertise to create brands, products and experiences that deliver creative solutions to our clients.").meta({
description: "First paragraph of body text. Max 40 words.",
}),
paragraph2: z.string().min(10).max(300).default("Our team combines strategic thinking with world-class design to help businesses stand out in today's competitive landscape.").meta({
description: "Second paragraph of body text. Max 40 words.",
}),
image: ImageSchema.default({
__image_url__: "https://images.unsplash.com/photo-1487530811176-3780de880c2d?auto=format&fit=crop&w=800&q=80",
__image_prompt__: "Tropical plant leaf on soft pink background",
}).meta({
description: "Supporting image. Nature, abstract, or studio-related recommended.",
}),
});

type SchemaType = z.infer<typeof Schema>;

const DreamStudioAboutLayout = ({ data }: { data: Partial<SchemaType> }) => {
return (
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video relative z-20 mx-auto overflow-hidden"
style={{
background: "linear-gradient(135deg, #E0D4F0 0%, #D8CCE8 20%, #EAD8E8 40%, #F0E0F0 60%, #E8D8F0 80%, #D8C8E8 100%)",
fontFamily: "var(--heading-font-family, 'Inter, sans-serif')",
}}
>
{/* Soft radial overlays */}
<div className="absolute top-0 left-1/3 w-[500px] h-[400px] opacity-[0.35]"
style={{ background: "radial-gradient(ellipse at 50% 30%, #F5D0E0 0%, transparent 60%)" }}
></div>
<div className="absolute bottom-0 right-0 w-[400px] h-[400px] opacity-[0.25]"
style={{ background: "radial-gradient(ellipse at 70% 80%, #C8D8F8 0%, transparent 60%)" }}
></div>

{/* Subtle border */}
<div className="absolute inset-4 rounded-lg" style={{ border: "1px solid rgba(255,255,255,0.5)" }}></div>

<div className="relative h-full flex items-center px-14 lg:px-20 py-12 gap-10">

{/* Left: Image + Badge */}
<div className="flex flex-col items-center gap-4 min-w-[280px] relative z-10">
{/* Badge */}
<div className="px-6 py-2 rounded-full"
style={{
background: "rgba(220, 180, 200, 0.4)",
backdropFilter: "blur(8px)",
border: "1px solid rgba(255,255,255,0.4)",
}}
>
<span className="text-lg font-medium" style={{ color: "#3D2060", fontStyle: "italic" }}>
{data?.badge || "about us."}
</span>
</div>

{/* Rounded Image */}
<div className="w-[220px] h-[220px] rounded-3xl overflow-hidden"
style={{
boxShadow: "0 15px 40px rgba(160, 120, 180, 0.25), 0 0 0 1px rgba(255,255,255,0.3)",
}}
>
{data?.image?.__image_url__ ? (
<img
src={data.image.__image_url__}
alt={data.image.__image_prompt__}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center"
style={{ background: "linear-gradient(135deg, #E8C8D8, #D8B8D0)" }}
>
<span className="text-5xl opacity-30">✦</span>
</div>
)}
</div>
</div>

{/* Right: Text Content */}
<div className="flex-1 flex flex-col gap-6 relative z-10">
{/* Decorative star */}
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" className="mb-1">
<path d="M12 0L14.5 9.5L24 12L14.5 14.5L12 24L9.5 14.5L0 12L9.5 9.5L12 0Z" fill="rgba(90, 60, 120, 0.4)" />
</svg>

{/* Heading */}
<h1 className="text-2xl lg:text-3xl xl:text-4xl font-semibold leading-snug m-0 max-w-lg"
style={{ color: "#2D1B4E" }}
>
{data?.heading || "We are a group of artists, designers and creatives in London."}
</h1>

{/* Two-column text */}
<div className="flex gap-6 mt-2">
<p className="flex-1 text-sm lg:text-base font-normal leading-relaxed"
style={{ color: "rgba(60, 40, 80, 0.65)" }}
>
{data?.paragraph1 || "We use our expertise to create brands, products and experiences that deliver creative solutions to our clients."}
</p>
<p className="flex-1 text-sm lg:text-base font-normal leading-relaxed"
style={{ color: "rgba(60, 40, 80, 0.65)" }}
>
{data?.paragraph2 || "Our team combines strategic thinking with world-class design to help businesses stand out in today's competitive landscape."}
</p>
</div>
</div>

</div>
</div>
);
};

export default DreamStudioAboutLayout;
105 changes: 105 additions & 0 deletions servers/nextjs/app/presentation-templates/dream-studio/DreamStudioCoreValuesLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import React from 'react';
import * as z from "zod";

export const layoutId = "dream-studio-core-values";
export const layoutName = "Dream Studio Core Values";
export const layoutDescription = "A core values slide with decorative star icons and a clean label-description layout on soft pastel gradients.";

export const Schema = z.object({
title: z.string().min(2).max(40).default("core values.").meta({
description: "Main title. Max 3 words.",
}),
tagline: z.string().min(5).max(80).default("experience first.").meta({
description: "Secondary tagline below the values, in italic style. Max 10 words.",
}),
values: z.array(
z.object({
label: z.string().min(2).max(30).meta({ description: "Value name in uppercase bold." }),
})
).min(3).max(5).default([
{ label: "CREATIVITY" },
{ label: "BOLDNESS" },
{ label: "HONESTY" },
{ label: "INTEGRITY" },
]).meta({ description: "Array of core values. 3 to 5 items." })
});

type SchemaType = z.infer<typeof Schema>;

const DreamStudioCoreValuesLayout = ({ data }: { data: Partial<SchemaType> }) => {
const defaultValues = [
{ label: "CREATIVITY" },
{ label: "BOLDNESS" },
{ label: "HONESTY" },
{ label: "INTEGRITY" },
];
const values = data?.values || defaultValues;

return (
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video relative z-20 mx-auto overflow-hidden"
style={{
background: "linear-gradient(135deg, #E4DCF0 0%, #DCD0EC 25%, #E8D8F0 50%, #F0E4F4 75%, #E8DCF0 100%)",
fontFamily: "var(--heading-font-family, 'Inter, sans-serif')",
}}
>
{/* Soft radial overlays */}
<div className="absolute top-0 right-1/3 w-[500px] h-[400px] opacity-[0.3]"
style={{ background: "radial-gradient(ellipse at 50% 20%, #F5D0E0 0%, transparent 60%)" }}
></div>
<div className="absolute bottom-0 left-1/4 w-[400px] h-[400px] opacity-[0.2]"
style={{ background: "radial-gradient(ellipse at 40% 80%, #C8D8F8 0%, transparent 60%)" }}
></div>

{/* Subtle border */}
<div className="absolute inset-4 rounded-lg" style={{ border: "1px solid rgba(255,255,255,0.5)" }}></div>

<div className="relative h-full flex flex-col justify-center px-16 lg:px-24 py-12 gap-8">

{/* Title */}
<h1 className="text-5xl lg:text-6xl xl:text-7xl font-bold leading-[1.0] m-0"
style={{ color: "#2D1B4E" }}
>
{data?.title || "core values."}
</h1>

{/* Values row with star icons */}
<div className="flex items-end gap-8 lg:gap-12">
{values.map((value: any, idx: number) => (
<div key={idx} className="flex flex-col items-center gap-3">
{/* Star icon */}
<div className="w-14 h-14 rounded-full flex items-center justify-center"
style={{
background: "rgba(255, 255, 255, 0.35)",
backdropFilter: "blur(8px)",
border: "1px solid rgba(255,255,255,0.5)",
boxShadow: "0 4px 20px rgba(160, 120, 180, 0.15)",
}}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 0L14.5 9.5L24 12L14.5 14.5L12 24L9.5 14.5L0 12L9.5 9.5L12 0Z" fill="rgba(60, 40, 100, 0.5)" />
</svg>
</div>
{/* Label */}
<span className="text-xs lg:text-sm font-bold tracking-[0.12em] text-center"
style={{ color: "#2D1B4E" }}
>
{value.label}
</span>
</div>
))}
</div>

{/* Tagline */}
<p className="text-xl lg:text-2xl mt-4 m-0"
style={{ color: "rgba(45, 27, 78, 0.6)", fontStyle: "italic", fontWeight: 300 }}
>
{data?.tagline || "experience first."}
</p>

</div>
</div>
);
};

export default DreamStudioCoreValuesLayout;
141 changes: 141 additions & 0 deletions servers/nextjs/app/presentation-templates/dream-studio/DreamStudioExperienceLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import React from 'react';
import * as z from "zod";
import { ImageSchema } from '../defaultSchemes';

export const layoutId = "dream-studio-experience";
export const layoutName = "Dream Studio Experience";
export const layoutDescription = "A creative experience slide with large typography, bullet list, decorative image, and extended description on soft pastel gradients.";

export const Schema = z.object({
preTitle: z.string().min(2).max(40).default("We design the best").meta({
description: "Small text above the main title. Max 6 words.",
}),
title: z.string().min(2).max(30).default("experience").meta({
description: "Large highlighted title word. Max 2 words.",
}),
subtitle: z.string().min(2).max(40).default("for our clients.").meta({
description: "Text below the title. Max 6 words.",
}),
bodyText: z.string().min(10).max(400).default("Our team will help you create and connect with your audience through visuals, offering both graphic designs, art direction, copywriting, and all things submission.").meta({
description: "Extended body text paragraph. Max 40 words.",
}),
bulletPoints: z.array(
z.string().min(2).max(40)
).min(2).max(5).default([
"templates",
"web design",
"branding",
]).meta({ description: "Array of bullet point items. 2 to 5 items." }),
image: ImageSchema.default({
__image_url__: "https://images.unsplash.com/photo-1558618666-fcd25c85f82e?auto=format&fit=crop&w=600&q=80",
__image_prompt__: "Ice cream cones on pastel gradient background",
}).meta({
description: "Decorative image. Playful or creative items recommended.",
}),
});

type SchemaType = z.infer<typeof Schema>;

const DreamStudioExperienceLayout = ({ data }: { data: Partial<SchemaType> }) => {
const defaultBullets = ["templates", "web design", "branding"];
const bullets = data?.bulletPoints || defaultBullets;

return (
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video relative z-20 mx-auto overflow-hidden"
style={{
background: "linear-gradient(135deg, #D8D0F0 0%, #E0D4EC 15%, #E8DCF0 30%, #F0E8F8 50%, #E8D8F0 70%, #D8CCE8 85%, #E0D4F0 100%)",
fontFamily: "var(--heading-font-family, 'Inter, sans-serif')",
}}
>
{/* Soft radial overlays */}
<div className="absolute bottom-0 left-0 w-[500px] h-[400px] opacity-[0.35]"
style={{ background: "radial-gradient(ellipse at 20% 80%, #F5D0E0 0%, transparent 55%)" }}
></div>
<div className="absolute top-0 right-0 w-[400px] h-[400px] opacity-[0.25]"
style={{ background: "radial-gradient(ellipse at 80% 20%, #C8D8F8 0%, transparent 55%)" }}
></div>

{/* Subtle border */}
<div className="absolute inset-4 rounded-lg" style={{ border: "1px solid rgba(255,255,255,0.5)" }}></div>

<div className="relative h-full flex items-stretch px-14 lg:px-20 py-12 gap-8 z-10">

{/* Left: Image + Bullet points */}
<div className="flex flex-col justify-end gap-6 min-w-[280px]">
{/* Image */}
<div className="w-[240px] h-[200px] rounded-2xl overflow-hidden"
style={{
boxShadow: "0 15px 40px rgba(160, 120, 180, 0.2), 0 0 0 1px rgba(255,255,255,0.3)",
}}
>
{data?.image?.__image_url__ ? (
<img
src={data.image.__image_url__}
alt={data.image.__image_prompt__}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center"
style={{ background: "linear-gradient(135deg, #E8C8D8, #D8B8D0)" }}
>
<span className="text-5xl opacity-30">✦</span>
</div>
)}
</div>

{/* Bullets */}
<div className="flex flex-col gap-1">
{bullets.map((bullet: string, idx: number) => (
<div key={idx} className="flex items-center gap-2">
<span className="text-xs" style={{ color: "rgba(45, 27, 78, 0.4)" }}>•</span>
<span className="text-sm font-medium"
style={{ color: "rgba(45, 27, 78, 0.55)", fontStyle: "italic" }}
>
{bullet}
</span>
</div>
))}
</div>
</div>

{/* Center + Right: Large Text */}
<div className="flex-1 flex flex-col justify-center gap-4">
{/* Pre-title */}
<span className="text-base lg:text-lg font-normal"
style={{ color: "rgba(45, 27, 78, 0.55)" }}
>
{data?.preTitle || "We design the best"}
</span>

{/* Title */}
<h1 className="text-5xl lg:text-6xl xl:text-7xl m-0 leading-[1.0]"
style={{ color: "#2D1B4E", fontStyle: "italic", fontWeight: 300 }}
>
{data?.title || "experience"}
</h1>

{/* Subtitle */}
<span className="text-xl lg:text-2xl font-medium"
style={{ color: "#2D1B4E" }}
>
{data?.subtitle || "for our clients."}
</span>

{/* Divider */}
<div className="w-16 h-[1px] mt-2" style={{ background: "rgba(45, 27, 78, 0.2)" }}></div>

{/* Body Text */}
<p className="text-sm lg:text-base font-normal leading-[1.8] max-w-lg mt-2"
style={{ color: "rgba(60, 40, 80, 0.55)" }}
>
{data?.bodyText || "Our team will help you create and connect with your audience through visuals, offering both graphic designs, art direction, copywriting, and all things submission."}
</p>
</div>

</div>
</div>
);
};

export default DreamStudioExperienceLayout;
Loading
Loading