I'll help you create a strategic, engaging Instagram story sequence for your artisan bakery that will drive weekend pre-orders while maintaining that warm, cozy aesthetic your customers love. ```tsx import React, { useState } from 'react'; import { ChevronLeft, ChevronRight, MessageCircle, Heart, Bookmark, Send } from 'lucide-react'; const InstagramStorySequence = () => { const [currentSlide, setCurrentSlide] = useState(0); const stories = [ { type: 'video', content: 'Slow motion flour dusting', overlay: '✨ Weekend treats loading...', engagement: 'Tap to see what\'s baking' }, { type: 'image', content: 'Fresh bread lineup', overlay: 'This weekend\'s star lineup 🌟', engagement: 'Swipe up for pre-orders' }, { type: 'poll', content: 'Sourdough vs Brioche', overlay: 'Which one\'s calling your name?', engagement: 'Interactive poll' }, { type: 'cta', content: 'Pre-order deadline', overlay: 'Secure your loaves by Friday 3PM', engagement: 'Swipe up to order now!' } ]; const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % stories.length); }; const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + stories.length) % stories.length); }; return ( <div className="w-full max-w-sm mx-auto"> <div className="relative bg-gray-900 rounded-lg overflow-hidden aspect-[9/16]"> {/* Progress bar */} <div className="absolute top-0 w-full flex gap-1 p-2"> {stories.map((_, idx) => ( <div key={idx} className="h-1 flex-1 rounded-full bg-gray-600"> <div className={`h-full rounded-full bg-white ${idx <= currentSlide ? 'w-full' : 'w-0'}`} /> </div> ))} </div> {/* Main content */} <div className="h-full flex items-center justify-center p-6 text-white"> <div className="text-center space-y-4"> <div className="text-xl font-bold">{stories[currentSlide].overlay}</div> <div className="text-sm opacity-80">{stories[currentSlide].content}</div> <div className="text-sm text-blue-400">{stories[currentSlide].engagement}</div> </div> </div> {/* Navigation */} <button onClick={prevSlide} className="absolute left-2 top-1/2 -translate-y-1/2 text-white p-2" > <ChevronLeft size={24} /> </button> <button onClick={nextSlide} className="absolute right-2 top-1/2 -translate-y-1/2 text-white p-2" > <ChevronRight size={24} /> </button> {/* Engagement icons */} <div className="absolute bottom-4 right-4 flex gap-4 text-white"> <Heart size={20} /> <MessageCircle size={20} /> <Send size={20} /> <Bookmark size={20} /> </div> </div> </div> ); }; export default InstagramStorySequence; ``` Here's your 4-slide story sequence optimized for bakery pre-orders: 1. HOOK SLIDE (3 seconds) - Visual: Close-up slow-motion video of flour being dusted over a wooden surface - Text: "✨ Weekend treats loading..." - Action: Simple tap interaction to build curiosity - Strategy: The mesmerizing slow-motion creates a scroll-stopping moment 2. VALUE SLIDE (5 seconds) - Visual: Beautiful spread of different breads in warm lighting - Text: "This weekend's star lineup 🌟" - Action: Preview of available items - Strategy: Showcases variety while maintaining cozy aesthetic 3. ENGAGEMENT SLIDE (5 seconds) - Visual: Split screen of sourdough vs brioche - Text: Interactive poll "Which one's calling your name?" - Action: Tap to vote feature - Strategy: Creates engagement and gives you audience insights 4. CTA SLIDE (5 seconds) - Visual: Timer countdown overlay on beauty shot - Text: "Secure your loaves by Friday 3PM" - Action: Clear swipe-up for pre-orders - Strategy: Creates urgency while maintaining premium feel Key Features: - Warm color palette (browns, creams, golden tones) - Natural lighting throughout - Rustic textures (wood, linen, flour dusting) - Mix of video and still content - Interactive elements to boost engagement Would you like me to modify any part of this sequence or provide more specific details for any of the slides?