[Feat] Pricing Section Design

[dev129]

Description

Title: Design AI Content Generator Pricing Section Hi @iamkanhaiyakumar @GauravKesh

Description:
We need to create a visually appealing and user-friendly pricing section for our AI Content Generator tool. This section should clearly present different pricing tiers, highlight the features included in each, and guide users towards selecting the best plan for their needs.

Requirements:

1. Layout and Design:

   • Design a clean, modern, and responsive layout for the pricing section.
   • Include visually distinct cards or sections for each pricing tier (e.g., Basic, Pro, Enterprise).

2. Content and Features List:

   • Clearly outline the features and limitations for each plan (e.g., word count limits, access to premium templates, support availability).
   • Include prominent CTAs like “Choose Plan” or “Get Started” for each tier.

3. Highlighting Features and Benefits:

   • Use icons or checkmarks to highlight key features.
   • Emphasize benefits unique to each plan (e.g., priority support for Enterprise users).

4. Support for User Queries:

   • Add an FAQ or "Need Help?" section below the pricing tiers with a phone and email support option.

5. Styling:

   • Follow our existing branding guidelines (colors, fonts, etc.).
   • Ensure the design is visually balanced with ample spacing and readable font sizes.

Acceptance Criteria:

• [x] A responsive pricing section design that aligns with our brand and improves user understanding of plan options.
• [x] Clearly defined features and CTAs for each tier.
• [x] Support contact details and/or FAQ added below the pricing cards.

---

Additional Context:
This issue aligns with the goal of making our pricing clearer and more accessible to new and returning users.

Screenshots

No response

Checklist

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I'm a GSSoC'24-Extd contributor
• [X] I'm a Hacktoberfest'24 contributor
• [X] I am willing to work on this issue (optional)

[dev129]

Hi @GauravKesh @iamkanhaiyakumar , this is the design

[dev129]

Hi @iamkanhaiyakumar @GauravKesh , please check and review my PR.

[dev129]

Hey @GauravKesh , some more things first of all the package-lock.json the clerk js must be installed in package.json or be told in documentation , I don't know about it but thought to address this issue at the earliest.