diff --git a/src/App.js b/src/App.js index 144ef9cc..f3878021 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import BlogPage from "./Components/footer_section/BlogPage/BlogPage" import FAQPage from "./Components/footer_section/FAQPage/FAQPage"; import Services from "./Components/footer_section/services/Services"; import ContactUs from "./Components/footer_section/ContactUs/contact_us"; +import Pricing from "./Components/footer_section/Pricing/pricing"; import MyProjects from "./Components/menu_section/my_projects/MyProjects"; import NewProject from "./Components/menu_section/new_project/NewProject"; @@ -24,6 +25,7 @@ function App() { } /> } /> } /> + } /> } /> } /> diff --git a/src/Components/Footer.css b/src/Components/Footer.css index 0f711151..fddee2dc 100644 --- a/src/Components/Footer.css +++ b/src/Components/Footer.css @@ -1,83 +1,96 @@ .footer { - background: #19162c; - color: #ffffff; - padding: 20px 0; - text-align: center; - } - - .footer-content { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; - } - - .footer p { - margin: 0; - } - - .footer-links { - list-style: none; - padding: 0; - margin: 10px 0 0; - display: flex; - justify-content: center; - gap: 15px; - } - - .footer-links li { - display: inline; - } - - .footer-links a { - color: #ffffff; - text-decoration: none; - transition: color 0.3s; - } - - .footer-links a:hover { - color: #00ffff; - } - - .footer-content { - position: relative; - } - - .back-to-top { - margin-top: 40px; - position: absolute; - top: 0; - right: 0; - color: #ffffff; - } + background: #19162c; + color: #ffffff; + padding: 20px 0; + text-align: center; +} + +.footer-content { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.footer p { + margin: 0; +} + +.footer-links { + list-style: none; + padding: 0; + margin: 10px 0 0; + display: flex; + justify-content: center; + gap: 25px; +} + +.footer-links li { + display: inline; +} - .back-to-top { - text-decoration: none; - font-size: 14px; - font-weight: bold; - color: #d1d0d5; - border: 2px solid #443b78; - padding: 5px 15px; - border-radius: 10px; - margin: 0px 5px; - transition: background-color 0.3s ease; - } - - .back-to-top:hover { - background-color: #443b78; - } -a{ +.footer-links a { + color: #ffffff; text-decoration: none; + transition: color 0.3s; } -.icons{ + +.footer-links a:hover { + color: #00ffff; +} + +.footer-content { + position: relative; +} + +.back-to-top { + margin-top: 40px; + position: absolute; + top: 0; + right: 0; + color: #ffffff; +} + +.back-to-top { + text-decoration: none; + font-size: 14px; + font-weight: bold; + color: #d1d0d5; + border: 2px solid #443b78; + padding: 5px 15px; + border-radius: 10px; + margin: 0px 5px; + transition: background-color 0.3s ease; +} + +.back-to-top:hover { + background-color: #443b78; +} + +a { + text-decoration: none; +} + +.icons { display: flex; justify-content: center; gap: 20px; font-size: 20px; } -.icons a{ + +.icons a { color: #ffffff; transition: color 0.3s; } -.icons a:hover{ + +.icons a:hover { color: #00ffff; +} + +#pro { + background-color: #ff21bc; + border-radius: 10px; + width: 80px; + text-align: center; + font-style: oblique; + font-weight: bold; } \ No newline at end of file diff --git a/src/Components/Footer.js b/src/Components/Footer.js index a5974368..9d6e7bf3 100644 --- a/src/Components/Footer.js +++ b/src/Components/Footer.js @@ -38,6 +38,9 @@ const Footer = () => {
  • Services
    • +
  • + Go Pro! +
  • Contact
    • diff --git a/src/Components/footer_section/Pricing/pricing.css b/src/Components/footer_section/Pricing/pricing.css new file mode 100644 index 00000000..de213b00 --- /dev/null +++ b/src/Components/footer_section/Pricing/pricing.css @@ -0,0 +1,176 @@ +* { + color: white; + box-sizing: border-box; +} + +body { + margin: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #0d0d0d; +} + +.header { + margin: auto; + padding: 20px; + opacity: 0; + animation: fadeIn 1.5s ease-in-out forwards; +} + +.headingHeader { + text-align: center; + font-size: 4vw; + letter-spacing: 2px; + margin-bottom: 14px; + margin-top: 50px; +} + +.headingHeader:hover { + text-decoration: underline; +} + +.description { + text-align: center; + font-size: 1.2vw; + margin-bottom: 60px; +} + +.cards_price { + margin: auto; + width: 90vw; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; + margin-bottom: 75px; + opacity: 0; + animation: fadeIn 2s ease-in-out forwards; + animation-delay: 1s; +} + +.topic_head, .topic_description, .topic_price, .topic_features { + font-size: 22px; + margin: 30px; +} + +.topic_description, .topic_features { + font-size: 16px; + text-align: justify; +} + +li { + list-style: none; +} + +.topic_features { + line-height: 2; +} + +.price1, .price2 { + background-color: #1a1736; + border-radius: 50px; + padding: 20px; + transform: translateY(50px); + opacity: 0; + animation: slideUp 1s ease-in-out forwards; + animation-delay: 1.5s; +} + +.price2 { + outline: 3px solid #ff21bc; +} + +.topic_head { + font-weight: bold; + font-size: 25px; + display: flex; + gap: 15px; +} + +.topic_price { + font-weight: bolder; + font-size: 30px; +} + +.prev { + font-weight: bold; +} + +.free_trial { + margin-top: 25px; + border-radius: 20px; + font-weight: bold; + font-size: 19px; + padding: 10px 20px; + display: block; + width: 80%; + margin: 25px auto 0 auto; + text-align: center; +} + +.Pro { + background-color: #ff21bc; + border-radius: 10px; + width: 50px; + text-align: center; + font-style: oblique; +} + +/* Media Queries for Responsive Design */ +@media (max-width: 768px) { + .headingHeader { + font-size: 8vw; + } + + .description { + font-size: 4vw; + } + + .topic_head, .topic_description, .topic_price, .topic_features { + font-size: 4vw; + margin: 15px; + } + + .topic_price { + font-size: 5vw; + } + + .price1, .price2 { + padding: 10px; + } +} + +@media (max-width: 480px) { + .headingHeader { + font-size: 10vw; + } + + .description { + font-size: 5vw; + } + + .topic_head, .topic_description, .topic_price, .topic_features { + font-size: 5vw; + margin: 10px; + } + + .topic_price { + font-size: 6vw; + } + + .price1, .price2 { + padding: 5px; + } +} + +/* Animation Keyframes */ +@keyframes fadeIn { + to { + opacity: 1; + } +} + +@keyframes slideUp { + to { + transform: translateY(0); + opacity: 1; + } +} diff --git a/src/Components/footer_section/Pricing/pricing.js b/src/Components/footer_section/Pricing/pricing.js new file mode 100644 index 00000000..82979c40 --- /dev/null +++ b/src/Components/footer_section/Pricing/pricing.js @@ -0,0 +1,70 @@ +// pricing.js +import React from "react"; +import './pricing.css'; + +function Pricing() { + return ( +
    +
    +
    Start your 7 day free trial today
    +
    Unlock Advanced Features and Maximize Your Potential with UniCollab Pro.
    +
    +
    +
    +
    UniCollab
    +
    Showcase your projects, collaborate with peers, and explore new opportunities. Join the world's largest academic collaboration network and unlock your potential.
    +
    Free
    +
    +
      +
    • ✅ Create and join projects.
      • +
    • ✅ Basic file sharing (limited storage).
      • +
    • ✅ Task assignment and tracking.
      • +
    • ✅ Access to public forums and discussion boards.
      • +
    • ✅ Participation in public groups and communities.
      • +
    • ✅ Viewing public profiles.
      • +
    • ✅ Access to free articles, tutorials, and guides.
      • +
    • ✅ Limited access to webinars and online events.
      • +
    • ✅ Basic templates for project planning and management.
      • +
    • ✅ Integration with popular educational tools (e.g., Google Docs, Microsoft Office Online).
      • +
    • ✅ Email notifications and reminders.
      • +
    • ✅ Create a personal profile.
      • +
    • ✅ Showcase a limited number of projects in a portfolio.
      • +
    +
    +
    +
    +
    UniCollab
    Pro
    +
    Unlock advanced tools to elevate your projects, understand your audience, and maximize your impact. With UniCollab Pro, take your collaboration to the next level and achieve your academic and professional goals.
    +
    ₹999/month
    +
    +
      +
    • ← Everything included in Free
      • +
    • ✅ Unlimited storage for file sharing.
      • +
    • ✅ Advanced project management tools (Gantt charts, Kanban boards, etc.)
      • +
    • ✅ Customizable workflows and automation.
      • +
    • ✅ Access to exclusive premium groups and communities.
      • +
    • ✅ Ability to create private groups.
      • +
    • ✅ Direct messaging with mentors and industry experts.
      • +
    • ✅ Access to all webinars, online courses, and exclusive content.
      • +
    • ✅ Premium templates and project planning tools.
      • +
    • ✅ Detailed tutorials and advanced guides.
      • +
    • ✅ Integration with advanced third-party tools (e.g., Slack, Trello).
      • +
    • ✅ Advanced analytics on profile and project views.
      • +
    • ✅ Unlimited projects in portfolio.
      • +
    • ✅ Highlighted profiles in searches and suggestions.
      • +
    • ✅ Priority customer support.
      • +
    • ✅ Enhanced security features (e.g., two-factor authentication, data encryption).
      • +
    • ✅ Data backup and recovery options.
      • +
    • ✅ Featured in UniCollab’s spotlight or newsletter.
      • +
    • ✅ Invitations to exclusive networking events.
      • +
    • ✅ Priority listing in project collaboration opportunities.
      • +
    +
    + +
    +
    +
    + ); +} + +export default Pricing;