Industries

src/app/(main)/(marketing)/MarketingLayout.tsx

@@ -6,10 +6,11 @@ import { usePathname } from 'next/navigation';
 import { Button } from '@/components/ui/Button';
 import { Footer } from '@/components/ui/Footer';
 import en from '@/i18n/en.json';
-import { ChevronDown, Wifi, Contact, MessageCircle, QrCode, Link2, Type, Mail, MessageSquare, Phone, Calendar, MapPin, Facebook, Instagram, Twitter, Youtube, Music, Bitcoin, CreditCard, Video, Users, Barcode as BarcodeIcon } from 'lucide-react';
+import { ChevronDown, BookOpen, Building2, Wifi, Contact, MessageCircle, QrCode, Link2, Type, Mail, MessageSquare, Phone, Calendar, MapPin, Facebook, Instagram, Twitter, Youtube, Music, Bitcoin, CreditCard, Video, Users, Barcode as BarcodeIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { AnimatePresence, motion } from 'framer-motion';
 import { allUseCases } from '@/lib/growth-pages';
+import { industryPages } from '@/lib/industry-pages';
 
 export default function MarketingLayout({
   children,
@@ -19,7 +20,9 @@ export default function MarketingLayout({
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
   const [toolsOpen, setToolsOpen] = useState(false);
+  const [resourcesOpen, setResourcesOpen] = useState(false);
   const [mobileToolsOpen, setMobileToolsOpen] = useState(false);
+  const [mobileResourcesOpen, setMobileResourcesOpen] = useState(false);
   const pathname = usePathname();
 
   useEffect(() => {
@@ -35,7 +38,9 @@ export default function MarketingLayout({
   useEffect(() => {
     setMobileMenuOpen(false);
     setToolsOpen(false);
+    setResourcesOpen(false);
     setMobileToolsOpen(false);
+    setMobileResourcesOpen(false);
   }, [pathname]);
 
   // Default to English for general marketing pages
@@ -64,6 +69,13 @@ export default function MarketingLayout({
     { name: 'Barcode', description: 'Generate barcodes', href: '/tools/barcode-generator', icon: BarcodeIcon, color: 'text-slate-800', bgColor: 'bg-slate-100' },
   ];
 
+  const resources = [
+    { name: t.nav.blog, description: 'Insights and tutorials', href: '/blog', icon: MessageSquare, color: 'text-indigo-500', bgColor: 'bg-indigo-50' },
+    { name: 'Use Cases', description: 'Industry inspiration', href: '/use-cases', icon: Users, color: 'text-blue-500', bgColor: 'bg-blue-50' },
+    { name: t.nav.learn, description: 'Knowledge center', href: '/learn', icon: BookOpen, color: 'text-amber-500', bgColor: 'bg-amber-50' },
+    { name: t.nav.all_industries, description: 'Industry solutions', href: '/qr-code-for', icon: Building2, color: 'text-emerald-500', bgColor: 'bg-emerald-50' },
+  ];
+
   return (
     <div className="min-h-screen bg-white">
       {/* Server-rendered navigation links for SEO (crawlers) - Placed first for priority */}
@@ -92,6 +104,10 @@ export default function MarketingLayout({
             {allUseCases.map((uc) => (
               <li key={uc.slug}><a href={uc.href}>{uc.title}</a></li>
             ))}
+            {/* Industry pages */}
+            {industryPages.map((ind) => (
+              <li key={ind.slug}><a href={`/qr-code-for/${ind.slug}`}>{ind.title}</a></li>
+            ))}
             {/* Tools */}
             <li><a href="/tools/url-qr-code">URL QR Code</a></li>
             <li><a href="/tools/text-qr-code">Text QR Code</a></li>
@@ -135,6 +151,48 @@ export default function MarketingLayout({
           {/* Desktop Navigation */}
           <div className="hidden md:flex items-center space-x-1">
 
+            {/* Resources Dropdown */}
+            <div
+              className="relative group px-3 py-2"
+              onMouseEnter={() => setResourcesOpen(true)}
+              onMouseLeave={() => setResourcesOpen(false)}
+            >
+              <button className="flex items-center space-x-1 text-sm font-medium text-slate-600 group-hover:text-slate-900 transition-colors">
+                <span>{t.nav.resources}</span>
+                <ChevronDown className={cn("w-4 h-4 transition-transform duration-200", resourcesOpen && "rotate-180")} />
+              </button>
+
+              <AnimatePresence>
+                {resourcesOpen && (
+                  <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: 10 }}
+                    transition={{ duration: 0.15 }}
+                    className="absolute left-1/2 -translate-x-1/2 top-full mt-2 w-72 bg-white rounded-2xl shadow-lg border border-slate-100 p-2 overflow-hidden"
+                  >
+                    <div className="flex flex-col">
+                      {resources.map((item) => (
+                        <Link
+                          key={item.name}
+                          href={item.href}
+                          className="flex items-center space-x-3 p-3 rounded-xl transition-colors hover:bg-slate-50"
+                        >
+                          <div className={cn("p-2 rounded-lg shrink-0", item.bgColor, item.color)}>
+                            <item.icon className="w-4 h-4" />
+                          </div>
+                          <div>
+                            <div className="text-sm font-semibold text-slate-900">{item.name}</div>
+                            <p className="text-xs text-slate-500 leading-snug">{item.description}</p>
+                          </div>
+                        </Link>
+                      ))}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+
             {/* Tools Dropdown */}
             <div
               className="relative group px-3 py-2"
@@ -189,15 +247,6 @@ export default function MarketingLayout({
             <Link href="/about" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
               {t.nav.about}
             </Link>
-            <Link href="/blog" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
-              {t.nav.blog}
-            </Link>
-            <Link href="/use-cases" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
-              Use Cases
-            </Link>
-            <Link href="/learn" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
-              {t.nav.learn}
-            </Link>
             <Link href="/#faq" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
               {t.nav.faq}
             </Link>
@@ -244,6 +293,40 @@ export default function MarketingLayout({
               className="md:hidden bg-white border-b border-slate-100 overflow-hidden"
             >
               <div className="container mx-auto px-4 py-6 space-y-2">
+                {/* Resources Accordion */}
+                <button
+                  onClick={() => setMobileResourcesOpen(!mobileResourcesOpen)}
+                  className="flex items-center justify-between w-full px-4 py-3 rounded-xl hover:bg-slate-50 text-slate-700 font-semibold"
+                >
+                  <span>{t.nav.resources}</span>
+                  <ChevronDown className={cn("w-5 h-5 transition-transform", mobileResourcesOpen && "rotate-180")} />
+                </button>
+
+                <AnimatePresence>
+                  {mobileResourcesOpen && (
+                    <motion.div
+                      initial={{ opacity: 0, height: 0 }}
+                      animate={{ opacity: 1, height: 'auto' }}
+                      exit={{ opacity: 0, height: 0 }}
+                      className="overflow-hidden"
+                    >
+                      <div className="pl-4 space-y-1 border-l-2 border-slate-100 ml-4">
+                        {resources.map((item) => (
+                          <Link
+                            key={item.name}
+                            href={item.href}
+                            className="flex items-center gap-3 px-4 py-2.5 rounded-lg hover:bg-slate-50 text-slate-600 text-sm"
+                            onClick={() => { setMobileMenuOpen(false); setMobileResourcesOpen(false); }}
+                          >
+                            <item.icon className={cn("w-4 h-4", item.color)} />
+                            {item.name}
+                          </Link>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+
                 {/* Free Tools Accordion */}
                 <button
                   onClick={() => setMobileToolsOpen(!mobileToolsOpen)}
@@ -283,9 +366,6 @@ export default function MarketingLayout({
                 <Link href="/#features" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.features}</Link>
                 <Link href="/#pricing" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.pricing}</Link>
                 <Link href="/about" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.about}</Link>
-                <Link href="/blog" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.blog}</Link>
-                <Link href="/use-cases" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>Use Cases</Link>
-                <Link href="/learn" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.learn}</Link>
                 <Link href="/#faq" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.faq}</Link>
 
                 <div className="grid grid-cols-2 gap-4 pt-4">