+
+ );
+};
+
+export default BreedDetails;
diff --git a/src/components/common/FavoriteBtn/FavoriteBtn.module.scss b/src/components/common/FavoriteBtn/FavoriteBtn.module.scss
new file mode 100644
index 00000000..70cd070d
--- /dev/null
+++ b/src/components/common/FavoriteBtn/FavoriteBtn.module.scss
@@ -0,0 +1,15 @@
+@use '../../../styles/variables' as *;
+
+.heartIcon {
+ path {
+ stroke: #000;
+ fill: white;
+ }
+
+ &.favorited {
+ path {
+ stroke: $color-red;
+ fill: $color-red;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/common/FavoriteBtn/FavoriteBtn.tsx b/src/components/common/FavoriteBtn/FavoriteBtn.tsx
new file mode 100644
index 00000000..38325230
--- /dev/null
+++ b/src/components/common/FavoriteBtn/FavoriteBtn.tsx
@@ -0,0 +1,82 @@
+import { Heart } from '@assets/icons/icons';
+import styles from './FavoriteBtn.module.scss';
+import { useAddToFavorites, useRemoveFromFavorites, useFavorites } from '@api/hooks';
+import { showGlobalToast } from '@hooks/useToast';
+import type { FavoriteBtnProps, FavoriteItem } from '@types';
+
+
+const FavoriteBtn = ({
+ imageId,
+ className = '',
+ title,
+ disabled = false
+}: FavoriteBtnProps) => {
+ const addToFavoritesMutation = useAddToFavorites();
+ const removeFromFavoritesMutation = useRemoveFromFavorites();
+ const { data: favorites } = useFavorites({
+ sub_id: 'user-gwi'
+ });
+
+ const isFavorited = Array.isArray(favorites) ?
+ favorites.some((fav: FavoriteItem) => fav.image_id === imageId) : false;
+
+ const handleFavoriteClick = (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ if (disabled) return;
+
+ if (isFavorited && Array.isArray(favorites)) {
+ const favoriteItem = favorites.find((fav: FavoriteItem) => fav.image_id === imageId);
+ if (favoriteItem) {
+ removeFromFavoritesMutation.mutate(favoriteItem.id, {
+ onSuccess: () => {
+ showGlobalToast({
+ message: 'Removed from favorites!',
+ color: 'info'
+ });
+ },
+ onError: () => {
+ showGlobalToast({
+ message: 'Failed to remove from favorites',
+ color: 'error'
+ });
+ }
+ });
+ }
+ } else {
+ addToFavoritesMutation.mutate({
+ imageId: imageId,
+ subId: 'user-gwi'
+ }, {
+ onSuccess: () => {
+ showGlobalToast({
+ message: 'Added to favorites!',
+ color: 'success'
+ });
+ },
+ onError: () => {
+ showGlobalToast({
+ message: 'Failed to add to favorites',
+ color: 'error'
+ });
+ }
+ });
+ }
+ };
+
+ const isLoading = addToFavoritesMutation.isPending || removeFromFavoritesMutation.isPending;
+
+ return (
+
+ );
+};
+
+export default FavoriteBtn;
diff --git a/src/components/common/PageHeading/PageHeading.module.scss b/src/components/common/PageHeading/PageHeading.module.scss
new file mode 100644
index 00000000..e6327104
--- /dev/null
+++ b/src/components/common/PageHeading/PageHeading.module.scss
@@ -0,0 +1,20 @@
+@use '../../../styles/variables' as *;
+
+.headerContent {
+ text-align: center;
+ color: $color-white;
+ margin-top: 128px;
+ margin-bottom: $spacing-xl;
+}
+
+.title {
+ margin: 0 0 $spacing-md 0;
+ font-size: $font-size-xxl;
+ font-weight: bold;
+}
+
+.description {
+ margin: 0.5rem 0;
+ font-size: $font-size-md;
+ line-height: 1.4;
+}
\ No newline at end of file
diff --git a/src/components/common/PageHeading/PageHeading.tsx b/src/components/common/PageHeading/PageHeading.tsx
new file mode 100644
index 00000000..7780eaf4
--- /dev/null
+++ b/src/components/common/PageHeading/PageHeading.tsx
@@ -0,0 +1,15 @@
+import { useAppSelector } from '@store/hooks';
+import styles from './PageHeading.module.scss';
+
+const PageHeading = () => {
+ const { title, description } = useAppSelector(state => state.header);
+
+ return (
+
+
+
+ {breed.name}
+
+ {breed.origin}
+ {breed.country_code && ({breed.country_code})}
+
+
+
+
+ {breed.description}
+
+
+
+
+ Life Span:
+ {breed.life_span} years
+
+ {breed.weight && (
+
+ Weight:
+
+ {breed.weight.metric} kg ({breed.weight.imperial} lbs)
+
+
+ )}
+
+
+
+ Temperament
+
+ {temperamentTraits.map((trait, index) => (
+
+ {trait.trim()}
+
+ ))}
+
+
+
+
+ {(() => {
+ const specialFeatures: { [key: string]: string } = {
+ indoor: 'Indoor Cat',
+ lap: 'Lap Cat',
+ hypoallergenic: 'Hypoallergenic',
+ hairless: 'Hairless',
+ rex: 'Rex Coat',
+ natural: 'Natural Breed',
+ rare: 'Rare Breed',
+ experimental: 'Experimental',
+ suppressed_tail: 'Suppressed Tail',
+ short_legs: 'Short Legs',
+ };
+ const enabledFeatures = Object.entries(specialFeatures)
+ .filter(([key]) => getBreedNumberProp(breed, key) === 1)
+ .map(([key, label]) => (
+ {label}
+ ));
+ return (
+ Characteristics
+
+ {(() => {
+ const ratingFields: { [key: string]: string } = {
+ adaptability: 'Adaptability' ,
+ affection_level: 'Affection Level' ,
+ child_friendly: 'Child Friendly' ,
+ dog_friendly: 'Dog Friendly' ,
+ energy_level: 'Energy Level' ,
+ grooming: 'Grooming' ,
+ health_issues: 'Health Issues' ,
+ intelligence: 'Intelligence' ,
+ shedding_level: 'Shedding Level' ,
+ social_needs: 'Social Needs' ,
+ stranger_friendly: 'Stranger Friendly' ,
+ vocalisation: 'Vocalisation' };
+ return Object.entries(ratingFields).map(([key, label]) => (
+
+
+ {label}
+
+ ));
+ })()}
+
+
+ );
+ })()}
+ Special Features
+
+ {enabledFeatures.length > 0 ? enabledFeatures : None}
+
+
+
+ )
+}
+
+export default PageHeading
\ No newline at end of file
diff --git a/src/components/common/ProgressBar/ProgressBar.module.scss b/src/components/common/ProgressBar/ProgressBar.module.scss
new file mode 100644
index 00000000..2a43dc09
--- /dev/null
+++ b/src/components/common/ProgressBar/ProgressBar.module.scss
@@ -0,0 +1,35 @@
+.progressContainer {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+ display: flex;
+ justify-content: center;
+}
+
+.visible {
+ opacity: 1;
+ visibility: visible;
+}
+
+.hidden {
+ opacity: 0;
+ visibility: hidden;
+}
+
+.loader {
+ height: 4px;
+ width: 100%;
+ --c:no-repeat linear-gradient(#6100ee 0 0);
+ background: var(--c),var(--c),#d7b8fc;
+ background-size: 60% 100%;
+ animation: l16 3s infinite;
+}
+
+@keyframes l16 {
+ 0% {background-position:-150% 0,-150% 0}
+ 66% {background-position: 250% 0,-150% 0}
+ 100% {background-position: 250% 0, 250% 0}
+}
\ No newline at end of file
diff --git a/src/components/common/ProgressBar/ProgressBar.tsx b/src/components/common/ProgressBar/ProgressBar.tsx
new file mode 100644
index 00000000..9fd787bd
--- /dev/null
+++ b/src/components/common/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,14 @@
+import { useLoading } from '@store/hooks';
+import styles from './ProgressBar.module.scss';
+
+const ProgressBar = () => {
+ const isLoading = useLoading();
+
+ return (
+ {title}
+ {description &&{description}
} +
+
+
+ );
+};
+
+export default ProgressBar;
diff --git a/src/components/common/Rating/Rating.module.scss b/src/components/common/Rating/Rating.module.scss
new file mode 100644
index 00000000..20c5c2d4
--- /dev/null
+++ b/src/components/common/Rating/Rating.module.scss
@@ -0,0 +1,22 @@
+@use '../../../styles/variables' as *;
+
+.rating {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+
+ &__star {
+ &--filled {
+ fill: $color-text;
+ stroke: none;
+ }
+
+ &--empty {
+ stroke: $color-text;
+ stroke-width: 1px;
+ path {
+ fill:transparent;
+ }
+ }
+ }
+}
diff --git a/src/components/common/Rating/Rating.tsx b/src/components/common/Rating/Rating.tsx
new file mode 100644
index 00000000..393da0cb
--- /dev/null
+++ b/src/components/common/Rating/Rating.tsx
@@ -0,0 +1,44 @@
+import { Star } from '@assets/icons/icons';
+import styles from './Rating.module.scss';
+
+interface RatingProps {
+ rating: number;
+ maxRating?: number;
+ className?: string;
+}
+
+const Rating = ({ rating, maxRating = 5, className = '' }: RatingProps) => {
+ const stars = [];
+
+ for (let i = 1; i <= maxRating; i++) {
+ if (i <= rating) {
+ // Filled star
+ stars.push(
+
+ {stars}
+
+ );
+};
+
+export default Rating;
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
new file mode 100644
index 00000000..c9610817
--- /dev/null
+++ b/src/components/layout/AppLayout.tsx
@@ -0,0 +1,25 @@
+import { Outlet } from 'react-router-dom';
+import Header from './Header/Header';
+import Footer from './Footer/Footer';
+import ProgressBar from '@components/common/ProgressBar/ProgressBar';
+import PageHeading from '@components/common/PageHeading/PageHeading';
+import { useAppSelector } from '@store/hooks';
+
+const AppLayout = () => {
+ const headerTitle = useAppSelector((state) => state.header.title);
+ document.title = `Meowbase | ${headerTitle}`;
+
+ return (
+
+
+
+
+
+ );
+}
+
+export default AppLayout
\ No newline at end of file
diff --git a/src/components/layout/Footer/Footer.module.scss b/src/components/layout/Footer/Footer.module.scss
new file mode 100644
index 00000000..526c1330
--- /dev/null
+++ b/src/components/layout/Footer/Footer.module.scss
@@ -0,0 +1,97 @@
+@use '../../../styles/variables' as *;
+
+.footer {
+ background: $color-background-dark;
+ padding: 1.5rem 0;
+ margin-top: auto;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 $spacing-md;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.leftSection {
+ display: flex;
+ align-items: center;
+}
+
+.logo {
+ transition: opacity 0.2s ease;
+ cursor: pointer;
+
+ &:hover {
+ :global(.cat-logo) {
+ transition: transform 0.3s ease;
+ transform: translateY(-40px);
+ }
+ }
+}
+
+.rightSection {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: $spacing-sm;
+}
+
+.contactTitle {
+ font-size: $font-size-md;
+ font-weight: 600;
+ color: $color-white;
+ margin-bottom: $spacing-xs;
+}
+
+.contactLinks {
+ display: flex;
+ gap: $spacing-md;
+}
+
+.contactLink {
+ display: flex;
+ align-items: center;
+ gap: $spacing-sm;
+ text-decoration: none;
+ color: $color-white;
+ padding: $spacing-sm;
+ border-radius: $radius-sm;
+ transition: all 0.2s ease;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ color: $color-secondary;
+ transform: translateY(-1px);
+ }
+}
+
+.icon {
+ width: 20px;
+ height: 20px;
+ fill: currentColor;
+ transition: fill 0.2s ease;
+}
+
+.linkText {
+ font-size: $font-size-sm;
+ font-weight: 500;
+}
+
+@media (max-width: 768px) {
+ .container {
+ flex-direction: column;
+ gap: $spacing-md;
+ text-align: center;
+ }
+
+ .rightSection {
+ align-items: center;
+ }
+
+ .contactLinks {
+ justify-content: center;
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx
new file mode 100644
index 00000000..07b7ba56
--- /dev/null
+++ b/src/components/layout/Footer/Footer.tsx
@@ -0,0 +1,57 @@
+import styles from './Footer.module.scss';
+import { Logo, Linkedin, Gmail, Github } from '@assets/icons/icons';
+
+const CONTACTLINKS = [
+ {
+ href: 'https://www.linkedin.com/in/stefanos-stamoulis/',
+ label: 'LinkedIn',
+ icon: Linkedin
+ },
+ {
+ href: 'mailto:sstamoulis.wd@gmail.com',
+ label: 'Gmail',
+ icon: Gmail
+ },
+ {
+ href: 'https://github.com/StefanosSt',
+ label: 'GitHub',
+ icon: Github
+ }
+ ];
+
+const Footer = () => {
+
+
+ return (
+
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/layout/Header/Header.module.scss b/src/components/layout/Header/Header.module.scss
new file mode 100644
index 00000000..5a106188
--- /dev/null
+++ b/src/components/layout/Header/Header.module.scss
@@ -0,0 +1,174 @@
+@use '../../../styles/variables' as *;
+@use '../../../styles/mixins' as *;
+
+.header {
+ width: 100%;
+}
+
+.navbar {
+ position: fixed;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 11;
+ margin-top: $spacing-xl;
+ width: 90%;
+ max-width: 80rem;
+ background: rgba(0, 0, 0, 0.2);
+ backdrop-filter: blur(16px);
+ border-radius: $radius-xl;
+ padding: $spacing-sm $spacing-md;
+ box-shadow:
+ 0 10px 25px -5px rgba(0, 0, 0, 0.1),
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.navbarContainer {
+ @include flex-center;
+ justify-content: space-between;
+ width: 100%;
+}
+
+.navbarBrand {
+ @include flex-center;
+ gap: $spacing-xl;
+}
+
+.navbarLogo {
+ @include flex-center;
+ gap: $spacing-sm;
+ text-decoration: none;
+ font-size: $font-size-lg;
+ transition: opacity 0.2s ease;
+
+ &:hover {
+ opacity: 0.8;
+
+ :global(.cat-logo) {
+ transition: transform 0.3s ease;
+ transform: translateY(-40px);
+ }
+ }
+}
+
+.navbarLogoText {
+ color: $color-primary;
+ font-weight: 700;
+}
+
+.navbarLinks {
+ @include flex-center;
+ gap: $spacing-md;
+}
+
+.navbarLinksDesktop {
+ display: none;
+
+ @media (min-width: 768px) {
+ display: flex;
+ }
+}
+
+.navbarLink {
+ text-decoration: none;
+ color: rgba(255, 255, 255, 0.8);
+ font-weight: 500;
+ font-size: $font-size-sm;
+ padding: $spacing-sm $spacing-md;
+ border-radius: $radius-lg;
+ transition: all 0.2s ease;
+ position: relative;
+
+ &:hover {
+ color: $color-white;
+ background: rgba(255, 255, 255, 0.1);
+ }
+}
+
+.navbarLinkActive {
+ color: $color-primary;
+ background: rgba(255, 152, 0, 0.1);
+
+ &:hover {
+ background: rgba(255, 152, 0, 0.2);
+ }
+}
+
+.navbarToggle {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ width: 2.5rem;
+ height: 2.5rem;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ z-index: 10;
+
+ @media (min-width: 768px) {
+ display: none;
+ }
+}
+
+.navbarToggleIcon {
+ fill: $color-white;
+ border-radius: $radius-sm;
+ transition: all 0.3s linear;
+ position: relative;
+ transform-origin: 1px;
+}
+
+.navbarMobile {
+ @include flex-center;
+ flex-direction: column;
+ gap: $spacing-sm;
+ padding: $spacing-md;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ margin-top: $spacing-sm;
+
+ @media (min-width: 768px) {
+ display: none;
+ }
+}
+
+.navbarMobileLink {
+ text-decoration: none;
+ color: rgba(255, 255, 255, 0.8);
+ font-weight: 500;
+ font-size: $font-size-md;
+ padding: $spacing-sm $spacing-md;
+ border-radius: $radius-lg;
+ transition: all 0.2s ease;
+ width: 100%;
+ text-align: center;
+
+ &:hover {
+ color: $color-white;
+ background: rgba(255, 255, 255, 0.1);
+ }
+}
+
+.navbarMobileLinkActive {
+ color: $color-primary;
+ background: rgba(255, 152, 0, 0.1);
+
+ &:hover {
+ background: rgba(255, 152, 0, 0.2);
+ }
+}
+
+.count {
+ position: absolute;
+ top: 0;
+ background-color: $color-red;
+ border-radius: 50%;
+ padding: 1px;
+ color: $color-text;
+ width: 16px;
+ height: 16px;
+ line-height: 1;
+ right: 0;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/components/layout/Header/Header.test.tsx b/src/components/layout/Header/Header.test.tsx
new file mode 100644
index 00000000..b7bfebb6
--- /dev/null
+++ b/src/components/layout/Header/Header.test.tsx
@@ -0,0 +1,72 @@
+// Header.test.tsx
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import Header from './Header';
+
+// Mock store selector
+vi.mock('@store/hooks', () => ({
+ useAppSelector: () => ({ count: 2 }), // fake favorites count
+}));
+
+// Mock icons
+vi.mock('@assets/icons/icons', () => ({
+ Logo: () => Logo
,
+ HamburgerMenu: (props: React.SVGProps
+
+ );
+};
+
+export default BreedCard;
diff --git a/src/components/ui/CatCard/CatCard.module.scss b/src/components/ui/CatCard/CatCard.module.scss
new file mode 100644
index 00000000..65e14aee
--- /dev/null
+++ b/src/components/ui/CatCard/CatCard.module.scss
@@ -0,0 +1,63 @@
+@use '../../../styles/variables' as *;
+
+.card {
+ border: 1px solid $color-border-light;
+ position: relative;
+ border-radius: $radius-sm;
+ overflow: hidden;
+ background: $color-background-light;
+ grid-column: 1 / -1;
+ cursor: pointer;
+ transition: transform 0.2s ease-in-out;
+
+ &:hover {
+ transform: scale(1.02);
+ }
+
+ @media (min-width: 768px) {
+ grid-column: auto;
+ }
+}
+
+.imageContainer {
+ width: 100%;
+ height: 250px;
+ overflow: hidden;
+}
+
+.image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.content {
+ padding: $spacing-md;
+}
+
+.id {
+ margin: 0 0 $spacing-sm 0;
+ font-weight: bold;
+ color: $color-grey;
+}
+
+.dimensions {
+ margin: 0;
+ font-size: $font-size-sm;
+ color: $color-grey;
+}
+
+.cardFavoriteBtn {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ transition: transform 0.2s ease-in-out;
+ z-index: 10;
+
+ &:hover {
+ transform: scale(1.05);
+ }
+}
\ No newline at end of file
diff --git a/src/components/ui/CatCard/CatCard.test.tsx b/src/components/ui/CatCard/CatCard.test.tsx
new file mode 100644
index 00000000..a710ea24
--- /dev/null
+++ b/src/components/ui/CatCard/CatCard.test.tsx
@@ -0,0 +1,48 @@
+// CatCard.test.tsx
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import CatCard from './CatCard';
+
+// Mock FavoriteBtn
+vi.mock('@components/common/FavoriteBtn/FavoriteBtn', () => ({
+ default: ({ imageId, className }: { imageId: string; className: string }) => (
+
+ 
+
+ + {name} +
+ {origin && ( ++ Origin: {origin} +
+ )} + {temperament && ( ++ Temperament: {temperament} +
+ )} + {lifeSpan && ( ++ Life Span: {lifeSpan} years +
+ )} + {description && ( ++ {description.length > 120 + ? `${description.substring(0, 120)}...` + : description + } +
+ )} +
+ FavoriteBtn
+
+ ),
+}));
+
+describe('CatCard', () => {
+ const mockProps = {
+ id: 'cat123',
+ imageUrl: 'http://example.com/cat.jpg',
+ alt: 'The cutest cat of Meowbase',
+ openModal: vi.fn(),
+ };
+
+ it('renders the cat image with correct src and alt', () => {
+ render(
+
+ );
+};
+
+export default CatCard;
\ No newline at end of file
diff --git a/src/components/ui/Filters/Filters.module.scss b/src/components/ui/Filters/Filters.module.scss
new file mode 100644
index 00000000..d9b38357
--- /dev/null
+++ b/src/components/ui/Filters/Filters.module.scss
@@ -0,0 +1,52 @@
+@use '../../../styles/variables' as *;
+
+.filters {
+ margin-bottom: $spacing-lg;
+ padding: $spacing-md;
+ background: linear-gradient(135deg, $color-background-light 0%, $color-background-light 100%);
+ border-radius: $radius-md;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ width: fit-content;
+}
+
+.radioGroup {
+ display: flex;
+ gap: $spacing-sm;
+}
+
+.radioGroup label {
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding: $spacing-sm $spacing-lg;
+ background: $color-background-light;
+ border: 2px solid $color-border-light;
+ border-radius: $radius-lg;
+ cursor: pointer;
+ font-weight: 500;
+ color: $color-grey;
+ transition: all 0.3s ease;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+ &:hover {
+ border-color: $color-secondary;
+ color: $color-button;
+ transform: translateY(-1px);
+ box-shadow: 0 3px 8px rgba(0, 123, 255, 0.2);
+ }
+
+ &:has(input:checked) {
+ background: linear-gradient(135deg, $color-button 0%, $color-button-hover 100%);
+ border-color: $color-button-hover;
+ color: $color-white;
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+ }
+}
+
+.radioGroup input[type="radio"] {
+ position: absolute;
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
diff --git a/src/components/ui/Filters/Filters.tsx b/src/components/ui/Filters/Filters.tsx
new file mode 100644
index 00000000..77463058
--- /dev/null
+++ b/src/components/ui/Filters/Filters.tsx
@@ -0,0 +1,33 @@
+import { memo } from 'react';
+import styles from './Filters.module.scss';
+import type { FiltersProps } from '@types'
+
+
+const Filters = memo(({ hasBreeds, onChange }: FiltersProps) => {
+ return (
+
+ 
+
+
+
+ );
+});
+
+export default Filters;
diff --git a/src/components/ui/GridLayout/GridLayout.module.scss b/src/components/ui/GridLayout/GridLayout.module.scss
new file mode 100644
index 00000000..1e5f819a
--- /dev/null
+++ b/src/components/ui/GridLayout/GridLayout.module.scss
@@ -0,0 +1,22 @@
+.grid {
+ display: grid;
+ width: 100%;
+ grid-auto-flow: dense;
+ row-gap: var(--grid-gap, 1rem);
+ grid-template-columns: 1fr;
+
+ @media (min-width: 768px) {
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--grid-gap, 1rem);
+ grid-auto-flow: dense;
+
+ > * {
+ grid-column: auto;
+ }
+ }
+
+ @media (min-width: 1024px) {
+ grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
+ grid-auto-flow: dense;
+ }
+}
\ No newline at end of file
diff --git a/src/components/ui/GridLayout/GridLayout.tsx b/src/components/ui/GridLayout/GridLayout.tsx
new file mode 100644
index 00000000..dfc4f2bd
--- /dev/null
+++ b/src/components/ui/GridLayout/GridLayout.tsx
@@ -0,0 +1,25 @@
+import styles from './GridLayout.module.scss';
+import type { GridProps } from '@types';
+
+const GridLayout = ({
+ children,
+ columns = 1,
+ gap = '1rem',
+ className,
+}: GridProps) => {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+};
+
+export default GridLayout;
diff --git a/src/components/ui/Modal/Modal.module.scss b/src/components/ui/Modal/Modal.module.scss
new file mode 100644
index 00000000..e8f75e9c
--- /dev/null
+++ b/src/components/ui/Modal/Modal.module.scss
@@ -0,0 +1,192 @@
+@use '../../../styles/variables' as *;
+
+.modal {
+ border: none;
+ border-radius: $radius-sm;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ top: 100%;
+ left: 50%;
+ transform: translate(-50%, -100%);
+ min-width:100vw;
+ height:90vh;
+
+ &::backdrop {
+ background-color: rgba(0, 0, 0, 0.5);
+ }
+
+ img {
+ max-height: 600px;
+ width:100%;
+ object-fit: cover;
+ border-radius:$radius-md;
+ }
+
+ @media(min-width:767px) {
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 800px;
+ min-width:unset;
+ height:80vh;
+ }
+}
+
+.modalContent {
+ padding: 0;
+ background: white;
+ border-radius: $radius-sm;
+ min-width: 300px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.modalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: $spacing-md;
+ border-bottom: 1px solid $color-border-light;
+ position: sticky;
+ top: 0;
+ background: $color-white;
+ z-index: 10;
+ flex-shrink: 0;
+}
+
+.modalTitle {
+ margin: 0;
+ font-size: $font-size-xl;
+ font-weight: 600;
+}
+
+.closeButton {
+ background: none;
+ border: none;
+ font-size: $font-size-lg;
+ cursor: pointer;
+ padding: $spacing-xs;
+ line-height: 1;
+ color: $color-grey;
+
+ &:hover {
+ color: $color-dark;
+ }
+}
+
+.backButton {
+ background: none;
+ border: none;
+ cursor:pointer;
+
+ &:hover {
+ color: $color-dark;
+ }
+}
+
+.modalBody {
+ padding: $spacing-sm;
+ overflow-y: auto;
+ flex: 1;
+ height: 0;
+}
+
+// ModalContent styles
+.modal__details {
+ display: flex;
+ justify-content:space-between;
+ gap: $spacing-sm;
+}
+
+.modal__details-info {
+ p {
+ margin: 0.5rem 0;
+ font-size: $font-size-md;
+
+ strong {
+ color: $color-primary;
+ margin-right: $spacing-sm;
+ }
+ }
+}
+
+.modal__details-actions {
+
+ button {
+ background-color: transparent;
+ border: none;
+ padding: $spacing-sm;
+ cursor: pointer;
+ border-radius: $radius-xs;
+ svg {
+ transition: fill 0.2s ease;
+ }
+
+ &:hover {
+ svg{
+ fill:$color-primary;
+ }
+ }
+
+ }
+}
+
+.modal__no-breed {
+ padding: $spacing-lg;
+ text-align: center;
+ background-color: $color-background-light;
+ border-radius: $radius-sm;
+ margin-top: $spacing-md;
+ border: 1px solid $color-border-light;
+
+ p {
+ margin: 0;
+ font-size: $font-size-md;
+ color: $color-grey;
+ font-style: italic;
+ }
+}
+
+.modal__breed-images {
+ margin-top: $spacing-lg;
+}
+
+.modal__breed-gallery {
+ display: flex;
+ flex-wrap: wrap;
+ gap: $spacing-md;
+ justify-content: center;
+}
+
+.modal__breed-circle {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ overflow: hidden;
+ border: 3px solid $color-border-light;
+ transition: transform 0.2s ease, border-color 0.2s ease;
+ cursor: pointer;
+
+ &:hover {
+ transform: scale(1.1);
+ border-color: $color-primary;
+ }
+}
+
+.modal__breed-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 50%;
+}
+
+.modal__loading {
+ text-align: center;
+ padding: $spacing-lg;
+
+ p {
+ margin: 0;
+ font-size: $font-size-md;
+ color: $color-grey;
+ font-style: italic;
+ }
+}
\ No newline at end of file
diff --git a/src/components/ui/Modal/Modal.test.tsx b/src/components/ui/Modal/Modal.test.tsx
new file mode 100644
index 00000000..61a3dc23
--- /dev/null
+++ b/src/components/ui/Modal/Modal.test.tsx
@@ -0,0 +1,93 @@
+// Modal.test.tsx
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, beforeAll } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Modal } from './Modal';
+
+// --- Mock dialog methods (jsdom doesnβt implement these) ---
+beforeAll(() => {
+ window.HTMLDialogElement.prototype.showModal = vi.fn();
+ window.HTMLDialogElement.prototype.close = vi.fn();
+});
+
+// Mock hooks
+vi.mock('@hooks', () => ({
+ useLockBodyScroll: vi.fn(),
+ useEscapeKey: vi.fn(),
+}));
+
+// Mock redux hooks
+const mockDispatch = vi.fn();
+let mockCurrentView = 'cat';
+vi.mock('@store/hooks', () => ({
+ useAppDispatch: () => mockDispatch,
+ useAppSelector: (selector: (state: unknown) => unknown) =>
+ selector({ modalContent: { currentView: mockCurrentView } }),
+}));
+
+// Mock slice action
+vi.mock('@store/modalContentSlice', () => ({
+ switchToBreedView: () => ({ type: 'modal/switchToBreedView' }),
+}));
+
+// Mock icons
+vi.mock('@assets/icons/icons', () => ({
+ Arrow: () => β,
+}));
+
+describe('Modal', () => {
+ let defaultProps: {
+ isOpen: boolean;
+ setIsOpen: () => void;
+ onClose: () => void;
+ children: React.ReactNode;
+ title: string;
+ orientation: string;
+ catId: string;
+ };
+
+ beforeEach(() => {
+ defaultProps = {
+ isOpen: true,
+ setIsOpen: vi.fn(),
+ onClose: vi.fn(),
+ children: Modal content
, + title: 'Test Modal', + orientation: 'center', + catId: 'cat123', + }; + mockDispatch.mockClear(); + mockCurrentView = 'cat'; + }); + + it('renders title and children when open', () => { + render(
+
+ ) : (
+ <>
+ Explore the {content.name || 'Breed'} cats
+
+ {currentBreedCats.map((imageUrl, index) => (
+
+ handleBreedImageClick(imageUrl)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+ ))}
+
+ 
+
+
+ {!!displayDetails.width && (
+
+
+ )}
+
+ {hasBreedDetails ? (
+
+
+ )}
+ Dimensions: {displayDetails.width} Γ {displayDetails.height}px
+Orientation: {orientation}
+
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default ModalContent;
\ No newline at end of file
diff --git a/src/components/ui/Skeletons/BreedCardSkeleton.tsx b/src/components/ui/Skeletons/BreedCardSkeleton.tsx
new file mode 100644
index 00000000..d0d747a3
--- /dev/null
+++ b/src/components/ui/Skeletons/BreedCardSkeleton.tsx
@@ -0,0 +1,33 @@
+import ContentLoader from 'react-content-loader';
+import styles from './Skeletons.module.scss';
+
+export const BreedCardSkeleton = () => (
+ Unfortunately there is not any breed information for this cat
+
+
+ {/* Image area */}
+
+
+);
+
diff --git a/src/components/ui/Skeletons/CatCardSkeleton.tsx b/src/components/ui/Skeletons/CatCardSkeleton.tsx
new file mode 100644
index 00000000..afd7f004
--- /dev/null
+++ b/src/components/ui/Skeletons/CatCardSkeleton.tsx
@@ -0,0 +1,16 @@
+import ContentLoader from 'react-content-loader';
+import styles from './Skeletons.module.scss';
+
+export const CatCardSkeleton = () => (
+
+
+
+
+);
diff --git a/src/components/ui/Skeletons/GridSkeleton.tsx b/src/components/ui/Skeletons/GridSkeleton.tsx
new file mode 100644
index 00000000..d97b171c
--- /dev/null
+++ b/src/components/ui/Skeletons/GridSkeleton.tsx
@@ -0,0 +1,27 @@
+import GridLayout from '@components/ui/GridLayout/GridLayout';
+import { CatCardSkeleton } from './CatCardSkeleton';
+import { BreedCardSkeleton } from './BreedCardSkeleton';
+import styles from './Skeletons.module.scss';
+import type { GridSkeletonProps } from '@types';
+
+export const GridSkeleton = ({
+ type = 'cat',
+ count = 8,
+ columns = 5,
+ gap = '1rem',
+ className = 'grid'
+}: GridSkeletonProps) => {
+ const SkeletonComponent = type === 'breed' ? BreedCardSkeleton : CatCardSkeleton;
+
+ return (
+
+
+ {Array.from({ length: count }, (_, index) => (
+
+
+ );
+};
diff --git a/src/components/ui/Skeletons/Skeletons.module.scss b/src/components/ui/Skeletons/Skeletons.module.scss
new file mode 100644
index 00000000..f266fb78
--- /dev/null
+++ b/src/components/ui/Skeletons/Skeletons.module.scss
@@ -0,0 +1,17 @@
+@use '../../../styles/variables' as *;
+
+// BreedCard Skeleton Styles
+.breedCardSkeleton {
+ padding: $spacing-md;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: $radius-md;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+
+
+.breedCardSkeleton {
+ background: rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.2);
+}
diff --git a/src/components/ui/Skeletons/Skeletons.tsx b/src/components/ui/Skeletons/Skeletons.tsx
new file mode 100644
index 00000000..15bcc343
--- /dev/null
+++ b/src/components/ui/Skeletons/Skeletons.tsx
@@ -0,0 +1,3 @@
+export { CatCardSkeleton } from './CatCardSkeleton';
+export { BreedCardSkeleton } from './BreedCardSkeleton';
+export { GridSkeleton } from './GridSkeleton';
\ No newline at end of file
diff --git a/src/components/ui/Toast/Toast.module.scss b/src/components/ui/Toast/Toast.module.scss
new file mode 100644
index 00000000..f5ab6bf6
--- /dev/null
+++ b/src/components/ui/Toast/Toast.module.scss
@@ -0,0 +1,59 @@
+@use '../../../styles/variables' as *;
+
+.toast {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ max-width: 300px;
+ padding: $spacing-sm $spacing-md;
+ border-radius: $radius-sm;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ z-index: 9999;
+ animation: slideIn 0.3s ease-out;
+ font-weight: 500;
+
+ &__message {
+ display: block;
+ font-size: $font-size-sm;
+ line-height: 1.4;
+ }
+
+ &--success {
+ background-color: $color-background-light;
+ color: $color-success-dark;
+ border-left: 4px solid $color-success-light;
+ }
+
+ &--error {
+ background-color: $color-error-light;
+ color: $color-error-dark;
+ border-left: 4px solid $color-error-dark;
+ }
+
+ &--info {
+ background-color: $color-info-light;
+ color: $color-info-dark;
+ border-left: 4px solid $color-info-dark;
+ }
+}
+
+@media (max-width: 768px) {
+ .toast {
+ top: 10px;
+ right: 10px;
+ left: 10px;
+ max-width: none;
+ margin: 0 $spacing-sm;
+ }
+}
+
+@keyframes slideIn {
+ from {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
diff --git a/src/components/ui/Toast/Toast.tsx b/src/components/ui/Toast/Toast.tsx
new file mode 100644
index 00000000..37362f1e
--- /dev/null
+++ b/src/components/ui/Toast/Toast.tsx
@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useToast } from '@hooks/useToast';
+import styles from './Toast.module.scss';
+
+const Toast = () => {
+ const { toastData, hideToast } = useToast();
+
+ useEffect(() => {
+ if (toastData.show) {
+ const timer = setTimeout(() => {
+ hideToast();
+ }, 3000);
+
+ return () => clearTimeout(timer);
+ }
+ }, [toastData.show, hideToast]);
+
+ if (!toastData.show) return null;
+
+ return (
+
+
+ ))}
+
+ {toastData.message}
+
+ );
+};
+
+export default Toast;
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 00000000..da98e04e
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1,5 @@
+export { useClickOutside } from './useClickOutside';
+export { useEscapeKey } from './useEscapeKey';
+export { useLocalStorage } from './useLocalStorage';
+export { useToast, showGlobalToast } from './useToast';
+export { useLockBodyScroll } from './useLockBodyScroll';
\ No newline at end of file
diff --git a/src/hooks/useClickOutside.ts b/src/hooks/useClickOutside.ts
new file mode 100644
index 00000000..7262929c
--- /dev/null
+++ b/src/hooks/useClickOutside.ts
@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+
+export function useClickOutside
+
+ );
+ }
+
+ return (
+ Error loading breeds: {error.message}
+
+
+ {breeds.map((breed: Breed) => (
+ handleBreedClick(breed)}
+ />
+ ))}
+
+
+ {selectedBreed && (
+
+
+ )}
+
+ )
+}
+
+export default Breeds
\ No newline at end of file
diff --git a/src/pages/Catlist.tsx b/src/pages/Catlist.tsx
new file mode 100644
index 00000000..2d661006
--- /dev/null
+++ b/src/pages/Catlist.tsx
@@ -0,0 +1,144 @@
+import { useState, useEffect } from 'react';
+import { setHeaderData } from '@store/headerSlice';
+import { useAppDispatch } from '@store/hooks';
+import GridLayout from '@components/ui/GridLayout/GridLayout';
+import CatCard from '@components/ui/CatCard/CatCard';
+import Filters from '@components/ui/Filters/Filters';
+import { useLocalStorage } from '@hooks';
+import { useDynamicInfiniteCats, useCatById } from '@/api/hooks';
+import type { Cat } from '@types';
+import { GridSkeleton } from '@/components/ui/Skeletons/Skeletons';
+import { useSearchParams } from 'react-router-dom';
+import { Modal } from '@/components/ui/Modal/Modal';
+import ModalContent from '@/components/ui/Modal/ModalContent';
+import { clearSharedUrl } from '@/store/sharedUrlSlice';
+
+
+const Catlist = () => {
+ const limit = 10;
+ const [searchParams, setSearchParams] = useSearchParams();
+ const itemId = searchParams.get('cat_id');
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [selectedCat, setSelectedCat] = useState
+
+ );
+ }
+
+ return (
+ Error loading cats. Please try again later.
+
+
+ {allCatImages.map(cat => (
+ handleCatClick(cat)}
+ />
+ ))}
+
+
+ {isFetchingNextPage &&
+ selectedCat.height ? 'Landscape' : 'Portrait'}
+ >
+
+ )}
+
+ )
+}
+
+export default Catlist
\ No newline at end of file
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
new file mode 100644
index 00000000..69fe4173
--- /dev/null
+++ b/src/pages/Favorites.tsx
@@ -0,0 +1,126 @@
+import { useEffect, useState } from 'react';
+import { setHeaderData } from '@store/headerSlice';
+import { useAppDispatch } from '@store/hooks';
+import { setSharedUrl, clearSharedUrl } from '@/store/sharedUrlSlice';
+import { useFavorites } from '@api/hooks';
+import { useSearchParams, NavLink } from 'react-router-dom'
+import GridLayout from '@components/ui/GridLayout/GridLayout';
+import CatCard from '@components/ui/CatCard/CatCard';
+import type { FavoriteItem, Cat } from '@types';
+import { GridSkeleton } from '@/components/ui/Skeletons/Skeletons';
+import { Modal } from '@/components/ui/Modal/Modal';
+import ModalContent from '@/components/ui/Modal/ModalContent';
+
+const Favorites = () => {
+ const dispatch = useAppDispatch();
+ const [searchParams, setSearchParams] = useSearchParams();
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [selectedCat, setSelectedCat] = useState
+
+
+ )}
+
+ {selectedCat && (
+
+
+ );
+ }
+
+ return (
+ Do you want to explore and add some favorites?
+
+
+ Explore Cats
+
+
+ Explore Breeds
+
+
+
+
+ {favorites.map((favorite: FavoriteItem) => {
+ const catData: Cat = {
+ id: favorite.image_id,
+ url: favorite.image?.url || '',
+ width: favorite.image?.width || 0,
+ height: favorite.image?.height || 0,
+ breeds: []
+ };
+ return (
+ handleCatClick(catData)}
+ />
+ );
+ })}
+
+ {selectedCat && (
+ selectedCat.height ? 'Landscape' : 'Portrait'}
+ >
+
+ )}
+
+ )
+}
+
+export default Favorites
\ No newline at end of file
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
new file mode 100644
index 00000000..6c13c650
--- /dev/null
+++ b/src/pages/NotFound.tsx
@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { useAppDispatch } from '@store/hooks';
+import { setHeaderData } from '@store/headerSlice';
+import catNotFound from '@assets/404.png';
+
+const NotFound = () => {
+ const dispatch = useAppDispatch();
+
+ useEffect(() => {
+ dispatch(
+ setHeaderData({
+ title: 'Meow! Page Not Found',
+ description: 'Oops! This page seems to have wandered off like a curious cat.'
+ })
+ );
+ }, [dispatch]);
+
+ return (
+