102 lines
5.3 KiB
JavaScript
102 lines
5.3 KiB
JavaScript
const fs = require('fs');
|
|
let code = fs.readFileSync('src/app/(main)/(marketing)/MarketingLayout.tsx', 'utf8');
|
|
|
|
if (!code.includes("import { allUseCases }")) {
|
|
code = code.replace("import en from '@/i18n/en.json';", "import en from '@/i18n/en.json';\nimport { allUseCases } from '@/lib/growth-pages';\nimport { LayoutGrid } from 'lucide-react';");
|
|
}
|
|
|
|
if (!code.includes("const [useCasesOpen")) {
|
|
code = code.replace("const [toolsOpen, setToolsOpen] = useState(false);", "const [toolsOpen, setToolsOpen] = useState(false);\n const [useCasesOpen, setUseCasesOpen] = useState(false);");
|
|
code = code.replace("const [mobileToolsOpen, setMobileToolsOpen] = useState(false);", "const [mobileToolsOpen, setMobileToolsOpen] = useState(false);\n const [mobileUseCasesOpen, setMobileUseCasesOpen] = useState(false);");
|
|
code = code.replace("setToolsOpen(false);", "setToolsOpen(false);\n setUseCasesOpen(false);");
|
|
code = code.replace("setMobileToolsOpen(false);", "setMobileToolsOpen(false);\n setMobileUseCasesOpen(false);");
|
|
}
|
|
|
|
const useCasesDropdown = ` {/* Use Cases Dropdown */}
|
|
<div
|
|
className="relative group px-3 py-2"
|
|
onMouseEnter={() => setUseCasesOpen(true)}
|
|
onMouseLeave={() => setUseCasesOpen(false)}
|
|
>
|
|
<button className="flex items-center space-x-1 text-sm font-medium text-slate-600 group-hover:text-slate-900 transition-colors">
|
|
<span>Use Cases</span>
|
|
<ChevronDown className={cn("w-4 h-4 transition-transform duration-200", useCasesOpen && "rotate-180")} />
|
|
</button>
|
|
|
|
<AnimatePresence>
|
|
{useCasesOpen && (
|
|
<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-[700px] bg-white rounded-2xl shadow-lg border border-slate-100 p-4 overflow-hidden"
|
|
>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{allUseCases.map((uc) => (
|
|
<Link
|
|
key={uc.slug}
|
|
href={uc.href}
|
|
className="flex items-center space-x-3 p-2.5 rounded-xl transition-colors hover:bg-slate-50"
|
|
>
|
|
<div className="p-2 rounded-lg shrink-0 bg-indigo-50 text-indigo-500">
|
|
<LayoutGrid className="w-4 h-4" />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-semibold text-slate-900">{uc.title}</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="mt-3 pt-3 border-t border-slate-100 -mx-4 -mb-4 px-4 py-3 text-center bg-slate-50/50">
|
|
<Link href="/use-cases" className="text-xs text-indigo-600 font-medium hover:underline">View All Use Cases →</Link>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>`;
|
|
|
|
if (!code.includes("<span>Use Cases</span>")) {
|
|
code = code.replace("{/* Tools Dropdown */}", useCasesDropdown + "\n\n {/* Tools Dropdown */}");
|
|
}
|
|
|
|
const mobileUseCasesAccordion = ` {/* Use Cases Accordion */}
|
|
<button
|
|
onClick={() => setMobileUseCasesOpen(!mobileUseCasesOpen)}
|
|
className="flex items-center justify-between w-full px-4 py-3 rounded-xl hover:bg-slate-50 text-slate-700 font-semibold"
|
|
>
|
|
<span>Use Cases</span>
|
|
<ChevronDown className={cn("w-5 h-5 transition-transform", mobileUseCasesOpen && "rotate-180")} />
|
|
</button>
|
|
|
|
<AnimatePresence>
|
|
{mobileUseCasesOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: 'auto' }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
className="overflow-hidden"
|
|
>
|
|
<div className="max-h-[50vh] overflow-y-auto pl-4 space-y-1 border-l-2 border-slate-100 ml-4">
|
|
{allUseCases.map((uc) => (
|
|
<Link
|
|
key={uc.slug}
|
|
href={uc.href}
|
|
className="block px-4 py-2.5 rounded-lg hover:bg-slate-50 text-slate-600 text-sm"
|
|
onClick={() => { setMobileMenuOpen(false); setMobileUseCasesOpen(false); }}
|
|
>
|
|
{uc.title}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>`;
|
|
|
|
if (!code.includes("{/* Use Cases Accordion */}")) {
|
|
code = code.replace("{/* Free Tools Accordion */}", mobileUseCasesAccordion + "\n\n {/* Free Tools Accordion */}");
|
|
}
|
|
|
|
fs.writeFileSync('src/app/(main)/(marketing)/MarketingLayout.tsx', code);
|
|
console.log("Updated MarketingLayout.tsx");
|