Initial commit
This commit is contained in:
+167
@@ -0,0 +1,167 @@
|
||||
// src/App.tsx
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
// --- TYPER ---
|
||||
// Detta säkerställer att vi bara kan skicka in dessa exakta strängar
|
||||
type Tab = 'home' | 'about' | 'contact';
|
||||
|
||||
interface NavbarProps {
|
||||
activeTab: Tab;
|
||||
setActiveTab: (tab: Tab) => void;
|
||||
}
|
||||
|
||||
// --- KOMPONENTER ---
|
||||
|
||||
const Navbar = ({ activeTab, setActiveTab }: NavbarProps) => (
|
||||
<nav className="bg-nature-dark text-white shadow-lg sticky top-0 z-50">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="flex justify-between items-center py-4">
|
||||
<div
|
||||
className="text-2xl font-bold cursor-pointer"
|
||||
onClick={() => setActiveTab('home')}
|
||||
>
|
||||
🌲 Naturvärdarna
|
||||
</div>
|
||||
<div className="space-x-6 hidden md:flex">
|
||||
<button
|
||||
onClick={() => setActiveTab('home')}
|
||||
className={`hover:text-nature-light cursor-pointer ${activeTab === 'home' ? 'border-b-2 border-white' : ''}`}
|
||||
>
|
||||
Hem
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('about')}
|
||||
className={`hover:text-nature-light cursor-pointer ${activeTab === 'about' ? 'border-b-2 border-white' : ''}`}
|
||||
>
|
||||
Om oss
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('contact')}
|
||||
className={`hover:text-nature-light cursor-pointer ${activeTab === 'contact' ? 'border-b-2 border-white' : ''}`}
|
||||
>
|
||||
Kontakt
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
||||
const Home = () => (
|
||||
<div className="animate-fade-in">
|
||||
{/* Hero-sektion */}
|
||||
<div
|
||||
className="h-96 bg-cover bg-center flex items-center justify-center relative"
|
||||
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1473448912268-2022ce9509d8?auto=format&fit=crop&q=80&w=2000')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/40"></div>
|
||||
<div className="relative z-10 text-center text-white px-4">
|
||||
<h1 className="text-5xl font-bold mb-4 drop-shadow-md">Vi värnar om Kullaberg</h1>
|
||||
<p className="text-xl max-w-2xl mx-auto drop-shadow-md">
|
||||
Vi är sommarjobbarna som håller naturreservatet rent, säkert och vackert under årets mest hektiska veckor.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info-sektion */}
|
||||
<div className="max-w-6xl mx-auto py-16 px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-nature-dark mb-8">Vad gör vi?</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="bg-white p-6 rounded-lg shadow-md border-t-4 border-nature">
|
||||
<h3 className="text-xl font-bold text-nature-dark mb-2">Håller rent</h3>
|
||||
<p className="text-gray-600">Vi städar rastplatser, vandringsleder och stränder för att skydda djurlivet och naturen.</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-lg shadow-md border-t-4 border-nature">
|
||||
<h3 className="text-xl font-bold text-nature-dark mb-2">Guidar besökare</h3>
|
||||
<p className="text-gray-600">Vi hjälper turister att hitta rätt och informerar om reservatets unika regler och miljö.</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-lg shadow-md border-t-4 border-nature">
|
||||
<h3 className="text-xl font-bold text-nature-dark mb-2">Skyddar miljön</h3>
|
||||
<p className="text-gray-600">Genom vår närvaro ser vi till att naturen på Kullaberg bevaras för framtida generationer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const About = () => (
|
||||
<div className="max-w-4xl mx-auto py-16 px-4 animate-fade-in">
|
||||
<h1 className="text-4xl font-bold text-nature-dark mb-6 border-b-2 border-nature pb-2">Om Naturvärdarna</h1>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1551632811-561732d1e306?auto=format&fit=crop&q=80&w=1000"
|
||||
alt="Ungdomar som arbetar i naturen"
|
||||
className="w-full h-80 object-cover rounded-xl shadow-lg mb-8"
|
||||
/>
|
||||
<div className="prose prose-lg text-gray-700 max-w-none">
|
||||
<p className="mb-4">
|
||||
Vi är ett gäng engagerade ungdomar som fått det ärofyllda uppdraget att arbeta som Naturvärdar på vackra Kullaberg under sommarmånaderna.
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
När trycket från turister och besökare är som allra störst, är det vi som rycker ut. Våra dagar består av allt från att plocka skräp och underhålla eldstäder, till att svara på frågor från nyfikna vandrare och se till att allemansrätten respekteras.
|
||||
</p>
|
||||
<p>
|
||||
Kullaberg är en fantastisk plats, och vi är otroligt stolta över att få hjälpa till att hålla reservatet i toppskick!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Contact = () => (
|
||||
<div className="max-w-4xl mx-auto py-16 px-4 animate-fade-in">
|
||||
<h1 className="text-4xl font-bold text-nature-dark mb-6 border-b-2 border-nature pb-2">Kontakta oss</h1>
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<p className="text-gray-600 mb-6 text-lg">
|
||||
Har du sett något i reservatet som behöver åtgärdas, eller vill du bara säga hej? Tveka inte att höra av dig!
|
||||
</p>
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Namn</label>
|
||||
<input type="text" className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-nature focus:border-nature outline-none transition-all" placeholder="Ditt namn" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">E-post</label>
|
||||
<input type="email" className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-nature focus:border-nature outline-none transition-all" placeholder="din@epost.se" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Meddelande</label>
|
||||
<textarea rows={4} className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-nature focus:border-nature outline-none transition-all" placeholder="Vad har du på hjärtat?"></textarea>
|
||||
</div>
|
||||
<button type="button" className="bg-nature-dark hover:bg-nature text-white font-bold py-2 px-6 rounded transition-colors duration-300 cursor-pointer">
|
||||
Skicka meddelande
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Footer = () => (
|
||||
<footer className="bg-stone-800 text-stone-300 py-8 text-center mt-auto">
|
||||
<p>© {new Date().getFullYear()} Naturvärdarna Kullaberg. Ta hand om naturen!</p>
|
||||
</footer>
|
||||
);
|
||||
|
||||
// --- HUVUDKOMPONENT ---
|
||||
|
||||
export default function App() {
|
||||
const [activeTab, setActiveTab] = useState<Tab>('home');
|
||||
|
||||
const renderContent = () => {
|
||||
switch (activeTab) {
|
||||
case 'home': return <Home />;
|
||||
case 'about': return <About />;
|
||||
case 'contact': return <Contact />;
|
||||
default: return <Home />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col font-sans">
|
||||
<Navbar activeTab={activeTab} setActiveTab={setActiveTab} />
|
||||
<main className="flex-grow">
|
||||
{renderContent()}
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/* src/index.css */
|
||||
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-nature-light: #ecfdf5;
|
||||
--color-nature: #10b981;
|
||||
--color-nature-dark: #064e3b;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f5f5f4; /* Mjuk jordnära stenfärg */
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
// src/main.tsx
|
||||
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
Reference in New Issue
Block a user