+
+ {/* Logo & Brand */}
+
handleNav('home')}
+ >
+
+
Naturvärdarna
+
+
+ {/* Desktop Nav */}
+
+
+
+
+
+
+ {/* Mobile Menu Button */}
+
+
+
+
-
-
-
-
+
+
+ {/* Mobile Nav Dropdown */}
+ {isOpen && (
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+const Home = ({ lang }: { lang: Language }) => {
+ const t = translations[lang];
+
+ return (
+
+ {/* Hero Section */}
+
+
+
+
{t.hero.title}
+
+ {t.hero.subtitle}
+
+
+
+
+ {/* What We Do Section */}
+
+
+
+ {t.whatWeDo.title}
+
+
+
+
+
{t.whatWeDo.cleaningTitle}
+
{t.whatWeDo.cleaningDesc}
+
+
+
+
{t.whatWeDo.guidingTitle}
+
{t.whatWeDo.guidingDesc}
+
+
+
+
{t.whatWeDo.natureTitle}
+
{t.whatWeDo.natureDesc}
+
+
+
+
+ {/* Important Info Section */}
+
+
+
+
+ {t.importantInfo.title}
+
+
+
+
+
+
{t.importantInfo.campingTitle}
+
{t.importantInfo.campingDesc}
+
+
+
+
+
+
{t.importantInfo.parkingTitle}
+
{t.importantInfo.parkingDesc}
+
+
+
+
+
+
{t.importantInfo.fireTitle}
+
{t.importantInfo.fireDesc}
+
+
+
-
-);
+ );
+};
-const Home = () => (
-
- {/* Hero-sektion */}
-
-
-
-
Vi värnar om Kullaberg
-
- Vi är sommarjobbarna som håller naturreservatet rent, säkert och vackert under årets mest hektiska veckor.
-
-
-
+const About = ({ lang }: { lang: Language }) => {
+ const t = translations[lang].about;
- {/* Info-sektion */}
-
-
Vad gör vi?
-
-
-
Håller rent
-
Vi städar rastplatser, vandringsleder och stränder för att skydda djurlivet och naturen.
+ return (
+
+
+
+
{t.title}
+
+
{t.p1}
+
{t.p2}
+
{t.p3}
+
-
-
Guidar besökare
-
Vi hjälper turister att hitta rätt och informerar om reservatets unika regler och miljö.
-
-
-
Skyddar miljön
-
Genom vår närvaro ser vi till att naturen på Kullaberg bevaras för framtida generationer.
+
+
-
-);
+ );
+};
-const About = () => (
-
-
Om Naturvärdarna
-
-
-
- Vi är ett gäng engagerade ungdomar som fått det ärofyllda uppdraget att arbeta som Naturvärdar på vackra Kullaberg under sommarmånaderna.
-
-
- 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.
-
-
- Kullaberg är en fantastisk plats, och vi är otroligt stolta över att få hjälpa till att hålla reservatet i toppskick!
-
+const Footer = ({ lang }: { lang: Language }) => (
+
-);
-
-const Contact = () => (
-
-
Kontakta oss
-
-
- 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!
-
-
-
-
-);
-
-const Footer = () => (
-
);
-// --- HUVUDKOMPONENT ---
+// --- MAIN COMPONENT ---
export default function App() {
const [activeTab, setActiveTab] = useState
('home');
+ const [lang, setLang] = useState('sv');
const renderContent = () => {
switch (activeTab) {
- case 'home': return ;
- case 'about': return ;
- case 'contact': return ;
- default: return ;
+ case 'home': return ;
+ case 'about': return ;
+ default: return ;
}
};
return (
-
-
-
+
+
+
{renderContent()}
-
+
);
}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 570c5cc..5a9b045 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,11 +3,15 @@
@import "tailwindcss";
@theme {
- --color-nature-light: #ecfdf5;
- --color-nature: #10b981;
- --color-nature-dark: #064e3b;
+ --color-ebony: #5e6545;
+ --color-moss: #878b5a;
+ --color-eggshell: #e7e4cf;
+ --color-gold: #d6b456;
+ --color-goldenrod: #c48d2e;
+ --color-slate-teal: #456466;
+ --color-seafoam: #5B8C8A;
}
body {
- background-color: #f5f5f4; /* Mjuk jordnära stenfärg */
+ background-color: var(--color-eggshell);
}
\ No newline at end of file