Update src/app/page.tsx

src/app/page.tsx

@@ -9,9 +9,47 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import { Star, ThumbsUp, Users, Clock, Phone, Heart } from "lucide-react";
+import { Star, ThumbsUp, Users, Clock, Phone, Heart, AlertCircle, Leaf } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({
+    allergens: 'none',
+    diet: 'regular'
+  });
+
+  const allergenOptions = [
+    { id: 'none', label: 'Fără alergeni selectați' },
+    { id: 'gluten', label: '🌾 Gluten' },
+    { id: 'dairy', label: '🥛 Lactate' },
+    { id: 'nuts', label: '🥜 Nuci' },
+    { id: 'shellfish', label: '🦐 Fructe de mare' },
+    { id: 'soy', label: '🫘 Soia' },
+    { id: 'sesame', label: '🌱 Susam' }
+  ];
+
+  const dietOptions = [
+    { id: 'regular', label: 'Regular' },
+    { id: 'vegetarian', label: '🥬 Vegetarian' },
+    { id: 'vegan', label: '🌱 Vegan' },
+    { id: 'keto', label: '🥩 Keto' },
+    { id: 'lowcarb', label: '📊 Low Carb' }
+  ];
+
+  const handleAllergenChange = (allergen: string) => {
+    setSelectedOptions(prev => ({
+      ...prev,
+      allergens: allergen
+    }));
+  };
+
+  const handleDietChange = (diet: string) => {
+    setSelectedOptions(prev => ({
+      ...prev,
+      diet: diet
+    }));
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -39,13 +77,13 @@ export default function LandingPage() {
 
       <div id="hero" data-section="hero">
         <HeroSplit
-          title="Mâncare proaspătă și delicioasă în inima Baia Marei"
+          title="Mâncare proaspătă și delicioasă în Baia Mare"
           description="Bucură-te de preparate gustoase, deserturi apreciate și mâncare de calitate la pachet. Restaurant de familie cu ingrediente proaspete și atmosferă prietenoasă."
           background={{ variant: "glowing-orb" }}
           tag="Criss Food"
           tagIcon={undefined}
           tagAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/flat-lay-mexican-food_23-2148140234.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/tasty-fresh-appetizing-italian-food-ingredients-dark-background_1220-1745.jpg?id=1301437"
           imageAlt="Preparate delicioase din restaurantul Criss Food"
           imagePosition="right"
           mediaAnimation="slide-up"
@@ -57,6 +95,82 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="options" data-section="options" className="py-16 px-4 md:px-8 bg-card rounded-lg my-8 mx-4 md:mx-auto max-w-4xl">
+        <div className="space-y-8">
+          <div className="text-center">
+            <h2 className="text-2xl md:text-3xl font-semibold mb-2 flex items-center justify-center gap-2">
+              <AlertCircle className="w-6 h-6" />
+              Alergeni și Preferințe Dietetice
+            </h2>
+            <p className="text-foreground/70">Selectează opțiunile tale pentru a ne ajuta să găsim meniuri potrivite pentru tine</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {/* Allergens Section */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold flex items-center gap-2">
+                <AlertCircle className="w-5 h-5" />
+                Alergeni
+              </h3>
+              <div className="space-y-2">
+                {allergenOptions.map((option) => (
+                  <label key={option.id} className="flex items-center gap-3 p-3 rounded-lg hover:bg-background/50 cursor-pointer transition">
+                    <input
+                      type="radio"
+                      name="allergens"
+                      value={option.id}
+                      checked={selectedOptions.allergens === option.id}
+                      onChange={() => handleAllergenChange(option.id)}
+                      className="w-4 h-4 cursor-pointer"
+                    />
+                    <span className="text-foreground">{option.label}</span>
+                  </label>
+                ))}
+              </div>
+              {selectedOptions.allergens !== 'none' && (
+                <div className="p-3 bg-accent/10 rounded-lg border border-accent/20 text-sm text-foreground">
+                  <strong>Atenție:</strong> Te vom înștiința când se prepară mâncare pentru alergenia selectată.
+                </div>
+              )}
+            </div>
+
+            {/* Diet Preferences Section */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold flex items-center gap-2">
+                <Leaf className="w-5 h-5" />
+                Preferințe Dietetice
+              </h3>
+              <div className="space-y-2">
+                {dietOptions.map((option) => (
+                  <label key={option.id} className="flex items-center gap-3 p-3 rounded-lg hover:bg-background/50 cursor-pointer transition">
+                    <input
+                      type="radio"
+                      name="diet"
+                      value={option.id}
+                      checked={selectedOptions.diet === option.id}
+                      onChange={() => handleDietChange(option.id)}
+                      className="w-4 h-4 cursor-pointer"
+                    />
+                    <span className="text-foreground">{option.label}</span>
+                  </label>
+                ))}
+              </div>
+              {selectedOptions.diet !== 'regular' && (
+                <div className="p-3 bg-accent/10 rounded-lg border border-accent/20 text-sm text-foreground">
+                  <strong>Perfect!</strong> Avem preparate speciale {dietOptions.find(d => d.id === selectedOptions.diet)?.label?.toLowerCase()}.
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="bg-background/50 p-4 rounded-lg">
+            <p className="text-sm text-foreground/70">
+              <strong>Selecții curente:</strong> Alergeni: <span className="font-semibold">{allergenOptions.find(a => a.id === selectedOptions.allergens)?.label}</span> • Dieta: <span className="font-semibold">{dietOptions.find(d => d.id === selectedOptions.diet)?.label}</span>
+            </p>
+          </div>
+        </div>
+      </div>
+
       <div id="popular-dishes" data-section="popular-dishes">
         <ProductCardTwo
           title="Preparatele Noastre Populare"