From c2fa0de7acf9a8185219aa812dfa466083d17289 Mon Sep 17 00:00:00 2001
From: Akshit Garg <akshitgarg2412@gmail.com>
Date: Sun, 2 Jun 2024 15:38:21 +0530
Subject: [PATCH] Added Premium Features Option

---
 src/App.js                                    |   2 +
 src/Components/Footer.css                     | 151 ++++++++-------
 src/Components/Footer.js                      |   3 +
 .../footer_section/Pricing/pricing.css        | 176 ++++++++++++++++++
 .../footer_section/Pricing/pricing.js         |  70 +++++++
 5 files changed, 333 insertions(+), 69 deletions(-)
 create mode 100644 src/Components/footer_section/Pricing/pricing.css
 create mode 100644 src/Components/footer_section/Pricing/pricing.js

diff --git a/src/App.js b/src/App.js
index 2d6bcb7b..335eabb2 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";
 
 function App() {
   return (
@@ -22,6 +23,7 @@ function App() {
           <Route path="/faq" element={<FAQPage />} /> 
           <Route path="/services" element={<Services />} />
           <Route path="/contacts" element={<ContactUs />} />
+          <Route path="/pricing" element={<Pricing />} />
         </Routes>
         <Footer />
       </div>
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 = () => {
           <li>
             <NavLink to="/services">Services</NavLink>
           </li>
+          <li id="pro">
+            <NavLink to="/pricing">Go Pro!</NavLink>
+          </li>
           <li>
             <NavLink to="/contacts">Contact</NavLink>
           </li>
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 (
+        <div className="pricing">
+            <div className="header">
+                <div className="headingHeader">Start your 7 day free trial today</div>
+                <div className="description">Unlock Advanced Features and Maximize Your Potential with UniCollab Pro.</div>
+            </div>
+            <div className="cards_price">
+                <div className="price1">
+                    <div className="topic_head">UniCollab</div>
+                    <div className="topic_description">Showcase your projects, collaborate with peers, and explore new opportunities. Join the world's largest academic collaboration network and unlock your potential.</div>
+                    <div className="topic_price">Free</div>
+                    <div className="topic_features">
+                        <ul>
+                            <li>✅ Create and join projects.</li>
+                            <li>✅ Basic file sharing (limited storage).</li>
+                            <li>✅ Task assignment and tracking.</li>
+                            <li>✅ Access to public forums and discussion boards.</li>
+                            <li>✅ Participation in public groups and communities.</li>
+                            <li>✅ Viewing public profiles.</li>
+                            <li>✅ Access to free articles, tutorials, and guides.</li>
+                            <li>✅ Limited access to webinars and online events.</li>
+                            <li>✅ Basic templates for project planning and management.</li>
+                            <li>✅ Integration with popular educational tools (e.g., Google Docs, Microsoft Office Online).</li>
+                            <li>✅ Email notifications and reminders.</li>
+                            <li>✅ Create a personal profile.</li>
+                            <li>✅ Showcase a limited number of projects in a portfolio.</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="price2">
+                    <div className="topic_head">UniCollab <div className="Pro">Pro</div></div>
+                    <div className="topic_description">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.</div>
+                    <div className="topic_price">₹999/month</div>
+                    <div className="topic_features">
+                        <ul>
+                            <li className="prev">← Everything included in Free</li>
+                            <li>✅ Unlimited storage for file sharing.</li>
+                            <li>✅ Advanced project management tools (Gantt charts, Kanban boards, etc.)</li>
+                            <li>✅ Customizable workflows and automation.</li>
+                            <li>✅ Access to exclusive premium groups and communities.</li>
+                            <li>✅ Ability to create private groups.</li>
+                            <li>✅ Direct messaging with mentors and industry experts.</li>
+                            <li>✅ Access to all webinars, online courses, and exclusive content.</li>
+                            <li>✅ Premium templates and project planning tools.</li>
+                            <li>✅ Detailed tutorials and advanced guides.</li>
+                            <li>✅ Integration with advanced third-party tools (e.g., Slack, Trello).</li>
+                            <li>✅ Advanced analytics on profile and project views.</li>
+                            <li>✅ Unlimited projects in portfolio.</li>
+                            <li>✅ Highlighted profiles in searches and suggestions.</li>
+                            <li>✅ Priority customer support.</li>
+                            <li>✅ Enhanced security features (e.g., two-factor authentication, data encryption).</li>
+                            <li>✅ Data backup and recovery options.</li>
+                            <li>✅ Featured in UniCollab’s spotlight or newsletter.</li>
+                            <li>✅ Invitations to exclusive networking events.</li>
+                            <li>✅ Priority listing in project collaboration opportunities.</li>
+                        </ul>
+                    </div>
+                    <button className="free_trial">Start your Free Trial Now!</button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Pricing;