94 lines
3.5 KiB
JavaScript
94 lines
3.5 KiB
JavaScript
import girlchat from "../../assets/images/girlchat.webp"
|
|
const AstroChatUI = () => {
|
|
return (
|
|
<>
|
|
|
|
<div className="flex items-center justify-center py-4">
|
|
<div className="w-full max-w-[550px] pt-12 bg-gradient-to-br from-red-50 to-green-50 rounded-3xl shadow-2xl p-8 relative overflow-hidden">
|
|
|
|
{/* Logo Section */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="relative">
|
|
{/* Planet Icon */}
|
|
<svg className="w-16 h-16" viewBox="0 0 64 64" fill="none">
|
|
<circle cx="32" cy="32" r="20" fill="#A70710" opacity="0.9"/>
|
|
<ellipse cx="32" cy="32" rx="35" ry="8" fill="none" stroke="#A70710" strokeWidth="3" transform="rotate(-20 32 32)"/>
|
|
{/* Chat dots */}
|
|
<circle cx="26" cy="32" r="2" fill="white"/>
|
|
<circle cx="32" cy="32" r="2" fill="white"/>
|
|
<circle cx="38" cy="32" r="2" fill="white"/>
|
|
{/* Stars */}
|
|
<circle cx="12" cy="20" r="2" fill="#A70710"/>
|
|
<circle cx="16" cy="12" r="1.5" fill="#A70710"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-bold">
|
|
<span className="text-gray-900">Astro</span>
|
|
<span className="text-[#A70710]">FreeChart</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-gray-700 ml-1">
|
|
From <span className="text-[#A70710] font-semibold">Thirukalyanam Matrimony</span> Group
|
|
</p>
|
|
</div>
|
|
|
|
{/* Main Heading */}
|
|
<h2 className="text-[18px] font-bold text-gray-900 mb-4 leading-tight">
|
|
Looking for astrology guidance in love, relationships, career, or health?
|
|
</h2>
|
|
|
|
{/* Subheading */}
|
|
<p className="text-gray-700 mb-4">
|
|
Connect instantly with expert astrologers on AstroFreeChat.
|
|
</p>
|
|
|
|
{/* Features List */}
|
|
<div className="space-y-2 mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-[#A70710] text-xl mt-1">✓</span>
|
|
<p className="text-gray-900 font-medium text-[14px]">
|
|
Instant Astrology Insights
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-[#A70710] text-xl mt-1">✓</span>
|
|
<p className="text-gray-900 font-medium text-[14px]">
|
|
Chat Anytime, Anywhere
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-[#A70710] text-xl mt-1">✓</span>
|
|
<p className="text-gray-900 font-medium text-[14px]">
|
|
First 5 Minutes <span className="font-bold">FREE</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<button className="relative z-[99] w-[fit-content] bg-[#034E08] hover:bg-[#A70710] text-white font-bold text-[16px] py-4 px-6 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
|
|
Download AstroFreeChart
|
|
</button>
|
|
|
|
{/* Girl Image - Positioned at bottom right */}
|
|
<div className="absolute bottom-0 right-0 z-[1]">
|
|
<img
|
|
src={girlchat}
|
|
alt="Woman using chat"
|
|
className="w-full h-full object-cover object-top"
|
|
/>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default AstroChatUI |