import React, { useState } from ‘react’;
import{
ArrowRight,
Share2,
Video,
Package,
Store,
Layers,
TrendingUp,
AlertCircle
} from ‘lucide-react’;
const App = () => {
const[activeTab, setActiveTab]= useState(0);
const tips =[
{
id: 0,
title: “Cross-Listing”,
icon: <Share2 className=”w-6 h-6″ />,
color: “bg-blue-500”,
content: “Don’t limit yourself to one audience. Use software to list items on Poshmark, eBay, and Mercari simultaneously.”,
proTip: “eBay opens up international shipping, significantly increasing your buyer pool.”,
details: [
“Reach multiple demographics”,
“Use management tools (like Vendu)”,
“Automate de-listing when items sell”
]
},
{
id: 1,
title: “Live Selling”,
icon: <Video className=”w-6 h-6″ />,
color: “bg-purple-500”,
content: “If you’re extroverted, live shows on Poshmark or Whatnot are the fastest way to clear volume in real-time.”,
proTip: “Great for clearing items that aren’t worth the time/space of a permanent listing.”,
details: [
“Immediate engagement”,
“Auction-style fast movement”,
“Clears stale inventory in bulk”
]
},
{
id: 2,
title: “Mystery Boxes”,
icon: <Package className=”w-6 h-6″ />,
color: “bg-orange-500”,
content: “Sell ‘Not-So-Mystery’ boxes. List the brands and sizes included so resellers know exactly what they’re getting.”,
proTip: “Price these for a ‘fast recoup’ rather than high profit to reset your inventory.”,
details: [
“Detail brands and tags (NWT)”,
“Target other resellers”,
“Offset losses with higher profit items”
]
},
{
id: 3,
title: “Consignment”,
icon: <Store className=”w-6 h-6″ />,
color: “bg-green-500”,
content: “Take items to local stores or use online sites like ThredUp and The RealReal to offload the work.”,
proTip: “Consignment gives you a ‘smaller piece of the pie’ but requires zero effort once dropped off.”,
details: [
“Local: Buffalo Exchange, Plato’s Closet”,
“Online: ThredUp (Clean Out Kits)”,
“Best for items you just want gone”
]
},
{
id: 4,
title: “Bundled Listings”,
icon: <Layers className=”w-6 h-6″ />,
color: “bg-pink-500”,
content: “Group similar items (e.g., 3 athletic tops in Size M) into a single listing to save the buyer on shipping.”,
proTip: “This targets consumers, not just resellers, by making the shipping cost worth it.”,
details: [
“Group by size and style”,
“Higher average order value”,
“Reduces shipping friction for buyers”
]
}
];
return(
<div className=”min-h-screen bg-slate-50 p-4 md:p-8 font-sans text-slate-900″>
<div className=”max-w-4xl mx-auto bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-100″>
{/* Header */}
<div className=”bg-slate-900 p-8 text-white text-center relative overflow-hidden”>
<div className=”absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none”>
<div className=”grid grid-cols-6 gap-4″>
{[…Array(24)].map((_, i)=><Package key={i} className=”w-12 h-12″ />)}
</div>
</div>
<h1 className=”text-3xl md:text-4xl font-black mb-2 relative z-10″>THELIQUIDATIONFAST-TRACK</h1>
<p className=”text-slate-400 font-medium relative z-10 uppercase tracking-widest text-sm”>How to ResellPalletsFast&RecoupInvestment</p>
</div>
{/* Main Dashboard */}
<div className=”flex flex-col md:flex-row”>
{/* Sidebar Nav */}
<div className=”md:w-1/3 bg-slate-50 p-4 space-y-2 border-r border-slate-100″>
{tips.map((tip)=>(
<button
key={tip.id}
onClick={() => setActiveTab(tip.id)}
className={`w-full flex items-center space-x-3 p-4 rounded-xl transition-all duration-200 ${
activeTab === tip.id
?’bg-white shadow-md text-slate-900 scale-105′
:’text-slate-500 hover:bg-slate-200′
}`}
>
<div className={`p-2 rounded-lg text-white ${tip.color}`}>
{tip.icon}
</div>
<span className=”font-bold text-sm md:text-base”>{tip.title}</span>
</button>
))}
</div>
{/* Content Area */}
<div className=”md:w-2/3 p-6 md:p-10 min-h-[400px]”>
<div className=”animate-in fade-in slide-in-from-right-4 duration-500″>
<div className=”flex items-center space-x-3 mb-6″>
<span className={`px-3 py-1 rounded-full text-white text-xs font-bold ${tips[activeTab].color}`}>
STRATEGY{activeTab +1}
</span>
<h2 className=”text-2xl font-bold”>{tips[activeTab].title}</h2>
</div>
<p className=”text-lg text-slate-600 mb-8 leading-relaxed”>
{tips[activeTab].content}
</p>
<div className=”grid grid-cols-1 gap-4 mb-8″>
{tips[activeTab].details.map((detail, idx)=>(
<div key={idx} className=”flex items-center space-x-3 bg-slate-50 p-3 rounded-lg border border-slate-100″>
<div className={`w-2 h-2 rounded-full ${tips[activeTab].color}`} />
<span className=”text-sm font-medium”>{detail}</span>
</div>
))}
</div>
<div className=”bg-amber-50 border-l-4 border-amber-400 p-4 rounded-r-xl”>
<div className=”flex items-center space-x-2 mb-1 text-amber-700″>
<AlertCircle className=”w-4 h-4″ />
<span className=”text-xs font-black uppercase tracking-tighter”>ProTip</span>
</div>
<p className=”text-sm text-amber-800 italic”>
“{tips[activeTab].proTip}”
</p>
</div>
</div>
</div>
</div>
{/* Footer Summary */}
<div className=”bg-slate-50 border-t border-slate-100 p-6 grid grid-cols-1 md:grid-cols-3 gap-6″>
<div className=”flex items-center space-x-4″>
<div className=”bg-white p-3 rounded-2xl shadow-sm border border-slate-100″>
<TrendingUp className=”w-6 h-6 text-green-500″ />
</div>
<div>
<h4 className=”text-xs font-bold text-slate-400 uppercase”>PrimaryGoal</h4>
<p className=”text-sm font-bold”>RecoupInvestment</p>
</div>
</div>
<div className=”flex items-center space-x-4″>
<div className=”bg-white p-3 rounded-2xl shadow-sm border border-slate-100″>
<ArrowRight className=”w-6 h-6 text-blue-500″ />
</div>
<div>
<h4 className=”text-xs font-bold text-slate-400 uppercase”>NextStep</h4>
<p className=”text-sm font-bold”>BuyProfitableStock</p>
</div>
</div>
<div className=”text-right hidden md:block”>
<p className=”text-[10px] text-slate-400 mt-4 italic”>
Based on “How to Resell Liquidation Pallets Fast” by LindsayNicole
</p>
</div>
</div>
</div>
</div>
);
};
export default App;