Added Premium Features Option

SUGAM-ARORA · Jun 2, 2024 · c2fa0de · c2fa0de
1 parent 407a8ad
commit c2fa0de
Show file tree

Hide file tree

Showing 5 changed files with 333 additions and 69 deletions.
diff --git 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
@@ -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;
 }
diff --git 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
@@ -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;
+    }
+}