Updated Hematorun Title to have blood cell

src/components/AmbassadorsHeading/AmbassadorsHeading.module.scss

@@ -25,23 +25,14 @@
   @include desktop-screen {
     gap: 24px;
   }
+}
 
-  &__sub {
+.text {
+  font-size: 50px;
+  font-weight: 500;
+  font-size: 16px;
+  @include desktop-screen {
     font-size: 50px;
-    font-weight: 500;
-    font-size: 16px;
-    @include desktop-screen {
-      font-size: 50px;
-    }
-  }
-
-  &__main {
-    font-size: 90px;
-    font-weight: 800;
-    font-size: 36px;
-    @include desktop-screen {
-      font-size: 90px;
-    }
   }
 }
 

src/components/AmbassadorsHeading/AmbassadorsHeading.tsx

@@ -1,5 +1,6 @@
 import HandwrittenLine from '../../Icons/HandwrittenLine/HandwrittenLine';
 import { useLanguageStore } from '../../Zustand/useLanguageStore';
+import HematorunTitle from '../hematorunTitle/HematorunTitle';
 import scss from './AmbassadorsHeading.module.scss';
 import translations from './translations';
 
@@ -10,8 +11,8 @@ function AmbassadorsHeading() {
   return (
     <div className={scss.header}>
       <h2 className={scss.heading}>
-        <span className={scss.heading__sub}>{t.sub}</span>
-        <span className={scss.heading__main}>{t.main}</span>
+        <span className={scss.text}>{t.heading}</span>
+        <HematorunTitle secondTitle={{ pl: 'biegu', eng: 'run' }} />
       </h2>
       <div className={scss.line}>
         <HandwrittenLine />

src/components/AmbassadorsHeading/translations.ts

@@ -1,11 +1,9 @@
 const translations = {
   PL: {
-    sub: 'Poznaj ambasadorów',
-    main: 'HEMATOBIEGU',
+    heading: 'Poznaj ambasadorów',
   },
   EN: {
-    sub: 'Meet the ambassadors of',
-    main: 'HEMATORUN',
+    heading: 'Meet the ambassadors of',
   },
 };
 

src/components/ParticipantAreaHeading/ParticipantAreaHeading.tsx

@@ -3,13 +3,14 @@ import { useLanguageStore } from '../../Zustand/useLanguageStore';
 import translations from './translations';
 import TrippleArrowDown from '../../Icons/TrippleArrowDown/TrippleArrowDown';
 import HandwrittenLine from '../../Icons/HandwrittenLine/HandwrittenLine';
+import HematorunTitle from '../hematorunTitle/HematorunTitle';
 
 export const ParticipantAreaHeading = () => {
   const { language } = useLanguageStore();
   const t = translations[language];
   return (
     <StyledHeading as="section" id="heading">
-      <h1>{t.hematorun}</h1>
+      <HematorunTitle />
       <div className="participantArea">
         <h2>{t.participantArea}</h2>
         <HandwrittenLine />

src/components/ParticipantAreaHeading/StyledParticipantAreaHeading.ts

@@ -20,7 +20,7 @@ export const StyledHeading = styled.section`
     padding-bottom: min(0.75rem, max(0.6rem, 4vw));
   }
 
-  svg {
+  & > div:not(:first-child) > svg {
     width: 100%;
   }
 

src/components/SponsorsHeading/SponsorsHeading.module.scss

@@ -17,28 +17,17 @@
   @include desktop-screen {
     margin-bottom: 48px;
   }
+}
 
-  &__sub {
-    margin-bottom: 16px;
-    font-size: 28px;
-    font-size: 14px;
-    line-height: 1.5;
-    font-weight: 500;
-    max-width: 56vw;
-
-    @include desktop-screen {
-      font-size: 28px;
-    }
-  }
-
-  &__main {
-    font-size: 32px;
-    font-weight: 800;
-    color: var(--orange);
-    text-transform: uppercase;
+.text {
+  margin-bottom: 16px;
+  font-size: 28px;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 500;
+  max-width: 56vw;
 
-    @include desktop-screen {
-      font-size: 90px;
-    }
+  @include desktop-screen {
+    font-size: 28px;
   }
 }

src/components/SponsorsHeading/SponsorsHeading.tsx

@@ -1,5 +1,6 @@
 import { useLanguageStore } from '../../Zustand/useLanguageStore';
 import BecomeSponsorButton from '../BecomeSponsorButton/BecomeSponsorButton';
+import HematorunTitle from '../hematorunTitle/HematorunTitle';
 import scss from './SponsorsHeading.module.scss';
 import translations from './translations';
 
@@ -10,8 +11,8 @@ function SponsorsHeading() {
   return (
     <div className={scss.container}>
       <h2 className={scss.heading}>
-        <span className={scss.heading__sub}>{t.sub}</span>
-        <span className={scss.heading__main}>{t.main}</span>
+        <span className={scss.text}>{t.heading}</span>
+        <HematorunTitle secondTitle={{ pl: 'biegu!', eng: 'run!' }} />
       </h2>
       <BecomeSponsorButton />
     </div>

src/components/SponsorsHeading/translations.ts

@@ -1,11 +1,9 @@
 const translations = {
   PL: {
-    sub: 'Dziękujemy wszystkim sponsorom i partnerom',
-    main: 'Hematobiegu!',
+    heading: 'Dziękujemy wszystkim sponsorom i partnerom',
   },
   EN: {
-    sub: 'Thank you to all sponsors and partners of',
-    main: 'Hemmatorun!',
+    heading: 'Thank you to all sponsors and partners of',
   },
 };
 

src/components/SupportDonation/SupportDonation.tsx

@@ -17,11 +17,10 @@ function SupportDonation() {
           }}
         />
         <SupportSubHeading
-          subText={{
+          content={{
             pl: 'Wpłać darowiznę aby wesprzeć nas w organizacji wydarzenia',
             eng: 'Make a donation to support us in organizing',
           }}
-          mainText={{ pl: 'Hematobieg', eng: 'Hematorun' }}
         />
         <DonationContainer />
       </div>

src/components/SupportSponsor/SupportSponsor.tsx

@@ -17,11 +17,11 @@ function SupportSponsor() {
           />
         </div>
         <SupportSubHeading
-          subText={{
+          content={{
             pl: 'Pomóż nam w realizacji celów Fundacji oraz wesprzyj organizacje',
             eng: 'Help us achieve the goals of the Foundation and support the organization',
           }}
-          mainText={{ pl: 'Hematobiegu', eng: 'Hematorun' }}
+          titleSub={{ pl: 'biegu', eng: 'run' }}
         />
       </div>
       <SupportSponsorText />

src/components/SupportSubHeading/SupportSubHeading.tsx

@@ -1,19 +1,25 @@
 import { useLanguageStore } from '../../Zustand/useLanguageStore';
+import HematorunTitle from '../hematorunTitle/HematorunTitle';
 import scss from './SupportSubHeading.module.scss';
 
 type SupportSubHeadingProps = {
-  subText: { pl: string; eng: string };
-  mainText: { pl: string; eng: string };
+  content: { pl: string; eng: string };
+  titleMain?: { pl: string; eng: string };
+  titleSub?: { pl: string; eng: string };
 };
 
-function SupportSubHeading({ subText, mainText }: SupportSubHeadingProps) {
+function SupportSubHeading({
+  content,
+  titleMain = { pl: 'Hemat', eng: 'Hemat' },
+  titleSub = { pl: 'bieg', eng: 'run' },
+}: SupportSubHeadingProps) {
   const { language } = useLanguageStore();
   const languageString = language === 'PL' ? 'pl' : 'eng';
 
   return (
     <h3 className={scss.heading}>
-      <span className={scss.sub}>{subText[languageString]}</span>
-      <span className={scss.main}>{mainText[languageString]}</span>
+      <span className={scss.sub}>{content[languageString]}</span>
+      <HematorunTitle mainTitle={titleMain} secondTitle={titleSub} />
     </h3>
   );
 }

src/components/SupportVolunteers/SupportVolunteers.tsx

@@ -7,37 +7,43 @@ import SupportVolunteersText from '../SupportVolunteersText/SupportVolunteersTex
 import scss from './SupportVolunteers.module.scss';
 
 function SupportVolunteers() {
-    return (
-        <section className={scss.section}>
-            < div className={scss.container}>
-                <div className={scss.heading}>
-                <SupportHeading
-                headingText={{
-                    pl: 'Wesprzyj Fundację \n i zostań wolontariuszem',
-                    eng: 'Support the foundation and become a volunteer',
-                }}
-                /></div>
-                <SupportSubHeading
-                subText={{
-                    pl: 'Pomóż nam w realizacji celów Fundacji oraz wesprzyj organizację',
-                    eng: 'Help us achieve the goals of the Foundation and support the organization',
-                }}
-                mainText={{ pl: 'Hematobiegu', eng: 'Hematorun' }}
-                />
-
-            <SupportVolunteersJoin />
-            <SupportVolunteersHeading subText={{
-                    pl: 'W jakich obszarach możesz pomóc?',
-                    eng: 'In what areas can you help?',
-                }}/>
-            <SupportVolunteersList />
-            <SupportVolunteersHeading subText={{
-                    pl: 'Kto może zostać wolontariuszem?',
-                    eng: 'Who can become a volunteer?'
-                }}/>
-            <SupportVolunteersText /></div>
-        </section>
-    );
+  return (
+    <section className={scss.section}>
+      <div className={scss.container}>
+        <div className={scss.heading}>
+          <SupportHeading
+            headingText={{
+              pl: 'Wesprzyj Fundację \n i zostań wolontariuszem',
+              eng: 'Support the foundation and become a volunteer',
+            }}
+          />
+        </div>
+        <SupportSubHeading
+          content={{
+            pl: 'Pomóż nam w realizacji celów Fundacji oraz wesprzyj organizację',
+            eng: 'Help us achieve the goals of the Foundation and support the organization',
+          }}
+          titleSub={{ pl: 'biegu', eng: 'run' }}
+        />
+
+        <SupportVolunteersJoin />
+        <SupportVolunteersHeading
+          subText={{
+            pl: 'W jakich obszarach możesz pomóc?',
+            eng: 'In what areas can you help?',
+          }}
+        />
+        <SupportVolunteersList />
+        <SupportVolunteersHeading
+          subText={{
+            pl: 'Kto może zostać wolontariuszem?',
+            eng: 'Who can become a volunteer?',
+          }}
+        />
+        <SupportVolunteersText />
+      </div>
+    </section>
+  );
 }
 
 export default SupportVolunteers;

src/components/SupportVolunteersText/SupportVolunteersText.tsx

@@ -4,28 +4,31 @@ import scss from './SupportVolunteersText.module.scss';
 import translations from './translations';
 
 function SupportVolunteersText() {
-    const { language } = useLanguageStore();
-    const t = translations[language];
+  const { language } = useLanguageStore();
+  const t = translations[language];
 
-    return (
-        <div className={scss.sponsorship}>
-            <p className={scss.content}><span className={scss.welcome}>{t.welcome}</span> {t.welcomeNext}</p>
-            <div className={scss.vector}>
-                <TrippleVector />
-            </div>
-            <p className={scss.heading}>{t.joinTeam}</p>
-            <p className={scss.content}>
-                {t.contactInfo} <br />
-                <div className={scss.content}>
-            </div>
-            <div className={scss.contactEmail}>
-                    <a href={`mailto:${t.email}`} className={scss.contactLink}>{t.email}</a>
-            </div>
-                {t.instructions}
-            </p>
-            <p className={scss.contentThanks}>{t.thanks}</p>
+  return (
+    <div className={scss.sponsorship}>
+      <p className={scss.content}>
+        <span className={scss.welcome}>{t.welcome}</span> {t.welcomeNext}
+      </p>
+      <div className={scss.vector}>
+        <TrippleVector />
+      </div>
+      <p className={scss.heading}>{t.joinTeam}</p>
+      <div className={scss.content}>
+        {t.contactInfo} <br />
+        <span className={scss.content}></span>
+        <div className={scss.contactEmail}>
+          <a href={`mailto:${t.email}`} className={scss.contactLink}>
+            {t.email}
+          </a>
         </div>
-    );
+        {t.instructions}
+      </div>
+      <p className={scss.contentThanks}>{t.thanks}</p>
+    </div>
+  );
 }
 
 export default SupportVolunteersText;

src/components/TogetherToTheGoal/TogetherToTheGoal.tsx

@@ -1,6 +1,7 @@
 import scss from './TogetherToTheGoal.module.scss';
 import { useLanguageStore } from '../../Zustand/useLanguageStore';
 import translations from './translations';
+import HematorunTitle from '../hematorunTitle/HematorunTitle';
 
 export const TogetherToTheGoal = () => {
   const { language } = useLanguageStore();
@@ -11,7 +12,7 @@ export const TogetherToTheGoal = () => {
       <h3 className={scss.togetherToTheGoal__together}>
         {t.togetherToTheGoal}
       </h3>
-      <h1 className={scss.togetherToTheGoal__title}>{t.hematorun}</h1>
+      <HematorunTitle />
       <p className={scss.togetherToTheGoal__foundation}>
         {t.foundationForHelpingPeopleWithLeukemia}{' '}
       </p>{' '}

src/components/hematorunTitle/HematorunTitle.module.scss

@@ -0,0 +1,35 @@
+@import '../../stylesheets/mixins.scss';
+
+.title {
+  font-size: 36px;
+  display: flex;
+  align-items: center;
+  font-weight: 800;
+  color: var(--orange);
+  text-transform: uppercase;
+
+  & > svg {
+    width: 26px;
+    height: auto;
+  }
+
+  @include desktop-screen {
+    font-size: 90px;
+
+    & > svg {
+      width: auto;
+    }
+  }
+}
+
+.blood {
+  & > svg {
+    width: 26px;
+    height: auto;
+
+    @include desktop-screen {
+      width: auto;
+      height: 100%;
+    }
+  }
+}