- Added .env to the gitignore

- Added .gitkeep to the fonts folder (just in case for the future)
- Created a few new sections and pages (just the files for now)

Author: AlexanderNeo427

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env*.local

src/assets/fonts/.gitkeep

@@ -4,4 +4,5 @@ const Utils = {
     }
 }
 
+
 export default Utils

src/common/Globals.ts

@@ -0,0 +1,13 @@
+import React from 'react'
+
+interface PetInfoCardProps {
+}
+
+const PetInfoCard: React.FC<PetInfoCardProps> = () => {
+   return (
+      <div>
+      </div>
+   )
+}
+
+export default PetInfoCard

src/components/PetInfoCard.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import PercentageCircle from './PercentageCircle'
+
+const PetStatsSection: React.FC = () => {
+   return (
+      <section className='min-h-96 flex justify-center items-center'>
+         <div className='
+            my-text-l
+            flex flex-col justify-start items-center gap-xxl
+            lg:flex-row lg:justify-center lg:items-start
+         '>
+            <PercentageCircle
+               animTimeSeconds={2}
+               statText="of pets are abandoned"
+               radius={130}
+               fillPercent={69} fillColor='var(--accent-500)' fillWidth={5}
+               bgColor='lightgray' bgWidth={3}
+            />
+            <PercentageCircle
+               animTimeSeconds={2}
+               statText="of dogs are eventually able to find a permanent home"
+               radius={130}
+               fillPercent={25} fillColor='var(--accent-500)' fillWidth={5}
+               bgColor='lightgray' bgWidth={3}
+            />
+            <PercentageCircle
+               animTimeSeconds={2}
+               statText="are euthanized every year due to overcrowding of shelters"
+               radius={130}
+               fillPercent={58} fillColor='var(--accent-500)' fillWidth={5}
+               bgColor='lightgray' bgWidth={3}
+            />
+         </div>
+      </section>
+   )
+}
+
+export default PetStatsSection

src/components/PetStatsSection.tsx

@@ -6,7 +6,7 @@ import dog_img_3 from '../../assets/images/golden_retriever_2.jpg'
 
 const AdoptionStepsSection: React.FC = () => {
    return (
-      <section className='flex flex-col justify-start items-center bg-blue-50 py-margin-3xl'>
+      <section className='flex flex-col justify-start items-center bg-background-900 py-margin-3xl'>
          <div className='w-full max-w-3xl px-8'>
             <h2 className='text-4xl mb-text-xxs text-text-50'>Looking to adopt?</h2>
             <p className='text-lg font-medium text-text-100'>

src/components/sections/AdoptionStepsSection.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const TestimonialsSection: React.FC = () => {
+   return (
+      <section className='min-h-96 bg-gray-600'>
+         Testimonials
+      </section>
+   )
+}
+
+export default TestimonialsSection

src/components/sections/TestimonialsSection.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react'
+
+const AdoptionGalleryPage: React.FC = () => {
+   useEffect(() => {
+      
+   }, [])
+
+   return (
+      <main className='relative h-screen w-screen outline outline-red-500'>
+
+      </main>
+   )
+}
+
+export default AdoptionGalleryPage

src/pages/AdoptionGalleryPage.tsx

@@ -1,8 +1,14 @@
-import React from 'react'
+import React, { useState } from 'react'
+import Navbar from '../components/Navbar'
 
 const AuthPage: React.FC = () => {
+   const isLoginMode = useState<boolean>(true)
+
    return (
-      <div>AuthPage</div>
+      <>
+         <Navbar />
+         Auth Page
+      </>
    )
 }
 

src/pages/AuthPage.tsx

@@ -5,6 +5,7 @@ import AboutUsSection from '../components/sections/AboutUsSection'
 import PetStatsSection from '../components/sections/PetStatsSection'
 import AdoptionStepsSection from '../components/sections/AdoptionStepsSection'
 import FooterSection from '../components/sections/FooterSection'
+import TestimonialsSection from '../components/sections/TestimonialsSection'
 
 const HomePage: React.FC = () => {
    return (
@@ -14,6 +15,7 @@ const HomePage: React.FC = () => {
          <AboutUsSection />
          <PetStatsSection />
          <AdoptionStepsSection />
+         <TestimonialsSection />
          <FooterSection />
       </main>
    )