ui: add folio pro banner

alsiam · Aug 3, 2024 · a91fd48 · a91fd48
1 parent 0a44548
commit a91fd48
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 7 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,12 +8,14 @@ import "../styles/theme.css";
 import Sidebar from "@/components/sidebar/sidebar";
 import Providers from "./providers";
 import ThemeSwitch from "@/components/panel/ThemeSwitch";
+import FolioProBanner from "@/components/banner/folio-pro";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "urFolio - Portfolio web",
-  description: "urFolio - a Open Source portfolio web application",
+  title: "Folio the best Portfolio or Personal Website",
+  description:
+    "Folio is the best portfolio or personal website for developer, creator or businessman.",
 };
 
 export default function RootLayout({
@@ -25,9 +27,17 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <Providers>
-          <ThemeSwitch />
+          {/* Use this for your site */}
+          {/* <ThemeSwitch />
           <Sidebar />
-          {children}
+          {children} */}
+          {/* Temporary for Banner */}
+          <FolioProBanner />
+          <div className="temp-layout">
+            <ThemeSwitch />
+            <Sidebar />
+            {children}
+          </div>
         </Providers>
         <Analytics />
       </body>

diff --git a/src/components/banner/folio-pro.tsx b/src/components/banner/folio-pro.tsx
@@ -0,0 +1,16 @@
+import { IoIosArrowRoundForward } from "react-icons/io";
+
+export default function FolioProBanner() {
+  return (
+    <div className="banner">
+      <div className="banner-wrap">
+        <p className="banner-desc">
+          <span className="banner-card">Folio Pro</span> Be the first to experience Folio Pro
+        </p>
+        <a href="https://folio-pro.alsiam.com" target="_blank" className="banner-btn">
+          Get it Now <IoIosArrowRoundForward />
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
@@ -24,7 +24,7 @@ const Sidebar = () => {
       <div className="aside-inner">
         <div className="logo">
           <Link href="/" onClick={handleClose}>
-            Logo
+            Folio
           </Link>
         </div>
         <ul className="nav">

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -221,6 +221,56 @@ select {
     transform: rotate(360deg);
   }
 }
+/* Banner Style */
+/* =========================================================== */
+/* Temp layout */
+.temp-layout{
+  margin-top: 40px;
+  height: 100%;
+}
+.banner{
+  z-index: 999;
+  position: relative;
+  background: rgb(0, 132, 255);
+  font-weight: 500;
+  padding: 12px 0;
+}
+.banner-wrap{
+display: flex;;
+justify-content: center;
+align-items: center;
+}
+.banner-card{
+  font-size: 16px;
+  color: white;
+  background-color: crimson;
+  padding: 1px 10px;
+  border-radius: 10px;
+  margin-right: 4px;
+  font-weight: 600;
+}
+.banner-desc{
+  text-align: center;
+  font-weight: 500;
+}
+.banner-btn{
+  outline: none;
+  border: none;;
+  color: black;
+  background-color: white;
+  padding: 2px 8px;
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  border-radius: 8px;
+  min-width: max-content;
+  max-width: max-content;
+  transition: .3s ease-in-out;
+}
+.banner-btn:hover{
+  color: white;
+  background-color: black;
+}
 
 /* Aside bar Style
 ================================================================ */
@@ -1163,7 +1213,10 @@ select {
     margin-left: 0;
   }
 }
-@media (max-width: 991px) {
+@media (max-width: 1024px) {
+  .banner{
+    padding: 20px 0;
+  }
   .blog .blog-item,
   .portfolio .portfolio-item,
   .service .service-item {
@@ -1172,7 +1225,10 @@ select {
     max-width: 50%;
   }
 }
-@media (max-width: 767px) {
+@media (max-width: 768px) {
+  .banner{
+    padding: 20px 0;
+  }
   .contact .contact-form .col-6,
   .blog .blog-item,
   .service .service-item,
@@ -1189,6 +1245,21 @@ select {
   }
 }
 @media (max-width: 575px) {
+  .banner{
+    padding: 20px 0;
+  }
+  .banner-wrap{
+    display: block;
+  }
+  .banner-desc{
+    font-size: 14px;
+  }
+  .banner-btn{
+    width: max-content;
+    font-size: 14px;
+    margin: auto;
+    margin-top: 3px;
+  }
   .contact .contact-info-item,
   .portfolio .portfolio-item {
     -ms-flex: 0 0 100%;