+ 
+
+
+
+ 
+
+
+
+ {name}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Footer.css b/src/components/Footer.css
new file mode 100644
index 0000000..20ff95e
--- /dev/null
+++ b/src/components/Footer.css
@@ -0,0 +1,12 @@
+.footer {
+ width: 100%;
+ height: 6rem;
+ background-color: #161616;
+ color: white;
+ font-size: medium;
+ margin-inline: auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..89fff4e
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,9 @@
+import "./Footer.css";
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/Searchbar.test.tsx b/src/components/Searchbar.test.tsx
new file mode 100644
index 0000000..e5be8e1
--- /dev/null
+++ b/src/components/Searchbar.test.tsx
@@ -0,0 +1,39 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/vitest";
+import Searchbar from "./Searchbar";
+import { describe, it, expect, vi, afterEach } from "vitest";
+
+afterEach(() => {
+ cleanup();
+});
+
+describe("Searchbar", () => {
+ it("Searches based on a searchQuery", () => {
+ const onSearchChange = vi.fn();
+ render(
+
+
+
+
+
+ {character.name}
+ +
+
+
+ {character.gender === "Male" ? (
+ 
+ ) : character.gender === "Female" ? (
+ 
+ ) : (
+ "⚪"
+ )}
+
+ {character.gender}
+
+
+ 
{character.species}
+
+
+ ● {character.status}
+
+
+
+ 
+
+
+
+
+ Origin
+ {character.origin.name} +
+
+
+
+ Episodes
+ {character.episode.length} +-
+ {episodes.map((episode) => (
+
- + {episode.episode} - {episode.name} + + ))} +
+
+
+ 
+
+ 
+
+
+
+
+
+`;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..a2960ac
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,90 @@
+:root {
+ --text: #6b6375;
+ --text-h: #08060d;
+ --bg: #fff;
+ --border: #e5e4e7;
+ --code-bg: #f4f3ec;
+ --accent: #aa3bff;
+ --accent-bg: rgba(170, 59, 255, 0.1);
+ --accent-border: rgba(170, 59, 255, 0.5);
+ --social-bg: rgba(244, 243, 236, 0.5);
+ --shadow:
+ rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+ --sans: system-ui, "Segoe UI", Roboto, sans-serif;
+ --heading: system-ui, "Segoe UI", Roboto, sans-serif;
+ --mono: ui-monospace, Consolas, monospace;
+
+ font: 18px/145% var(--sans);
+ letter-spacing: 0.18px;
+ color-scheme: light dark;
+ color: var(--text);
+ background: var(--bg);
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ @media (max-width: 1024px) {
+ font-size: 16px;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --text: #9ca3af;
+ --text-h: #f3f4f6;
+ --bg: #16171d;
+ --border: #2e303a;
+ --code-bg: #1f2028;
+ --accent: #c084fc;
+ --accent-bg: rgba(192, 132, 252, 0.15);
+ --accent-border: rgba(192, 132, 252, 0.5);
+ --social-bg: rgba(47, 48, 58, 0.5);
+ --shadow:
+ rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+ }
+
+ #social .button-icon {
+ filter: invert(1) brightness(2);
+ }
+}
+
+#root {
+ width: 100%;
+ min-height: 100vh;
+}
+
+body {
+ margin: 0;
+ background-color: #282828;
+}
+
+h1,
+h2 {
+ font-family: var(--heading);
+ font-weight: 500;
+ color: var(--text-h);
+}
+
+h1 {
+ font-size: 56px;
+ letter-spacing: -1.68px;
+ margin: 32px 0;
+ @media (max-width: 1024px) {
+ font-size: 36px;
+ margin: 20px 0;
+ }
+}
+h2 {
+ font-size: 24px;
+ line-height: 118%;
+ letter-spacing: -0.24px;
+ margin: 0 0 8px;
+ @media (max-width: 1024px) {
+ font-size: 20px;
+ }
+}
+p {
+ margin: 0;
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..d0a8775
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "./index.css";
+import App from "./App.tsx";
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")!).render(
+
+ '%3e%3cpath%20d='M0%2020C0%208.9543%208.95431%200%2020%200H97.85H175.7C186.746%200%20195.7%208.95431%20195.7%2020V134.068V225.85C195.7%20234.89%20188.372%20242.218%20179.332%20242.218H178.965C170.128%20242.218%20162.963%20249.382%20162.963%20258.22C162.963%20267.057%20155.799%20274.221%20146.962%20274.221H97.85H20C8.95429%20274.221%200%20265.267%200%20254.221V134.068V49.0929V20Z'%20fill='%2382B70C'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_n_93_129'%20x='0'%20y='0'%20width='195.7'%20height='274.221'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeTurbulence%20type='fractalNoise'%20baseFrequency='2%202'%20stitchTiles='stitch'%20numOctaves='3'%20result='noise'%20seed='900'%20/%3e%3cfeColorMatrix%20in='noise'%20type='luminanceToAlpha'%20result='alphaNoise'%20/%3e%3cfeComponentTransfer%20in='alphaNoise'%20result='coloredNoise1'%3e%3cfeFuncA%20type='discrete'%20tableValues='0%200%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20'/%3e%3c/feComponentTransfer%3e%3cfeComposite%20operator='in'%20in2='shape'%20in='coloredNoise1'%20result='noise1Clipped'%20/%3e%3cfeFlood%20flood-color='rgba(0,%200,%200,%200.25)'%20result='color1Flood'%20/%3e%3cfeComposite%20operator='in'%20in2='noise1Clipped'%20in='color1Flood'%20result='color1'%20/%3e%3cfeMerge%20result='effect1_noise_93_129'%3e%3cfeMergeNode%20in='shape'%20/%3e%3cfeMergeNode%20in='color1'%20/%3e%3c/feMerge%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e)
+
+
+
+ 
+
+
+
+ + Rick Sanchez +
+ +
+
+
+
+ {selectedCharacter && (
+ setSelectedCharacter(null)}
+ onPrevious={showPreviousCharacter}
+ onNext={showNextCharacter}
+ isFavorite={favoriteCharacterIds.includes(selectedCharacter.id)}
+ onToggleFavorite={() => handleToggleFavorite(selectedCharacter.id)}
+ />
+ )}
+
+ );
+}
diff --git a/src/pages/HeroPage.css b/src/pages/HeroPage.css
new file mode 100644
index 0000000..f822ecc
--- /dev/null
+++ b/src/pages/HeroPage.css
@@ -0,0 +1,98 @@
+.hero {
+ height: 50rem;
+ background-color: black;
+ color: white;
+ overflow: hidden;
+ border-radius: 0 0 50% 50% / 0 0 10% 10%;
+ display: flex;
+
+ justify-content: center;
+ align-items: flex-start;
+}
+
+.hero-content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 12%;
+ margin-top: 6rem;
+ margin-inline: 2rem;
+}
+
+.hero-text {
+ width: min(100%, 400px);
+ flex-shrink: 1;
+}
+
+.logo {
+ width: 21rem;
+ height: auto;
+}
+
+.hero-description {
+ margin: 25px 0 35px;
+ font-size: large;
+ line-height: 1.3;
+}
+
+.hero-button {
+ width: 95%;
+ padding: 15px;
+ display: block;
+ background-color: #45b4ca;
+ color: white;
+ border-radius: 18px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 18px;
+}
+
+.hero-characters {
+ width: min(40vw, 500px);
+}
+
+@media (max-width: 700px) {
+ .hero {
+ padding: clamp(4rem, 12vh, 8rem) 1.25rem;
+ border-radius: 0 0 50% 50% / 0 0 4% 4%;
+ align-items: center;
+ }
+
+ .hero-text {
+ width: 100%;
+ max-width: 400px;
+ margin: 0 auto;
+ }
+
+ .hero-content {
+ margin-top: 0;
+ }
+
+ .logo {
+ width: 100%;
+ }
+
+ .hero-description {
+ margin: 30px 5px 40px;
+ font-size: 16px;
+ }
+
+ .hero-characters {
+ display: none;
+ }
+}
+
+@media (max-width: 900px) and (orientation: landscape) {
+ .hero {
+ padding-block: 2rem;
+ align-items: center;
+ }
+
+ .hero-description {
+ margin-block: 1.25rem;
+ }
+
+ .hero-content {
+ gap: 0;
+ }
+}
diff --git a/src/pages/HeroPage.tsx b/src/pages/HeroPage.tsx
new file mode 100644
index 0000000..3c163de
--- /dev/null
+++ b/src/pages/HeroPage.tsx
@@ -0,0 +1,39 @@
+import HeroImage from "../assets/hero.png";
+import Logo from "../assets/logo.png";
+
+import "./HeroPage.css";
+
+function HeroPage() {
+ return (
+
+ {filteredCharacters.map((character) => (
+ handleToggleFavorite(character.id)}
+ onDetails={() => setSelectedCharacter(character)}
+ />
+ ))}
+
+
+ 
+
+
+ 
+
+
+
+ + Explore every character in the TV universe Rick and Morty. Enter an + item name or keyword in the search bar to instantly narrow down the + results and find exactly what you're looking for. +
+ + + Read more + +