style = "display: flex"import { motion } from "framer-motion"; import { fadeInDown, reveal } from "../../utils/variants"; interface IFlexContaier { paragraph: string; img: string; lgOrder?: "lg:order-none" | "lg:order-1"; } export default function FlexContainer({ paragraph, img, lgOrder }: IFlexContaier) { return ( <div className=" flex flex-col items-center mt-element gap-flex lg:flex-row lg:items-start "> {/* Image */} <motion.div variants={reveal} className={`flex w-full justify-center lg:w-1/2 ${lgOrder} `} > <img src={img} alt="token utility" loading="lazy" className="h-auto max-h-[170px] max-w-[200px]" /> </motion.div> {/* Content */} <motion.p variants={fadeInDown} className={` w-full text-4xl lg:w-1/2 `}> {paragraph} </motion.p> </div> ); } import React from 'react'; import './styles.css'; function App() { return ( <div className="container"> <div className="item">Item 1</div> <div className="item">Item 2</div> <div className="item">Item 3</div> </div> ); } export default App;