Complete pages restructuring - home and brand-guidelines

Co-authored-by: neilime <314088+neilime@users.noreply.github.com>

Author: Copilot

application/src/pages/brand-guidelines/_content.astro

@@ -2,7 +2,7 @@
 import Layout from '~/layouts/PageLayout.astro';
 import HeroText from '~/components/widgets/HeroText.astro';
 import Features3 from '~/components/widgets/Features3.astro';
-import Content from '~/components/widgets/Content.astro';
+import ContentWidget from '~/components/widgets/Content.astro';
 
 interface Props {
   metadata: any;
@@ -95,7 +95,7 @@ const { metadata, hero, colorPalette, typography, logoDownloads, usageGuidelines
   />
 
   <!-- Usage Guidelines -->
-  <Content tagline={usageGuidelines.tagline} title={usageGuidelines.title} items={[...usageGuidelines.items]}>
+  <ContentWidget tagline={usageGuidelines.tagline} title={usageGuidelines.title} items={[...usageGuidelines.items]}>
     <Fragment slot="content">
       <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
         {usageGuidelines.contentTitle}
@@ -108,7 +108,7 @@ const { metadata, hero, colorPalette, typography, logoDownloads, usageGuidelines
     <Fragment slot="bg">
       <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
     </Fragment>
-  </Content>
+  </ContentWidget>
 
   <!-- Note Section -->
   <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-4xl">

application/src/pages/en/index.astro

@@ -9,7 +9,7 @@ import Content from '../home/_content.astro';
     hero={t.hero}
     note={t.note}
     features={t.features}
-    content={t.content}
+    contentSection={t.content}
     steps={t.steps}
     stats={t.stats}
     callToAction={t.callToAction}

application/src/pages/fr/index.astro

@@ -9,7 +9,7 @@ import Content from '../home/_content.astro';
     hero={t.hero}
     note={t.note}
     features={t.features}
-    content={t.content}
+    contentSection={t.content}
     steps={t.steps}
     stats={t.stats}
     callToAction={t.callToAction}

application/src/pages/home/_content.astro

@@ -3,7 +3,7 @@ import Hero from '~/components/widgets/Hero.astro';
 import Note from '~/components/widgets/Note.astro';
 import Features from '~/components/widgets/Features.astro';
 import Steps from '~/components/widgets/Steps.astro';
-import Content from '~/components/widgets/Content.astro';
+import ContentWidget from '~/components/widgets/Content.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
 import CountDown from '~/components/widgets/CountDown.astro';
@@ -13,13 +13,13 @@ export interface Props {
   hero: any;
   note: any;
   features: any;
-  content: any;
+  contentSection: any;
   steps: any;
   stats: any;
   callToAction: any;
 }
 
-const { hero, note, features, content, steps, stats, callToAction } = Astro.props;
+const { hero, note, features, contentSection, steps, stats, callToAction } = Astro.props;
 
 const heroActionsWithPermalinks = hero.actions.map((action: any) => ({
   ...action,
@@ -32,16 +32,13 @@ const callToActionActionsWithPermalinks = callToAction.actions.map((action: any)
 }));
 ---
 
-<Hero actions={heroActionsWithPermalinks} image={hero.image}>
-  <Fragment slot="title">
-    {hero.title.main} <br />
-    <span class="text-accent dark:text-white">{hero.title.date}</span> {hero.title.location}
-    <CountDown eventDate={hero.eventDate} />
-  </Fragment>
-
-  <Fragment slot="subtitle">
-    {hero.subtitle}
-  </Fragment>
+<Hero
+  actions={heroActionsWithPermalinks}
+  image={hero.image}
+>
+  <Fragment slot="title" set:html={hero.title} />
+  <Fragment slot="subtitle" set:text={hero.subtitle} />
+  <CountDown slot="title" eventDate={hero.eventDate} />
 </Hero>
 
 <Note title={note.title} description={note.description} />
@@ -54,30 +51,25 @@ const callToActionActionsWithPermalinks = callToAction.actions.map((action: any)
   items={[...features.items]}
 />
 
-<Content
-  isReversed={content.isReversed}
-  tagline={content.tagline}
-  title={content.title}
-  items={[...content.items]}
-  image={content.image}
->
-  <Fragment slot="content">
-    <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">{content.contentTitle}</h3>
-    {content.contentDescription}
-  </Fragment>
-  <Fragment slot="bg">
-    <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
-  </Fragment>
-</Content>
-
-<Steps title={steps.title} items={[...steps.items]} image={steps.image} />
+<ContentWidget
+  tagline={contentSection.tagline}
+  title={contentSection.title}
+  items={[...contentSection.items]}
+  image={contentSection.image}
+/>
 
-<Stats stats={[...stats.stats]} />
+<Steps
+  title={steps.title}
+  items={[...steps.items]}
+  image={steps.image}
+/>
 
-<CallToAction actions={callToActionActionsWithPermalinks}>
-  <Fragment slot="title">{callToAction.title}</Fragment>
+<Stats
+  stats={[...stats.items]}
+/>
 
-  <Fragment slot="subtitle">
-    {callToAction.subtitle}
-  </Fragment>
-</CallToAction>
+<CallToAction
+  title={callToAction.title}
+  subtitle={callToAction.subtitle}
+  actions={callToActionActionsWithPermalinks}
+/>