Changes

src/components/Header.tsx

@@ -0,0 +1,24 @@
+import Logo from "./Logo";
+
+const Header = () => {
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
+      <div className="max-w-6xl mx-auto px-6 py-3 flex items-center justify-between">
+        <a href="/" className="flex items-center">
+          <Logo size="small" />
+        </a>
+        
+        <nav className="hidden md:flex items-center gap-8 text-sm">
+          <a href="#gallery" className="text-muted-foreground hover:text-primary transition-colors">
+            Sortiment
+          </a>
+          <a href="#plans" className="text-muted-foreground hover:text-primary transition-colors">
+            Prenumeration
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/HeroSection.tsx

@@ -1,48 +1,43 @@
+import Logo from "./Logo";
+
 const HeroSection = () => {
   return (
-    <section className="hero-gradient min-h-screen flex flex-col justify-center items-center text-center px-6 py-20 relative">
+    <section className="hero-gradient min-h-screen flex flex-col justify-center items-center text-center px-6 py-20 pt-32 relative">
       {/* Decorative top border */}
       <div className="absolute top-0 left-0 right-0 h-2 bg-primary/20" />
       
       <div className="animate-fade-up max-w-4xl">
-        {/* Ornamental divider */}
-        <div className="divider-ornament mb-8">
-          <span className="ornament">✦</span>
+        {/* Logo */}
+        <div className="mb-8">
+          <Logo size="large" />
         </div>
 
-        <p className="text-primary uppercase tracking-[0.4em] text-sm font-semibold mb-4">
-          Sedan 1974
-        </p>
-
-        <h1 className="font-display text-5xl md:text-7xl font-semibold mb-4 leading-tight text-foreground italic">
-          Lennart Svenssons
-        </h1>
-        
-        <p className="font-display text-3xl md:text-4xl mb-2 text-primary font-medium">
-          Konditorivaror
+        <p className="text-muted-foreground italic text-lg mb-8">
+          Svenskt konditorhantverk sedan 1953
         </p>
 
         <div className="divider-ornament my-8">
           <span className="ornament">❧</span>
         </div>
 
-        <h2 className="font-display text-2xl md:text-3xl font-medium mb-6 text-foreground">
-          Kakabonnemang för företag
-        </h2>
-
-        <p className="max-w-xl mx-auto text-muted-foreground text-lg mb-12 leading-relaxed">
-          Genuina konditorikakor bakade med tradition och omsorg, 
-          levererade direkt till ert kontor. 
-          <br />
-          <em>Smaken av äkta svenskt hantverk.</em>
+        <p className="max-w-xl mx-auto text-foreground text-xl mb-8 leading-relaxed italic">
+          "Äkta fika levererat till ditt företag — prenumeration eller engångsorder"
         </p>
 
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
           <a
             href="#plans"
             className="btn-classic inline-block px-10 py-4 text-lg rounded-sm"
           >
-          Starta ert abonnemang
+            Starta Prenumeration
           </a>
+          <a
+            href="#gallery"
+            className="inline-block px-10 py-4 text-lg rounded-sm border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
+          >
+            Se Produkter
+          </a>
+        </div>
       </div>
 
       {/* Bottom ornament */}

src/components/Logo.tsx

@@ -0,0 +1,34 @@
+const Logo = ({ className = "", size = "default" }: { className?: string; size?: "small" | "default" | "large" }) => {
+  const sizeClasses = {
+    small: "w-16 h-12",
+    default: "w-24 h-18",
+    large: "w-48 h-36"
+  };
+
+  return (
+    <div className={`inline-flex items-center justify-center ${sizeClasses[size]} ${className}`}>
+      <svg viewBox="0 0 200 150" className="w-full h-full" fill="none" xmlns="http://www.w3.org/2000/svg">
+        {/* Outer oval border */}
+        <ellipse cx="100" cy="75" rx="95" ry="70" stroke="currentColor" strokeWidth="2" className="text-primary" fill="none" />
+        {/* Inner oval border */}
+        <ellipse cx="100" cy="75" rx="85" ry="62" stroke="currentColor" strokeWidth="1" className="text-primary" fill="none" />
+        
+        {/* Text */}
+        <text x="100" y="35" textAnchor="middle" className="fill-primary" style={{ fontSize: '10px', fontFamily: 'serif', letterSpacing: '0.2em' }}>
+          AKTIEBOLAGET
+        </text>
+        <text x="100" y="60" textAnchor="middle" className="fill-primary" style={{ fontSize: '22px', fontFamily: 'serif', fontWeight: '600', letterSpacing: '0.1em' }}>
+          LENNART
+        </text>
+        <text x="100" y="85" textAnchor="middle" className="fill-primary" style={{ fontSize: '22px', fontFamily: 'serif', fontWeight: '600', letterSpacing: '0.1em' }}>
+          SVENSSON
+        </text>
+        <text x="100" y="110" textAnchor="middle" className="fill-primary" style={{ fontSize: '10px', fontFamily: 'serif', letterSpacing: '0.25em' }}>
+          KONDITORIVAROR
+        </text>
+      </svg>
+    </div>
+  );
+};
+
+export default Logo;

src/pages/Index.tsx

@@ -1,3 +1,4 @@
+import Header from "@/components/Header";
 import HeroSection from "@/components/HeroSection";
 import GallerySection from "@/components/GallerySection";
 import PlansSection from "@/components/PlansSection";
@@ -6,6 +7,7 @@ import Footer from "@/components/Footer";
 const Index = () => {
   return (
     <div className="bg-background text-foreground min-h-screen">
+      <Header />
       <HeroSection />
       <GallerySection />
       <PlansSection />