landing page init

xenoradevs · Oct 3, 2024 · ed27934 · ed27934
1 parent f22d441
commit ed27934
Show file tree

Hide file tree

Showing 11 changed files with 532 additions and 71 deletions.
diff --git a/components/Header.vue b/components/Header.vue
@@ -3,26 +3,34 @@ const nuxtApp = useNuxtApp()
 const { activeHeadings, updateHeadings } = useScrollspy()
 
 const links = computed(() => [{
-  label: 'Features',
-  to: '#features',
+  label: 'About Us',
+  to: '/about-us',
   icon: 'i-heroicons-cube-transparent',
-  active: activeHeadings.value.includes('features') && !activeHeadings.value.includes('pricing')
+  active: activeHeadings.value.includes('about-us')
 }, {
-  label: 'Pricing',
-  to: '#pricing',
+  label: 'Awareness',
+  to: '/awareness',
   icon: 'i-heroicons-credit-card',
-  active: activeHeadings.value.includes('pricing') && !activeHeadings.value.includes('testimonials')
+  active: activeHeadings.value.includes('awareness')
 }, {
-  label: 'Testimonials',
-  to: '#testimonials',
+  label: 'Donate',
+  to: '/donate',
   icon: 'i-heroicons-academic-cap',
-  active: activeHeadings.value.includes('testimonials')
+  active: activeHeadings.value.includes('donate')
 }, {
-  label: 'FAQ',
-  to: '#faq',
+  label: 'News & Events',
+  to: '/news-events',
   icon: 'i-heroicons-question-mark-circle',
-  active: activeHeadings.value.includes('faq')
-}])
+  active: activeHeadings.value.includes('news-events')
+},
+{
+  label: 'Contact Us',
+  to: '/contact-us',
+  icon: 'i-heroicons-question-mark-circle',
+  active: activeHeadings.value.includes('contact-us')
+},
+
+])
 
 nuxtApp.hooks.hookOnce('page:finish', () => {
   updateHeadings([

diff --git a/content/_inspiration.md b/content/_inspiration.md
diff --git a/content/index.yml b/content/index.yml
@@ -1,12 +1,67 @@
 title: The Anora Breast Cancer Research Foundation
 description: The Anora Breast Cancer Research Foundation is a dedicated organization committed to empowering individuals and communities in the fight against breast cancer. Our mission is to promote early detection, provide support for women affected by breast cancer, and fund cutting-edge research that brings us closer to a cure.
-  title: The Anora Breast Cancer Research Foundation
-  description: hrough education, research funding, and patient resources, we strive to create a future free from breast cancer. "Join The Pink Side of the Force" and stand with us in this fight.
-  headline:
+hero:
+  title: Empowering Lives, Inspiring Hope
+  description: Join us in the fight against breast cancer and make a difference
+  image:
+    src: /hero_bg.png
+    alt: Hero Image
+  links:
+    - label: Get started
+      icon: i-heroicons-arrow-right-20-solid
+      trailing: true
+      to: '#features'
+      size: xl
+    - label: View Demo
+      icon: i-simple-icons-youtube
+      size: xl
+      color: pink
+      to: https://github.com/
+      target: _blank
+mission:
+  headline: Our Mission
+  title: reduce the burden of breast cancer by pioneering new research methods
+  description: The Anora Breast Cancer Research Foundation is dedicated to empowering individuals and communities in the fight against breast cancer. Our mission is to promote early detection, provide support
+  links:
+    - label: About ABCRF
+      to: '#'
+      size: xl
+      color: pink
+      icon: i-heroicons-arrow-right-20-solid
+      trailing: true
+awareness:
+  headline: Awareness
+  title: Key facts about Breast cancer
+  image:
+    src: /awareness.jpg
+    alt: Awareness Image
+  points:
+    - name: 670,000 deaths globally
+      description: Breast cancer caused 670 000 deaths globally in 2022.
+      icon: i-heroicons-heart
+    - name: Risk Beyond Sex and Age
+      description: Roughly half of all breast cancers occur in women with no specific risk factors other than sex and age.
+      icon: i-heroicons-users
+    - name: most common cancer in women
+      description: Breast cancer was the most common cancer in women in 157 countries out of 185 in 2022.
+      icon: i-heroicons-globe-europe-africa
+    - name: affect all country
+      description: Breast cancer was the most common cancer in women in 157 countries out of 185 in 2022.
+      icon: i-heroicons-globe-alt
+    - name: men can get breast cancer
+      description: Approximately 0.5–1% of breast cancers occur in men.
+      icon: i-heroicons-exclamation-triangle
+
+
+
+
+
+
+headline:
     label: Get Started Today
     to: https://cnbcr.org
     icon: i-heroicons-arrow-top-right-on-square-20-solid
-  links:
+    links:
     - label: Get started
       icon: i-heroicons-arrow-right-20-solid
       trailing: true
@@ -28,28 +83,29 @@ logos:
     - i-simple-icons-cloudflare
 
 features:
-  headline: Features
-  title: Unlocking Potential, Driving Impact
-  description: Explore the transformative capabilities of our breast cancer registry and its profound impact on healthcare.
+  headline: Research
+  title: reducing mortality and improving quality.
+  description: We drives innovation through key research projects aimed at reducing breast cancer mortality and improving quality of life for survivors.
   items:
-    - title: Data Insights
-      description: Gain actionable insights into breast cancer trends and treatment outcomes.
+    - title:  IntelliBra Project
+      description: a cutting-edge wearable technology that enables early breast cancer detection.
       icon: i-heroicons-search
-    - title: Community Engagement
-      description: Foster a supportive community for survivors and caregivers.
+    - title: Research Focus
+      description: Early detection, wearable technology, underserved communities.
       icon: i-heroicons-users
-    - title: Research Advancement
-      description: Accelerate breast cancer research through collaboration and data sharing.
+    - title:  Cameroon National Cancer Registry (CNCR)
+      description: collaborativ effort to establish a nationwide cancer registry in Cameroon, designed to collect, analyze, and disseminate data on cancer cases
       icon: i-heroicons-beaker
-    - title: Advocacy Platform
-      description: Amplify awareness and advocacy efforts for breast cancer.
-      icon: i-heroicons-megaphone
-    - title: Personalized Care
-      description: Tailored support services for individual and families affected by breast cancer.
-      icon: i-heroicons-heart
-    - title: Global Impact
-      description: Contribute to a global movement to eradicate breast cancer.
-      icon: i-heroicons-globe
+
+    # - title: Advocacy Platform
+    #   description: Amplify awareness and advocacy efforts for breast cancer.
+    #   icon: i-heroicons-megaphone
+    # - title: Personalized Care
+    #   description: Tailored support services for individual and families affected by breast cancer.
+    #   icon: i-heroicons-heart
+    # - title: Global Impact
+    #   description: Contribute to a global movement to eradicate breast cancer.
+    #   icon: i-heroicons-globe
 
 pricing:
   headline: Pricing

diff --git a/pages/about-us.vue b/pages/about-us.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+      <h1>About Us</h1>    
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>
diff --git a/pages/awareness.vue b/pages/awareness.vue
@@ -0,0 +1,13 @@
+<template>
+   <div>
+       <h1>Awareness</h1>
+   </div>
+ </template>
+
+ <script lang="ts" setup>
+
+ </script>
+
+ <style>
+
+ </style>
diff --git a/pages/contact-us.vue b/pages/contact-us.vue
@@ -0,0 +1,13 @@
+<template>
+   <div>
+       <h1>Contact Us</h1>
+   </div>
+ </template>
+
+ <script lang="ts" setup>
+
+ </script>
+
+ <style>
+
+ </style>
diff --git a/pages/donate.vue b/pages/donate.vue
@@ -0,0 +1,13 @@
+<template>
+   <div>
+       <h1>Donate</h1>
+   </div>
+ </template>
+
+ <script lang="ts" setup>
+
+ </script>
+
+ <style>
+
+ </style>
diff --git a/pages/index.vue b/pages/index.vue
@@ -11,60 +11,104 @@ useSeoMeta({
 
 <template>
   <div>
-    <ULandingHero :title="page.hero.title" :description="page.hero.description" :links="page.hero.links">
+    <ULandingHero :title="page.hero.title" :description="page.hero.description" :links="page.links">
       <template #headline>
         <UBadge v-if="page.hero.headline" variant="subtle" size="lg" class="relative rounded-full font-semibold">
           <NuxtLink :to="page.hero.headline.to" target="_blank" class="focus:outline-none" tabindex="-1">
             <span class="absolute inset-0" aria-hidden="true" />
           </NuxtLink>
-
           {{ page.hero.headline.label }}
-
-          <UIcon v-if="page.hero.headline.icon" :name="page.hero.headline.icon"
-            class="ml-1 w-4 h-4 pointer-events-none" />
+          <UIcon
+            v-if="page.hero.headline.icon" :name="page.hero.headline.icon"
+            class="ml-1 w-4 h-4 pointer-events-none"
+          />
         </UBadge>
       </template>
-
-      <Placeholder />
+
+      <!-- <Placeholder /> -->
+      <img
+        :src="page.hero.image.src" alt="Hero image"
+        class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
+      >
 
       <ULandingLogos :title="page.logos.title" align="center">
-        <UIcon v-for="icon in page.logos.icons" :key="icon" :name="icon"
-          class="w-12 h-12 lg:w-16 lg:h-16 flex-shrink-0 text-gray-900 dark:text-white" />
+        <UIcon
+          v-for="icon in page.logos.icons" :key="icon" :name="icon"
+          class="w-12 h-12 lg:w-16 lg:h-16 flex-shrink-0 text-gray-900 dark:text-white"
+        />
       </ULandingLogos>
     </ULandingHero>
+    <ULandingSection
+      :headline="page.mission.headline"
+      :title="page.mission.title"
+      :description="page.mission.description" :links="page.mission.links"
+    />
 
-    <ULandingSection :title="page.features.title" :description="page.features.description"
-      :headline="page.features.headline">
+
+    <ULandingSection
+      :title="page.features.title"
+      :headline="page.features.headline"
+    >
       <UPageGrid id="features" class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]">
         <ULandingCard v-for="(item, index) in page.features.items" :key="index" v-bind="item" />
       </UPageGrid>
     </ULandingSection>
 
-    <!-- <ULandingSection :title="page.pricing.title" :description="page.pricing.description" :headline="page.pricing.headline">
+    <ULandingSection
+      :title="page.awareness.title"
+      :headline="page.awareness.headline"
+      :features="page.awareness.points"
+      align="right"
+    >
+      <img
+        :src="page.awareness.image.src" alt="Awareness image"
+        class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
+      >
+    </ULandingSection>
+
+    <ULandingSection
+      :headline="page.mission.headline"
+      :title="page.mission.title"
+      :description="page.mission.description" :links="page.mission.links"
+    />
+
+    <!--
+    <ULandingSection :title="page.pricing.title" :description="page.pricing.description" :headline="page.pricing.headline">
       <UPricingGrid id="pricing" compact class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]">
         <UPricingCard v-for="(plan, index) in page.pricing.plans" :key="index" v-bind="plan" />
       </UPricingGrid>
-    </ULandingSection> -->
-    <ULandingSection :title="page.pricing.title" :description="page.pricing.description"
-      :headline="page.pricing.headline">
-      <ULandingCTA title="For Researchers"
+    </ULandingSection>
+    <ULandingSection
+      :title="page.pricing.title" :description="page.pricing.description"
+      :headline="page.pricing.headline"
+    >
+      <ULandingCTA
+        title="For Researchers"
         description="Explore the wealth of opportunities offered by the Cameroon National Breast Cancer Registry for researchers. Gain access to comprehensive data, research opportunities, population-based insights, collaborative partnerships, and ethical data access, all aimed at driving impactful breast cancer research forward."
-        align="right" :card="false">
-        <img src="https://picsum.photos/640/360"
-          class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700" />
+        align="right" :card="false"
+      >
+        <img
+          src="https://picsum.photos/640/360"
+          class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
+        >
       </ULandingCTA>
 
-      <ULandingCTA title="For Healthcare Organizations"
+      <ULandingCTA
+        title="For Healthcare Organizations"
         description="Explore the wealth of opportunities offered by the Cameroon National Breast Cancer Registry for researchers. Gain access to comprehensive data, research opportunities, population-based insights, collaborative partnerships, and ethical data access, all aimed at driving impactful breast cancer research forward."
-        align="left" :card="false">
-        <img src="https://picsum.photos/640/360"
-          class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700" />
+        align="left" :card="false"
+      >
+        <img
+          src="https://picsum.photos/640/360"
+          class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
+        >
       </ULandingCTA>
-
     </ULandingSection>
 
-    <ULandingSection :headline="page.testimonials.headline" :title="page.testimonials.title"
-      :description="page.testimonials.description">
+    <ULandingSection
+      :headline="page.testimonials.headline" :title="page.testimonials.title"
+      :description="page.testimonials.description"
+    >
       <UPageColumns id="testimonials" class="xl:columns-4 scroll-mt-[calc(var(--header-height)+140px+128px+96px)]">
         <div v-for="(testimonial, index) in page.testimonials.items" :key="index" class="break-inside-avoid">
           <ULandingTestimonial v-bind="testimonial" />
@@ -76,16 +120,20 @@ useSeoMeta({
       <ULandingCTA v-bind="page.cta" :card="false" />
     </ULandingSection>
 
-    <ULandingSection id="faq" :title="page.faq.title" :description="page.faq.description"
-      class="scroll-mt-[var(--header-height)]">
-      <ULandingFAQ multiple :items="page.faq.items" :ui="{
-        button: {
-          label: 'font-semibold',
-          trailingIcon: {
-            base: 'w-6 h-6'
+    <ULandingSection
+      id="faq" :title="page.faq.title" :description="page.faq.description"
+      class="scroll-mt-[var(--header-height)]"
+    >
+      <ULandingFAQ
+        multiple :items="page.faq.items" :ui="{
+          button: {
+            label: 'font-semibold',
+            trailingIcon: {
+              base: 'w-6 h-6'
+            }
           }
-        }
-      }" class="max-w-4xl mx-auto" />
-    </ULandingSection>
+        }" class="max-w-4xl mx-auto"
+      />
+    </ULandingSection> -->
   </div>
 </template>
diff --git a/pages/news-events.vue b/pages/news-events.vue
@@ -0,0 +1,13 @@
+<template>
+   <div>
+       <h1>News & Events</h1>
+   </div>
+ </template>
+
+ <script lang="ts" setup>
+
+ </script>
+
+ <style>
+
+ </style>
diff --git a/public/awareness.jpg b/public/awareness.jpg
diff --git a/public/hero_bg.png b/public/hero_bg.png