Snappy Fix - Locations Component

src/config/components/header.js

@@ -40,6 +40,10 @@ const headerData = {
           text: 'About us',
           href: getPermalink('/about'),
         },
+        {
+          text: 'Stores',
+          href: getPermalink('/stores'),
+        },
         {
           text: 'Team',
           href: getPermalink('/team'),

src/config/pages/stores/hero.js

@@ -0,0 +1,61 @@
+// Hero configuration on the homepage
+
+const hero = {
+  // If the entire hero section should be enabled or not
+  enabled: true,
+
+  // Hero title with HTML support
+  title: {
+    enabled: true, // If the title should be enabled or not
+    text: `Store Locations`,
+  },
+
+  // Hero subtitle with HTML support
+  subtitle: {
+    enabled: true, // If the subtitle should be enabled or not
+    text: `We have two downtown store locations`,
+  },
+
+  // First CTA block
+  callToAction: {
+    // Enable or disable first CTA
+    enabled: false,
+    // CTA text
+    text: 'Get template',
+    // CTA link
+    href: 'https://github.com/grantbirki/astrowind',
+    // Target html <a> tag
+    target: '_blank',
+    // Rel html <a> tag
+    rel: 'noopener',
+    // CTA icon
+    icon: 'tabler:download',
+  },
+
+  // Second CTA block (optional)
+  callToAction2: {
+    // Enable or disable second CTA
+    enabled: true,
+    // CTA text
+    text: 'Learn more',
+    // CTA link
+    href: '#features',
+    // Target html <a> tag
+    target: '_blank',
+    // Rel html <a> tag
+    rel: 'noopener',
+    icon: 'tabler:book',
+  },
+
+  // Hero image
+  image: {
+    // If the image should be enabled or not
+    enabled: true,
+    // Image source
+    src: import('~/assets/images/hero.png'),
+    // Image alt text
+    alt: 'AstroWind Hero Image',
+  },
+};
+
+export default hero;

src/pages/index.astro

@@ -13,7 +13,6 @@ import FAQs from '~/components/widgets/FAQs.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
 import Block from '~/components/widgets/Block.astro';
-import Locations from '~/components/widgets/Locations.jsx';
 
 import hero from '~/config/pages/home/hero';
 import content from '~/config/pages/home/content';
@@ -24,7 +23,6 @@ import features from '~/config/pages/home/features';
 import features2 from '~/config/pages/home/features2';
 import callToAction from '~/config/components/call-to-action';
 import stats from '~/config/pages/home/stats';
-import locations from '~/config/pages/home/locations';
 
 const meta = {
   title: SITE.title,
@@ -198,20 +196,6 @@ const meta = {
 
   {stats && stats.enabled && <Stats items={stats.items} />}
 
-  <!-- Locations Widget ****************** -->
-
-  {
-    locations && locations.enabled && locations.locations.length > 0 && (
-      <Locations
-        client:only="react"
-        highlight={locations.highlight}
-        title={locations.title}
-        subtitle={locations.subtitle}
-        locations={locations.locations}
-      />
-    )
-  }
-
   <!-- Block Widget ****************** -->
 
   <Block

src/pages/stores.astro

@@ -0,0 +1,51 @@
+---
+import { SITE } from '~/config/site/config.js';
+import Layout from '~/layouts/PageLayout.astro';
+
+import Hero from '~/components/widgets/Hero.astro';
+import Locations from '~/components/widgets/Locations.jsx';
+
+import hero from '~/config/pages/stores/hero';
+import locations from '~/config/pages/stores/locations';
+
+const meta = {
+  title: SITE.title,
+  description: SITE.description,
+  dontUseTitleTemplate: true,
+};
+---
+
+<Layout {meta}>
+  <!-- Hero Widget ******************* -->
+
+  {
+    hero && hero.enabled && (
+      <Hero
+        callToAction={{
+          enabled: hero.callToAction.enabled,
+          text: hero.callToAction.text,
+          href: hero.callToAction.href,
+          target: hero.callToAction.target,
+          rel: hero.callToAction.rel,
+          icon: hero.callToAction.icon,
+        }}
+      >
+        {hero.title.enabled && <Fragment slot="title" set:html={hero.title.text} />}
+
+        {hero.subtitle.enabled && <Fragment slot="subtitle" set:html={hero.subtitle.text} />}
+      </Hero>
+    )
+  }
+    <!-- Locations Widget ****************** -->
+    {
+      locations && locations.enabled && locations.locations.length > 0 && (
+        <Locations
+          client:only="react"
+          highlight={locations.highlight}
+          title={locations.title}
+          subtitle={locations.subtitle}
+          locations={locations.locations}
+        />
+      )
+    }
+</Layout>