App.jsx

import React from 'react'
import Tabs from './components/Tabs'
import Gallery from './components/Gallery'

function App() {
  return (
    <div className="min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8">
      <div className="w-full max-w-7xl">
        <div className="flex flex-col lg:flex-row gap-6 sm:gap-8 lg:gap-12">
          {/* Left panel - Gallery */}
          <div className="flex-1 lg:flex-[7]">
            <Gallery />
            {/* Divider line below Gallery - only visible on laptop screens and above */}
            <div className="hidden lg:block h-px bg-gradient-to-r from-transparent via-[#2C2D33]/40 to-transparent mt-6"></div>
          </div>

          {/* Divider line - only visible on laptop screens and above */}
          <div className="hidden lg:block w-px bg-gradient-to-b from-transparent via-[#2C2D33]/40 to-transparent"></div>

          {/* Right panel - Tabs */}
          <div className="flex-1 lg:flex-[5]">
            <Tabs />
            {/* Divider line below Tabs - only visible on laptop screens and above */}
            <div className="hidden lg:block h-px bg-gradient-to-r from-transparent via-[#2C2D33]/40 to-transparent mt-6"></div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App