diff --git a/src/App.tsx b/src/App.tsx
index 3f51411..12bc5ef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { usePopMovies, useCurMovies, useSearchMovies } from './hooks/useMovies';
 import { usePopularPeople } from './hooks/usePeople';
-import { Sidebar } from './components/sidebar';
+import { Sidebar } from './components/Sidebar';
 import { Section } from './components/Section';
 import { MovieList } from './components/MovieList'; 
 import { PersonList } from './components/PersonList';
@@ -12,11 +12,16 @@ import { sortAndFilterMovies, type SortOption } from './utils/sortAndFilterMovie
 import { SortFilterBar } from './components/SortFilterBar';
 import { useFavorites } from './hooks/useFavorites';
 import { TrendingPreview } from './components/TrendingPreview';
+import { MovieDetails } from './components/MovieDetails';
+
+import type { Movie } from './types/tmdb';
+
 import './App.css';
 
 function App() {
 
   const [query, setQuery] = useState('');
+  const [selectedMovie, setSelectedMovie] = useState<Movie | null>(null);
 
   const [sortBy, setSortBy] = useSessionStorage<SortOption>('sortBy', 'popularity');
   const [minRating, setMinRating] = useSessionStorage<number>('minRating', 0);
@@ -42,19 +47,20 @@ function App() {
         />
         {isSearching ? (
           <Section id="sok" title={`Søkeresultater for "${query}"`} isLoading={search.isLoading} error={search.error}>
-                        {search.data && <MovieList movies={search.data} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} />}
+            {search.data && <MovieList movies={search.data} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={setSelectedMovie} />}
           </Section>
           ) : (
           <>
             <Section id="trendingPreview" title="" isLoading={current.isLoading} error={current.error}>
-              {current.data && <TrendingPreview movies={current.data}/>}
+              {current.data && <TrendingPreview movies={current.data} onSelectMovie={setSelectedMovie}/>}
             </Section>
+
             <Section id="populaere" title="Populære filmer" isLoading={popular.isLoading} error={popular.error}>
-                            {popular.data && <MovieList movies={popular.data} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} />}
+              {popular.data && <MovieList movies={popular.data} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={setSelectedMovie} />}
             </Section>
 
             <Section id="nye-filmer" title="Nye filmer" isLoading={current.isLoading} error={current.error}>
-                            {current.data && <MovieList movies={current.data} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} />}
+              {current.data && <MovieList movies={current.data} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={setSelectedMovie} />}
             </Section>
 
             <Section id="skuespillere" title="Skuespillere" isLoading={people.isLoading} error={people.error}>
@@ -63,6 +69,10 @@ function App() {
           </>
         )}
       </main>
+
+      {selectedMovie && (
+        <MovieDetails movie={selectedMovie} isFavorite={isFavorite(selectedMovie.id)} onToggleFavorite={toggleFavorite} onClose={() => setSelectedMovie(null)}  />
+      )}
       <div className="page-spacer" aria-hidden="true"></div>
     </div>
   );
