Modify Features3 when they are consecutive

src/components/widgets/Features3.astro

@@ -12,6 +12,8 @@ const {
   image,
   items = [],
   columns,
+  isBeforeContent,
+  isAfterContent,
 
   id,
   isDark = false,
@@ -20,7 +22,14 @@ const {
 } = Astro.props as Features;
 ---
 
-<WidgetWrapper id={id} isDark={isDark} containerClass={classes?.container} bg={bg}>
+<WidgetWrapper
+  id={id}
+  isDark={isDark}
+  containerClass={`${isBeforeContent ? 'md:pb-8 lg:pb-12' : ''} ${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${
+    classes?.container ?? ''
+  }`}
+  bg={bg}
+>
   <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline} />
 
   <div aria-hidden="true" class="aspect-w-16 aspect-h-7">
@@ -48,7 +57,7 @@ const {
     items={items}
     columns={columns}
     classes={{
-      container: 'mt-5 lg:mt-16',
+      container: 'mt-12',
       panel: 'max-w-full sm:max-w-md',
       title: 'text-lg font-semibold',
       icon: 'flex-shrink-0 mt-1 text-primary w-6 h-6',

src/pages/about.astro

@@ -44,6 +44,7 @@ const metadata = {
     title="Our templates"
     subtitle="Etiam scelerisque, enim eget vestibulum luctus, nibh mauris blandit nulla, nec vestibulum risus justo ut enim. Praesent lacinia diam et ante imperdiet euismod."
     columns={3}
+    isBeforeContent={true}
     items={[
       {
         title: 'Educational',
@@ -70,6 +71,7 @@ const metadata = {
 
   <Features3
     columns={3}
+    isAfterContent={true}
     items={[
       {
         title: 'E-commerce',

src/types.d.ts

@@ -215,6 +215,8 @@ export interface Features extends Headline, Widget {
   callToAction1?: CallToAction;
   callToAction2?: CallToAction;
   isReversed?: boolean;
+  isBeforeContent?: boolean;
+  isAfterContent?: boolean;
 }
 
 export interface Faqs extends Headline, Widget {