Skip to content

Commit

Permalink
Pricing section updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@AbulFozolJumman
AbulFozolJumman committed Oct 23, 2023
1 parent fc564b5 commit 3cc3e56
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 27 deletions.
30 changes: 15 additions & 15 deletions src/app/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function RootLayout({ children }) {
<div className="navbar py-3">
<div className="navbar-start">
<div className="dropdown">
<label tabIndex={0} className="items-center gap-2 lg:hidden flex bg-[#f5df4d] p-2 hover:bg-black hover:text-white">
<label tabIndex={0} className="items-center gap-2 lg:hidden flex bg-[#f5df4d] p-2 hover:bg-black hover:text-[#f5df4d]">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
<p className='font-bold'>Menu</p>
</label>
Expand All @@ -40,17 +40,17 @@ export default function RootLayout({ children }) {
<li><a className='hover:text-gray-500 font-bold p-3'>Events</a></li>
<li><a className='hover:text-gray-500 font-bold p-3'>Purchase</a></li>
<li>
<a href='mailto:[email protected]' className="flex items-center gap-3 cursor-pointer bg-[#f5df4e] hover:bg-gray-400 p-3 rounded-[40px] text-black">
<a href='mailto:[email protected]' className="flex items-center gap-3 cursor-pointer bg-[#f5df4e] hover:bg-black p-2 rounded-md text-black hover:text-[#f5df4e]">
<BiMessageRoundedDots className='text-5xl hidden md:block'></BiMessageRoundedDots>
<div>
<p className='font-bold text-lg'>[email protected]</p>
<p>Talk To Us</p>
<p className='font-bold text-base'>[email protected]</p>
<p className='text-xs'>Talk To Us</p>
</div>
</a>
</li>
</ul>
</div>
<a className="btn btn-ghost normal-case text-2xl md:ml-12 ml-20">Visuality</a>
<a className="btn btn-ghost normal-case text-3xl md:ml-12 ml-20">Visuality</a>
</div>
<div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal px-1">
Expand All @@ -71,11 +71,11 @@ export default function RootLayout({ children }) {
</ul>
</div>
<div className="navbar-end md:pr-12">
<a href='mailto:[email protected]' className="md:flex items-center gap-1 cursor-pointer bg-[#f5df4e] hover:bg-gray-400 p-3 hidden rounded-[40px]">
<BiMessageRoundedDots className='text-5xl '></BiMessageRoundedDots>
<a href='mailto:[email protected]' className="md:flex items-center gap-1 cursor-pointer bg-[#f5df4e] hover:bg-black p-2 hidden rounded-[40px] hover:text-[#f5df4e]">
<BiMessageRoundedDots className='text-4xl '></BiMessageRoundedDots>
<div>
<p className='font-bold text-lg'>[email protected]</p>
<p>Talk To Us</p>
<p className='font-bold text-base'>[email protected]</p>
<p className='text-sm'>Talk To Us</p>
</div>
</a>
</div>
Expand All @@ -87,15 +87,15 @@ export default function RootLayout({ children }) {
{/* Footer */}
<footer className='bg-[#1e1e1e]'>
<div className='flex flex-wrap items-center justify-center gap-8 border-b-2 border-gray-600 p-12'>
<p className='bg-[#f5df4d] py-2 px-4 font-bold rounded-3xl hover:bg-gray-600 flex items-center gap-3 hover:text-[#f5df4d] cursor-pointer'><span><FaFacebookF /></span> FACEBOOK</p>
<p className='bg-[#f5df4d] py-2 px-4 font-bold rounded-3xl hover:bg-gray-600 flex items-center gap-3 hover:text-[#f5df4d] cursor-pointer'><span><FaTwitter /></span> TWITTER</p>
<p className='bg-[#f5df4d] py-2 px-4 font-bold rounded-3xl hover:bg-gray-600 flex items-center gap-3 hover:text-[#f5df4d] cursor-pointer'><span><FaTiktok /></span> TIKTOK</p>
<p className='bg-[#f5df4d] py-2 px-4 font-bold rounded-3xl hover:bg-gray-600 flex items-center gap-3 hover:text-[#f5df4d] cursor-pointer'><span><FaInstagram /></span> INSTAGRAM</p>
<p className='bg-[#f5df4d] py-2 px-4 font-bold rounded-3xl hover:bg-gray-600 flex items-center gap-3 hover:text-[#f5df4d] cursor-pointer'><span><FaSearch /></span> SEARCH</p>
<p className='bg-[#ffe017] py-2 px-4 font-bold rounded-3xl hover:bg-black flex items-center gap-3 hover:text-[#ffe017] cursor-pointer'><span><FaFacebookF /></span> FACEBOOK</p>
<p className='bg-[#ffe017] py-2 px-4 font-bold rounded-3xl hover:bg-black flex items-center gap-3 hover:text-[#ffe017] cursor-pointer'><span><FaTwitter /></span> TWITTER</p>
<p className='bg-[#ffe017] py-2 px-4 font-bold rounded-3xl hover:bg-black flex items-center gap-3 hover:text-[#ffe017] cursor-pointer'><span><FaTiktok /></span> TIKTOK</p>
<p className='bg-[#ffe017] py-2 px-4 font-bold rounded-3xl hover:bg-black flex items-center gap-3 hover:text-[#ffe017] cursor-pointer'><span><FaInstagram /></span> INSTAGRAM</p>
<p className='bg-[#ffe017] py-2 px-4 font-bold rounded-3xl hover:bg-black flex items-center gap-3 hover:text-[#ffe017] cursor-pointer'><span><FaSearch /></span> SEARCH</p>
</div>

<div className='flex flex-col-reverse md:flex-row items-center justify-between p-12 text-[#f5df4d] text-sm gap-8'>
<p>Copyright © 2021 - Visuality Theme</p>
<p>Copyright © 2023 - Visuality Theme</p>
<div>
<a className='pl-5 cursor-pointer hover:text-white font-bold'>Home</a>
<a className='pl-5 cursor-pointer hover:text-white font-bold'>About Us</a>
Expand Down
25 changes: 13 additions & 12 deletions src/app/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Image from 'next/image'
import { BiSolidQuoteAltRight } from 'react-icons/bi';
import { FaLongArrowAltRight, FaRegLightbulb } from "react-icons/fa";
import { BsFillCheckCircleFill } from "react-icons/bs";

export default function Home() {
return (
Expand Down Expand Up @@ -275,42 +276,42 @@ export default function Home() {
<p className="text-2xl font-bold text-center px-5 mt-4 mb-8 md:mb-12">Choose Your Best Plan</p>
<div className="mb-12 flex items-start justify-center gap-10">

<div className="p-8 max-w-[360px] border-2 border-[#23A6F0] rounded-[30px] hover:scale-110 duration-300">
<div className="p-8 max-w-[360px] border-2 border-[#ffe017] rounded-[30px] hover:scale-110 duration-300">

<div className="flex items-start justify-between mb-8">
<div>
<p className="text-[10px] font-bold">PLAN</p>
<h4 className="text-[22px] font-bold text-[#23A6F0]">Business</h4>
<h4 className="text-[22px] font-bold text-[#ffe017]">Business</h4>
</div>
<a className="text-[10px] font-extrabold text-[#23A6F0] py-2 px-4 border border-[#23A6F0] rounded-2xl"
<a className="text-[10px] font-extrabold text-[#ffe017] py-2 px-4 border border-[#ffe017] rounded-2xl"
href="#">BEST SELLER</a>
</div>

<div className="flex justify-start items-end mb-3 gap-4">
<div className="flex justify-start items-start">
<p className="text-[22px] font-medium text-[#23A6F0]">$</p>
<h2 className="text-[55px] leading-[55px] font-bold text-[#23A6F0]">19</h2>
<p className="text-[22px] font-medium text-[#ffe017]">$</p>
<h2 className="text-[55px] leading-[55px] font-bold text-[#ffe017]">19</h2>
</div>
<p className="text-[14px] font-medium text-[#23A6F0]">Editor/month</p>
<p className="text-[14px] font-medium text-[#ffe017]">Editor/month</p>
</div>

<p className="text-[14px] mb-5">For professional business, billed annually or $15 month-to-month.</p>
<hr className="border-2 border-[#23A6F0] mb-[61px]" />
<hr className="border-2 border-[#ffe017] mb-[61px]" />

<p className="text-[14px font-medium] flex items-center gap-2 mb-3">
<Image src="/Check-green.png" alt="" width={20} height={20} />
<BsFillCheckCircleFill className='text-[#ffe017] text-xl' />
Invite-only private projects</p>
<p className="text-[14px font-medium] flex items-center gap-2 mb-3">
<Image src="/Check-green.png" alt="" width={20} height={20} />
<BsFillCheckCircleFill className='text-[#ffe017] text-xl' />
Custom file/user permissions</p>
<p className="text-[14px font-medium] flex items-center gap-2 mb-3">
<Image src="/Check-green.png" alt="" width={20} height={20} />
<BsFillCheckCircleFill className='text-[#ffe017] text-xl' />
30-day version history</p>
<p className="text-[14px font-medium] flex items-center gap-2 mb-10">
<Image src="/Check-green.png" alt="" width={20} height={20} />
<BsFillCheckCircleFill className='text-[#ffe017] text-xl' />
Shareable team libraries</p>

<a className="text-white font-medium w-[180px] mx-auto bg-gradient-to-r from-[#17A9F7] to-[#0969FA] py-2 rounded-[5px] flex justify-center items-center gap-2 text-[15px] hover:bg-gradient-to-r hover:from-[#FFFFFF] hover:to-[#FFFFFF] hover:border hover:border-[#128CED] hover:text-[#128CED] hover:py-[7px]"
<a className="w-[180px] mx-auto py-3 flex justify-center items-center gap-2 text-[15px] bg-[#ffe017] hover:bg-black hover:text-white uppercase font-bold"
href="#">Choose Business</a>
</div>

Expand Down

0 comments on commit 3cc3e56

Please sign in to comment.