diff --git a/apps/website/public/theme-generator-landing-bg-flipped.png b/apps/website/public/theme-generator-landing-bg-flipped.png
new file mode 100644
index 000000000..16550d126
Binary files /dev/null and b/apps/website/public/theme-generator-landing-bg-flipped.png differ
diff --git a/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx
index 74fdc5c47..417adbe20 100644
--- a/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx
+++ b/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx
@@ -1,5 +1,55 @@
-import { DxcLink, DxcContainer, DxcFlex, DxcHeading, DxcTypography } from "@dxc-technology/halstack-react";
+import {
+ DxcLink,
+ DxcContainer,
+ DxcFlex,
+ DxcHeading,
+ DxcTypography,
+ DxcParagraph,
+ DxcInset,
+ DxcGrid,
+} from "@dxc-technology/halstack-react";
import Link from "next/link";
+import LandingCards from "./components/LandingCards";
+import LandingSteps from "./components/LandingSteps";
+
+const steps = [
+ {
+ title: "Define your brand",
+ description: "Choose your core and semantic colors to set the foundation of your theme.",
+ },
+ {
+ title: "Let the system do the rest",
+ description: "The generator creates a complete set of tokens based on your colors.",
+ },
+ {
+ title: "See it in real components",
+ description: "Preview your theme applied to real Halstack components and layouts.",
+ },
+ {
+ title: "Export and use it",
+ description: "Review your theme and export it as a ready-to-use JSON file.",
+ },
+];
+
+const cards = [
+ {
+ icon: "filled_palette",
+ title: "From brand colors to design tokens",
+ description: "Define your core and semantic colors and let the generator create a structured set of design tokens.",
+ },
+ {
+ icon: "preview",
+ title: "Preview your theme in real components",
+ description:
+ "Apply your generated tokens to real Halstack components and layouts to validate your color choices in context.",
+ },
+ {
+ icon: "accessibility",
+ title: "Accessible and ready to implement",
+ description:
+ "The generator adjusts color combinations to aim for strong contrast and readability. Export a ready-to-use theme file and integrate it into your development workflow.",
+ },
+];
const ThemeGeneratorPage = () => {
return (
@@ -37,6 +87,69 @@ const ThemeGeneratorPage = () => {
+
+
+
+
+
+
+
+ Theme Generator removes the complexity of brand customization so your team can move
+ faster, stay consistent, and ship with confidence.
+
+
+
+
+
+
+
+
+
+
+ From brand colors to a production-ready Halstack theme in just a few clear steps.
+
+
+
+
+
+
+
+ Your brand, fully expressed in Halstack
+
+
+
+
+ Turn your brand into a living part of your products. Keep every interface aligned, consistent, and
+ easier to evolve as your needs grow.
+
+
+
+
+
+
+
+ Open Theme Generator
+
+
+
+ View documentation
+
+
+
+
);
};
diff --git a/apps/website/screens/theme-generator/components/LandingCards.tsx b/apps/website/screens/theme-generator/components/LandingCards.tsx
new file mode 100644
index 000000000..817daaf6a
--- /dev/null
+++ b/apps/website/screens/theme-generator/components/LandingCards.tsx
@@ -0,0 +1,27 @@
+import { DxcContainer, DxcFlex, DxcTypography, DxcAvatar } from "@dxc-technology/halstack-react";
+
+const LandingCard = ({ icon, title, description }: { icon: string; title: string; description: string }) => {
+ return (
+
+
+
+
+ {title}
+ {description}
+
+
+
+ );
+};
+
+const LandingCards = ({ cards }: { cards: { icon: string; title: string; description: string }[] }) => {
+ return (
+
+ {cards.map((card, index) => (
+
+ ))}
+
+ );
+};
+
+export default LandingCards;
diff --git a/apps/website/screens/theme-generator/components/LandingSteps.tsx b/apps/website/screens/theme-generator/components/LandingSteps.tsx
new file mode 100644
index 000000000..3e2456c79
--- /dev/null
+++ b/apps/website/screens/theme-generator/components/LandingSteps.tsx
@@ -0,0 +1,40 @@
+import { DxcContainer, DxcFlex, DxcTypography, DxcAvatar, DxcDivider, DxcInset } from "@dxc-technology/halstack-react";
+import React from "react";
+
+const LandingStep = ({ index, title, description }: { index: number; title: string; description: string }) => {
+ return (
+
+
+
+
+ {title}
+
+ {description}
+
+
+
+
+ );
+};
+
+const LandingSteps = ({ steps }: { steps: { title: string; description: string }[] }) => {
+ return (
+
+
+ {steps.map((step, index) => (
+
+
+ {index !== steps.length - 1 && (
+
+
+
+
+
+ )}
+
+ ))}
+
+
+ );
+};
+export default LandingSteps;