diff --git a/src/components/FavoriteButton.css b/src/components/FavoriteButton.css
new file mode 100644
index 0000000..6c48dc5
--- /dev/null
+++ b/src/components/FavoriteButton.css
@@ -0,0 +1,9 @@
+.favorite-button {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  line-height: 1;
+  font-size: 1.5rem;
+  color: #fbc02d;
+}
\ No newline at end of file
diff --git a/src/components/FavoriteButton.tsx b/src/components/FavoriteButton.tsx
new file mode 100644
index 0000000..75d2313
--- /dev/null
+++ b/src/components/FavoriteButton.tsx
@@ -0,0 +1,27 @@
+import type { Movie } from "../types/tmdb";
+
+import "./FavoriteButton.css";
+
+type FavoriteButtonProps = {
+  movie: Movie;
+  className?: string;
+  isFavorite: boolean;
+  onToggleFavorite: (id: number) => void;
+};
+
+export function FavoriteButton({ movie, className, isFavorite, onToggleFavorite }: FavoriteButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`favorite-button ${className??""}`}
+      aria-pressed={isFavorite}
+      aria-label={isFavorite ? `Fjern ${movie.title} fra favoritter` : `Legg ${movie.title} til favoritter`}
+      onClick={(e) => {
+        e.stopPropagation();
+        onToggleFavorite(movie.id);
+      }}
+    >
+      {isFavorite ? "★" : "☆"}
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MovieCard.css b/src/components/MovieCard.css
index 0e7996b..0cfb3af 100644
--- a/src/components/MovieCard.css
+++ b/src/components/MovieCard.css
@@ -89,13 +89,6 @@
   bottom: 0.5rem;
   right: 0.5rem;
   z-index: 1;
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: 1.5rem;
-  line-height: 1;
-  color: #fbc02d;
-  cursor: pointer;
 }
 
 @media (max-width: 480px) {
@@ -110,4 +103,4 @@
   .movie-card__info {
     padding-right: 3rem;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/MovieCard.tsx b/src/components/MovieCard.tsx
index 527203a..7396674 100644
--- a/src/components/MovieCard.tsx
+++ b/src/components/MovieCard.tsx
@@ -1,8 +1,11 @@
 import { useMovieCredits } from "../hooks/useMovieCredits";
+import type { Movie } from "../types/tmdb";
+import { FavoriteButton } from "./FavoriteButton";
 import "./MovieCard.css";
 
 // Definerer hvilke props (data utenfra) komponenten forventer å motta,
 // og hvilken type hver av dem skal ha.
+/*
 interface MovieCardProps {
   movieId: number; // TMDB sin filmid, brukes til å hente skuespillere
   title: string; // Filmens tittel, skal vises som overskrift
@@ -10,36 +13,38 @@ interface MovieCardProps {
   rating: number; // Terningkast/prosent (0-100), f.eks. vote_average * 10 fra TMDB
   isFavorite: boolean; // Om denne filmen er markert som favoritt
   onToggleFavorite: (id: number) => void; // Kalles når stjernen klikkes
+  onSelectMovie: (movie: Movie) => void;
 }
+*/
 
-function MovieCard({ movieId, title, posterUrl, rating, isFavorite, onToggleFavorite }: MovieCardProps) {
+interface MovieCardProps {
+  movie: Movie;
+  isFavorite: boolean; // Om denne filmen er markert som favoritt
+  onToggleFavorite: (id: number) => void; // Kalles når stjernen klikkes
+  onSelectMovie: (movie: Movie) => void;
+}
+
+function MovieCard({ movie, isFavorite, onToggleFavorite, onSelectMovie }: MovieCardProps) {
   // Henter skuespillere for akkurat denne filmen når kortet vises
-  const { data: credits, isLoading } = useMovieCredits(movieId);
+  const { data: credits, isLoading } = useMovieCredits(movie.id);
 
   // Viser kun de 3 første, sortert etter TMDB sin billed-rekkefølge
   const topActors = credits?.cast.slice(0, 3) ?? [];
+  // TMDB sin vote_average går fra 0-10, vi ganger med 10 for å få prosent (0-100)
+  const rating = Math.round(movie.vote_average * 10);
+  const path = movie.poster_path?`https://image.tmdb.org/t/p/w200${movie.poster_path}`:"";
 
   return (
-    <div className="movie-card">
-      <button
-        type="button"
-        className="movie-card__favorite"
-        aria-pressed={isFavorite}
-        aria-label={isFavorite ? `Fjern ${title} fra favoritter` : `Legg ${title} til favoritter`}
-        onClick={() => onToggleFavorite(movieId)}
-      >
-        {isFavorite ? "★" : "☆"}
-      </button>
+    <div className="movie-card" onClick={() => {onSelectMovie(movie) }}>
+      <FavoriteButton className="movie-card__favorite" movie={movie} isFavorite={isFavorite} onToggleFavorite={onToggleFavorite} />
 
       <span className="movie-card__rating">{rating}%</span>
 
-      <img className="movie-card__poster" src={posterUrl} alt={title} />
+      <img className="movie-card__poster" src={path} alt={movie.title} />
 
       <div className="movie-card__info">
-        <h3 className="movie-card__title">{title}</h3>
-
-                {isLoading && <p className="movie-card__actors-loading">Laster skuespillere...</p>}
-
+        <h3 className="movie-card__title">{movie.title}</h3>
+        {isLoading && <p className="movie-card__actors-loading">Laster skuespillere...</p>}
         {!isLoading && topActors.length > 0 && (
           <p className="movie-card__actors">
             {topActors.map((actor) => actor.name).join(", ")}
diff --git a/src/components/MovieDetails.css b/src/components/MovieDetails.css
new file mode 100644
index 0000000..c5478ed
--- /dev/null
+++ b/src/components/MovieDetails.css
@@ -0,0 +1,86 @@
+.details-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+
+
+.details-card {
+  position: relative;
+  width: 60vw;
+  max-width: 800px;
+  max-height: 80vh;
+  overflow-y: auto;
+  background: #111;
+  border-radius: 1rem;
+  color: white;
+}
+
+.details-backdrop {
+  width: 100%;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 1rem 1rem 0 0;
+}
+
+.details-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+}
+
+.details-content {
+  padding: 1.25rem 1.5rem;
+  text-align: center;
+}
+
+.details-content h2 {
+  margin: 0 0 0.25rem;
+}
+
+.details-meta {
+  margin: 0 0 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.details-content h3 {
+  margin: 1rem 0 0.5rem;
+  font-size: 1rem;
+}
+
+.details-overview {
+  margin: 0 0 0.5rem;
+  line-height: 1.4;
+}
+
+.details-actors {
+  margin: 0;
+}
+
+/* MovieDetails.css */
+.details-favorite {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 1;
+
+  background: rgba(0, 0, 0, 0.5);
+  border: none;
+  border-radius: 50%;
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+}
diff --git a/src/components/MovieDetails.tsx b/src/components/MovieDetails.tsx
new file mode 100644
index 0000000..5da3174
--- /dev/null
+++ b/src/components/MovieDetails.tsx
@@ -0,0 +1,55 @@
+import { useMovieCredits } from "../hooks/useMovieCredits";
+import type { Movie } from "../types/tmdb";
+import { FavoriteButton } from "./FavoriteButton";
+import "./MovieDetails.css"
+
+type MovieDetailsProps = {
+  movie: Movie;
+  isFavorite: boolean;
+  onToggleFavorite: (id: number) => void;
+  onClose: () => void;
+};
+
+export function MovieDetails({ movie, isFavorite,  onToggleFavorite, onClose }: MovieDetailsProps) {
+
+  const { data: credits, isLoading } = useMovieCredits(movie.id);
+
+  return (
+    <div className="details-overlay" onClick={onClose}>
+      <div className="details-card" onClick={(e) => e.stopPropagation()}>
+        <img
+          src={`https://image.tmdb.org/t/p/original${movie.backdrop_path}`}
+          alt={movie.title}
+          className="details-backdrop"
+        />
+
+        <button className="details-close" onClick={onClose}>✕</button>
+
+        <FavoriteButton
+          movie={movie}
+          isFavorite={isFavorite}
+          onToggleFavorite={onToggleFavorite}
+          className="details-favorite"
+        />
+
+        <div className="details-content">
+          <h2>{movie.title}</h2>
+          <p className="details-meta">
+            {movie.release_date} · ★ {movie.vote_average.toFixed(1)}
+          </p>
+
+          <h3>Sammendrag</h3>
+          <p className="details-overview">{movie.overview}</p>
+
+          <h3>Skuespillere</h3>
+          <div className="details-actors">
+            {isLoading && <p className="details-actors-loading">Laster skuespillere...</p>}
+            {credits && (
+              <p>{credits.cast.slice(0, 6).map((actor) => actor.name).join(", ")}</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/MovieList.tsx b/src/components/MovieList.tsx
index fa9e86a..5af9167 100644
--- a/src/components/MovieList.tsx
+++ b/src/components/MovieList.tsx
@@ -11,35 +11,26 @@ type MovieListProps = {
   movies: Movie[];
   isFavorite: (id: number) => boolean;
   onToggleFavorite: (id: number) => void;
+  onSelectMovie: (movie: Movie) => void;
 };
 
-export function MovieList({ movies, isFavorite, onToggleFavorite }: MovieListProps) {
+export function MovieList({ movies, isFavorite, onToggleFavorite, onSelectMovie }: MovieListProps) {
   return (
     // Ytre container for hele filmlisten, kan style'es med CSS senere
     <div className="movie-list">
       {movies.map((movie) => (
         // .map() går gjennom hver film og returnerer én MovieCard per film.
         // key={movie.id} er påkrevd av React for å holde styr på hvert element i lista.
-        <MovieCard
-          key={movie.id}
-          // TMDB sitt feltnavn er "title", som passer direkte med vår prop
-          title={movie.title}
-          // TMDB gir bare en delsti (poster_path), så vi setter sammen full bilde-URL selv.
-          // Noen filmer mangler plakat (poster_path er null), da sender vi tom streng
-          // i stedet for å be om ".../w200null" og få et ødelagt bilde.
-          posterUrl={
-            movie.poster_path
-              ? `https://image.tmdb.org/t/p/w200${movie.poster_path}`
-              : ""
-          }
-          // TMDB sin vote_average går fra 0-10, vi ganger med 10 for å få prosent (0-100)
-          rating={Math.round(movie.vote_average * 10)}
-          // Skuespillere ligger ikke i dette API-svaret (krever eget kall til /credits),
-          // så vi sender en tom liste som placeholder inntil videre
-          movieId={movie.id}
+        <MovieCard 
+          movie={movie}
+          isFavorite={isFavorite(movie.id)} 
+          onToggleFavorite={onToggleFavorite}  
+          onSelectMovie={onSelectMovie}  
+        />
+        /* 
           isFavorite={isFavorite(movie.id)}
           onToggleFavorite={onToggleFavorite}
-        />
+          */
       ))}
     </div>
   );
diff --git a/src/components/sidebar.css b/src/components/Sidebar.css
similarity index 100%
rename from src/components/sidebar.css
rename to src/components/Sidebar.css
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..c78f3c0
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,45 @@
+import { SearchField } from './SearchField';
+import './Sidebar.css';
+
+type SidebarProps = {
+    onSearch?: (query: string) => void;
+    searchValue?: string;
+};
+
+//under kommer seksjonene i midtkolonnen som sidebaren skal kunne hoppe mellom
+const sections = [
+    { id: "populaere", label: "Populære" },
+    { id: "nye-filmer", label: "Nye Filmer" },
+    { id: "skuespillere", label: "Skuespillere" },
+];
+
+export function Sidebar({ onSearch, searchValue }: SidebarProps) {
+    return (
+
+        <aside className="sidebar">
+
+            <SearchField value={searchValue ?? ''} onChange={(v) => onSearch?.(v)} />
+
+            <nav aria-label="Innhold på siden">
+                <ul className="sidebar-nav">
+                    {sections.map((section) => (
+                        <li key={section.id}>
+                            <a
+                                href={`#${section.id}`}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    onSearch?.('');
+                                    setTimeout(() => {
+                                        document.getElementById(section.id)?.scrollIntoView({ behavior: 'smooth' });
+                                    }, 0);
+                                }}
+                            >
+                                {section.label}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+        </aside>
+    );
+}
\ No newline at end of file
diff --git a/src/components/TrendingPreview.css b/src/components/TrendingPreview.css
index 32702d2..0ef0e66 100644
--- a/src/components/TrendingPreview.css
+++ b/src/components/TrendingPreview.css
@@ -1,7 +1,8 @@
 .hero {
   position: relative;
+  /* skal dekke 100% av bredden og ha konstant høyde*/
   width: 100%;
-  height: 30vh; /* adjust to taste, or set a fixed px value */
+  height: 30vh;
   overflow: hidden;
   border-radius: 1rem;
 }
@@ -20,7 +21,7 @@
   color: white;
   margin: 0;
   z-index: 2;
-  cursor: pointer;
+  font-size: clamp(1.5rem, 4vh, 3rem);
 }
 
 .hero-track {
diff --git a/src/components/TrendingPreview.tsx b/src/components/TrendingPreview.tsx
index ae18d56..ef53660 100644
--- a/src/components/TrendingPreview.tsx
+++ b/src/components/TrendingPreview.tsx
@@ -1,12 +1,15 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { Movie } from "../types/tmdb";
 import "./TrendingPreview.css"
 
+const tmdbURL = `https://image.tmdb.org/t/p/original`;
+
 type TrendingPreviewProps = {
   movies : Movie[];
+  onSelectMovie: (movie: Movie) => void;
 };
 
-export function TrendingPreview({ movies }: TrendingPreviewProps) {
+export function TrendingPreview({ movies, onSelectMovie }: TrendingPreviewProps) {
   const [index, setIndex] = useState(0);
   const [offset, setOffset] = useState(0);
   const [transitioning, setTransitioning] = useState(false);
@@ -27,9 +30,13 @@ export function TrendingPreview({ movies }: TrendingPreviewProps) {
     }, 400);
   }
 
-  function openDetails() {
-    return;
-  }
+  useEffect(() => {
+    const timer = setInterval(() => {
+      handleClick(1);
+    }, 5000);
+
+    return () => clearInterval(timer);
+  }, [index, transitioning]);
 
  return (
     <div className="hero">
@@ -41,26 +48,26 @@ export function TrendingPreview({ movies }: TrendingPreviewProps) {
       }}
     >
         <img
-          src={`https://image.tmdb.org/t/p/original${movies[prevIndex].backdrop_path}`}
+          src={`${tmdbURL}${movies[prevIndex].backdrop_path}`}
           className="backdrop"
         />
         <img
-          src={`https://image.tmdb.org/t/p/original${movie.backdrop_path}`}
+          src={`${tmdbURL}${movie.backdrop_path}`}
           className="backdrop"
         />
         <img
-          src={`https://image.tmdb.org/t/p/original${movies[nextIndex].backdrop_path}`}
+          src={`${tmdbURL}${movies[nextIndex].backdrop_path}`}
           className="backdrop"
         />
       </div>
 
-      <h1 className="hero-title" onClick={openDetails}>{movie.title}</h1>
+      <h1 className="hero-title" onClick={() => onSelectMovie(movie)}>{movie.title}</h1>
 
       <div className="hero-zone hero-zone-left" onClick={() => handleClick(-1)}>
         <span className="hero-arrow hero-arrow-left">{"❮"}</span>
       </div>
       
-      <div className="hero-zone hero-zone-middle" onClick={openDetails} />
+      <div className="hero-zone hero-zone-middle" onClick={() => onSelectMovie(movie)} />
 
       <div className="hero-zone hero-zone-right" onClick={() => handleClick(1)}>
         <span className="hero-arrow hero-arrow-right">{"❯"}</span>
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
deleted file mode 100644
index 90b6ca1..0000000
--- a/src/components/sidebar.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import './sidebar.css';
-import { SearchField } from './SearchField';
-
-type SidebarProps = {
-    onSearch?: (query: string) => void;
-    searchValue?: string;
-};
-
-//under kommer seksjonene i midtkolonnen som sidebaren skal kunne hoppe mellom
-const sections = [
-    { id: "populaere", label: "Populære"},
-    { id: "nye-filmer", label: "Nye Filmer"},
-    { id: "skuespillere", label: "Skuespillere"},
-];
-
-export function Sidebar({onSearch, searchValue}: SidebarProps) {
-    return (
-        
-        <aside className="sidebar">
-
-            <SearchField value={searchValue ?? ''} onChange={(v) => onSearch?.(v)} />
-
-            <nav aria-label="Innhold på siden">
-                <ul className="sidebar-nav">
-                    {sections.map((section) =>(
-                        <li key={section.id}>
-            <a
-                href={`#${section.id}`}
-                onClick={(e) => {
-                    e.preventDefault();
-                    onSearch?.('');
-                    setTimeout(() => {
-                    document.getElementById(section.id)?.scrollIntoView({ behavior: 'smooth' });
-                    }, 0);
-            }}
-        >
-    {section.label}
-  </a>
-</li>
-                ))}
-                </ul>
-            </nav>
-        </aside>
-    );
-}
\ No newline at end of file
diff --git a/src/hooks/bak.usePopMovies b/src/hooks/bak.usePopMovies
deleted file mode 100644
index 9fe33f4..0000000
--- a/src/hooks/bak.usePopMovies
+++ /dev/null
@@ -1,10 +0,0 @@
-// hooks/useMovies.ts
-import { useQuery } from '@tanstack/react-query'
-import { fetchPopularMovies } from '../api/tmdb'   
-
-export function usePopMovies() {
-  return useQuery({
-    queryKey: ['movies', 'popular'],
-    queryFn: fetchPopularMovies,
-  })
-}
\ No newline at end of file
diff --git a/src/tmp.txt b/src/tmp.txt
deleted file mode 100644
index 9ca8e8d..0000000
--- a/src/tmp.txt
+++ /dev/null
@@ -1,122 +0,0 @@
-import { useState } from 'react'
-import heroImg from './assets/hero.png'
-import reactLogo from './assets/react.svg'
-import viteLogo from './assets/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
-        <div>
-          <h1>Get started</h1>
-          <p>
-            Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
-          </p>
-        </div>
-        <button
-          type="button"
-          className="counter"
-          onClick={() => setCount((count) => count + 1)}
-        >
-          Count is {count}
-        </button>
-      </section>
-
-      <div className="ticks"></div>
-
-      <section id="next-steps">
-        <div id="docs">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#documentation-icon"></use>
-          </svg>
-          <h2>Documentation</h2>
-          <p>Your questions, answered</p>
-          <ul>
-            <li>
-              <a href="https://vite.dev/" target="_blank">
-                <img className="logo" src={viteLogo} alt="" />
-                Explore Vite
-              </a>
-            </li>
-            <li>
-              <a href="https://react.dev/" target="_blank">
-                <img className="button-icon" src={reactLogo} alt="" />
-                Learn more
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div id="social">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#social-icon"></use>
-          </svg>
-          <h2>Connect with us</h2>
-          <p>Join the Vite community</p>
-          <ul>
-            <li>
-              <a href="https://github.com/vitejs/vite" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#github-icon"></use>
-                </svg>
-                GitHub
-              </a>
-            </li>
-            <li>
-              <a href="https://chat.vite.dev/" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#discord-icon"></use>
-                </svg>
-                Discord
-              </a>
-            </li>
-            <li>
-              <a href="https://x.com/vite_js" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#x-icon"></use>
-                </svg>
-                X.com
-              </a>
-            </li>
-            <li>
-              <a href="https://bsky.app/profile/vite.dev" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#bluesky-icon"></use>
-                </svg>
-                Bluesky
-              </a>
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      <div className="ticks"></div>
-      <section id="spacer"></section>
-    </>
-  )
-}
-
-export default App