the application is mainly focused on forst user to create ai imaes so user have ai genenrted images of theri own so in this order page i want to user to make use of thier genenraitons to order as posters photo framed frams also i use premium consept for frame selcetion and user can choose t-shirst like full sleev ehalf sleev and and many more cloth types but it slos premium some time even same for coffee cup and mobile case too i need the best mordern deisgn add more most contexts and best design best magical ui with all possible loaders adn animations and i need typscript error free optimsied code redeisng this component with similar to thr applcition and this ui should chahge this requiremnt is user have wishlisted images user shold have suggested images to frame and user have some frames some frames are free some frames are premium  and poserts iamges alllt thes shoud have to horizontal scrollable images  cards there s a cart so he can add to cart and later he can ship and think and add what can we how can we purchase those likw with tshirst mobile skin adn laptop skin and airpods case an many as posible  redign this on cart clikc slider shoudl show with nessasary informaitons on cliking one imae shoudl open model with nesary checkout procedure even inside slider too the end there shoudl a slider with animations order now once user slide this your show toast your order recived you will get a mail "use client"
import React, { useState } from 'react';
import { ShoppingCart, ArrowLeft, ArrowRight } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

const OrderNow = () => {
  const [step, setStep] = useState(1);

  const nextStep = () => setStep(step + 1);
  const prevStep = () => setStep(step - 1);

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 to-indigo-800 text-white p-8">
      <header className="flex justify-between items-center mb-12">
        <h1 className="text-4xl font-bold">Order Your AI Creation</h1>
        <Button variant="outline" className="text-white border-white hover:bg-white hover:text-purple-900">
          <ShoppingCart className="mr-2" /> Cart (0)
        </Button>
      </header>

      <div className="max-w-4xl mx-auto">
        <Card className="bg-gray-800 border-gray-700">
          <CardHeader>
            <CardTitle className="text-2xl">Step {step} of 3</CardTitle>
          </CardHeader>
          <CardContent>
            {step === 1 && (
              <div>
                <h2 className="text-xl mb-4">Choose Your Image</h2>
                <div className="grid grid-cols-3 gap-4">
                  {[1, 2, 3, 4, 5, 6].map((i) => (
                    <div key={i} className="aspect-square bg-gray-700 rounded-lg cursor-pointer hover:ring-2 hover:ring-white"></div>
                  ))}
                </div>
              </div>
            )}
            {step === 2 && (
              <div>
                <h2 className="text-xl mb-4">Select Frame and Size</h2>
                <div className="grid grid-cols-2 gap-4">
                  <Button variant="outline" className="h-20">Classic Frame</Button>
                  <Button variant="outline" className="h-20">Modern Frame</Button>
                  <Button variant="outline" className="h-20">Canvas Print</Button>
                  <Button variant="outline" className="h-20">Poster</Button>
                </div>
              </div>
            )}
            {step === 3 && (
              <div>
                <h2 className="text-xl mb-4">Review and Checkout</h2>
                <div className="flex space-x-4">
                  <div className="w-1/2 aspect-square bg-gray-700 rounded-lg"></div>
                  <div className="w-1/2">
                    <p className="mb-2">Selected Image: AI Creation #1234</p>
                    <p className="mb-2">Frame: Classic Frame</p>
                    <p className="mb-2">Size: 18" x 24"</p>
                    <p className="text-2xl font-bold mt-4">Total: $129.99</p>
                  </div>
                </div>
              </div>
            )}
          </CardContent>
        </Card>

        <div className="flex justify-between mt-8">
          {step > 1 && (
            <Button onClick={prevStep} className="bg-gray-700 hover:bg-gray-600">
              <ArrowLeft className="mr-2" /> Previous
            </Button>
          )}
          {step < 3 ? (
            <Button onClick={nextStep} className="bg-blue-500 hover:bg-blue-600 ml-auto">
              Next <ArrowRight className="ml-2" />
            </Button>
          ) : (
            <Button className="bg-green-500 hover:bg-green-600 ml-auto">
              Complete Order <ShoppingCart className="ml-2" />
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};

export default OrderNow;