Adds genesis

sja-cslab · Dec 12, 2024 · ae54316 · ae54316
1 parent b2353c7
commit ae54316
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 38 deletions.
diff --git a/components/templates/TemplateLicense.js b/components/templates/TemplateLicense.js
@@ -22,13 +22,15 @@ const TemplateLicense = ({ license }) => {
                     ))}
                 </div>
                 <p className="template-license-description">{license.description}</p>
-                <p className="template-license-visit">
-                    Visit the{' '}
-                    <a href={license.documentLink} target="_blank">
-                        official documentation
-                    </a>{' '}
-                    for more information.
-                </p>
+                {license.documentLink && (
+                    <p className="template-license-visit">
+                        Visit the{' '}
+                        <a href={license.documentLink} target="_blank">
+                            official documentation
+                        </a>{' '}
+                        for more information.
+                    </p>
+                )}
             </div>
         </div>
     );

diff --git a/components/templates/templateHero/TemplateHero.js b/components/templates/templateHero/TemplateHero.js
@@ -27,10 +27,12 @@ const TemplateHero = ({ logo, pattern, rectangle, light, dashboard1, dashboard2,
                         <i className="pi pi-github " style={{ fontSize: '1rem' }} />
                         <span>{free ? 'Open Issues' : 'Community'}</span>
                     </a>
-                    <a href={docHref} target="_blank">
-                        <i className="pi pi-book " style={{ fontSize: '1rem' }} />
-                        <span>Documentation</span>
-                    </a>
+                    {docHref && (
+                        <a href={docHref} target="_blank">
+                            <i className="pi pi-book " style={{ fontSize: '1rem' }} />
+                            <span>Documentation</span>
+                        </a>
+                    )}
                 </div>
             </div>
             {!!dashboard1 && <img className="template-hero-dashboard1" src={dashboard1} alt="Template Dashboard Image 1" />}

diff --git a/data/news.json b/data/news.json
@@ -1,7 +1,7 @@
 {
-    "id": 51,
-    "content": "Figma UI Kit v3 is out! ",
-    "linkText": "Learn More",
-    "linkHref": "https://primereact.org/uikit",
-    "target": "_self"
+    "id": 52,
+    "content": "Introducing Genesis Template 🚀",
+    "linkText": "View Demo",
+    "linkHref": "https://genesis.primereact.org",
+    "target": "_blank"
 }
diff --git a/pages/templates/genesis/index.js b/pages/templates/genesis/index.js
@@ -10,25 +10,25 @@ const features1Data = [
     {
         title: 'Modern and Sleek Design',
         description: 'Enjoy a contemporary design that looks great on all devices.',
-        src: '/images/templates/genesis/horizontal-features-img-1.png'
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/horizontal-features-img-1.png'
     },
     {
         title: 'SEO & Performance',
         description: 'Optimized for fast loading and high search engine rankings.',
-        src: '/images/templates/genesis/horizontal-features-img-2.png'
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/horizontal-features-img-2.png'
     },
     {
         title: 'Animation / Effects',
         description: 'Enhance engagement with captivating animations and effects.',
-        src: '/images/templates/genesis/horizontal-features-img-3.png'
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/horizontal-features-img-3.png'
     }
 ];
 
 const features2Data = [
     {
         title: 'Fully Responsive',
         description: 'Genesis is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
-        src: '/images/templates/genesis/fully-responsive.png'
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/fully-responsive.png'
     },
     {
         title: 'Cross Browser Compatible',
@@ -51,7 +51,7 @@ const features2Data = [
     {
         title: 'Mobile Experience',
         description: 'Touch optimized enhanced mobile experience with responsive design.',
-        src: '/images/templates/genesis/mobile-experience.png'
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/mobile-experience.png'
     }
 ];
 
@@ -60,7 +60,7 @@ const animationFeaturesData1 = [
         id: 1,
         title: 'Tailwind',
         description: 'Built with TailwindCSS, offering flexibility and efficiency for responsive design. Enjoy the power of Tailwind, a favorite among developers.',
-        src: '/images/templates/genesis/animation-tailwind.png'
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-tailwind.png'
     },
     {
         id: 2,
@@ -85,11 +85,11 @@ const animationFeaturesData1 = [
         description: (
             <>
                 Genesis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can{' '}
-                <a href="https://www.figma.com/design/bGujrJyznnSatJFMtkXbTN/Preview-%7C-Genesis?node-id=0-1&t=etuXAwkUAEuhJ3p0-1">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the Genesis Figma file as
-                they are available in <Link href="/uikit">PrimeOne for Figma</Link> only.
+                <a href="https://www.figma.com/design/bGujrJyznnSatJFMtkXbTN/Preview-%7C-Genesis?node-id=0-1&t=etuXAwkUAEuhJ3p0-1">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the Genesis Figma
+                file as they are available in <Link href="/uikit">PrimeOne for Figma</Link> only.
             </>
         ),
-        src: '/images/templates/genesis/animation-figma.png'
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-figma.png'
     }
 ];
 
@@ -98,30 +98,30 @@ const animationFeaturesData2 = [
         id: 1,
         title: 'Various Landing Pages',
         description: 'Choose from 9 templates for industries like SaaS, Travel, and Real Estate, each tailored to specific business needs.',
-        src: '/images/templates/genesis/animation-landing-pages.png'
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-landing-pages.png'
     },
     {
         id: 2,
         title: 'Secondary Pages',
         description: 'Includes essential pages like About, Pricing, Blog, and Contact for a complete user experience.',
-        src: '/images/templates/genesis/animation-second-pages.png'
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-second-pages.png'
     },
     {
         id: 3,
         title: 'Dark & Light Modes',
         description: 'Easily switch between Light and Dark modes to match your aesthetic preferences.',
-        src: '/images/templates/genesis/animation-dark-light-modes.png'
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-dark-light-modes.png'
     },
     {
         id: 4,
         title: 'Themes',
         description: 'Customize with 17 color themes to align with your brand effortlessly.',
-        src: '/images/templates/genesis/animation-menu-themes.png'
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-menu-themes.png'
     }
 ];
 
 const license = {
-    documentLink: 'https://diamond.primereact.org/documentation/',
+    documentLink: '',
     description: 'The download package is a NextJS-based project containing all application source codes deployed at the live demo. The project code is written in TypeScript.',
     showDiscount: false,
     licenseDetails: [
@@ -165,20 +165,20 @@ const GenesisSeperator = () => {
 
 const templateHeroData = {
     logo: <GenesisLogo />,
-    pattern: '/images/templates/genesis/hero-pattern.png',
-    dashboard1: '/images/templates/genesis/dashboard-2.png',
-    dashboard2: '/images/templates/genesis/dashboard-1.png',
-    description: 'Genesis, crafted by Prime, is the ultimate multipurpose landing template built with React and Next.js. It offers unmatched versatility and performance with a suite of example pages to elevate your projects.',
-    liveHref: 'https://diamond.primereact.org',
-    docHref: 'https://diamond.primereact.org/documentation',
+    pattern: 'https://primefaces.org/cdn/primereact/images/templates/genesis/hero-pattern.png',
+    dashboard1: 'https://primefaces.org/cdn/primereact/images/templates/genesis/dashboard-2.png',
+    dashboard2: 'https://primefaces.org/cdn/primereact/images/templates/genesis/dashboard-1.png',
+    description: 'Genesis, crafted by Prime, is the ultimate multi-purpose website template built with React and Next.js. It offers unmatched versatility and performance with a suite of example pages to elevate your projects.',
+    liveHref: 'https://genesis.primereact.org',
+    docHref: '',
     multipurpose: true
 };
 
 const GenesisPage = () => {
     const featuresAnimationTitle = <h2>Features</h2>;
 
     return (
-        <div className="diamond template">
+        <div className="genesis template">
             <TemplateHero {...templateHeroData} />
             <GenesisSeperator />
             <TemplateLicense license={license} />

diff --git a/pages/templates/index.js b/pages/templates/index.js
@@ -8,6 +8,28 @@ const TemplatesPage = () => {
                 <p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>
             </div>
 
+            <h2>Multi-Purpose Templates</h2>
+            <div className="grid">
+                <div className="col-12 lg:col-6 xl:col-4">
+                    <div className="card mb-0">
+                        <a href="https://genesis.primereact.org" rel="noopener noreferrer">
+                            <img alt="Genesis" src="https://primefaces.org/cdn/primereact/images/layouts/genesis-react.webp" className="w-full" />
+                        </a>
+                        <div className="flex gap-3 mt-3">
+                            <a href="https://genesis.primereact.org" className="flex-1 p-button p-component" rel="noopener noreferrer">
+                                <span className="p-button-label white-space-nowrap">Preview</span>
+                            </a>
+                            <Link href="/templates/genesis" rel="noopener noreferrer">
+                                <a className="flex-1 p-button p-component p-button-outlined">
+                                    <span className="p-button-label white-space-nowrap">Learn More</span>
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <h2>Admin Templates</h2>
             <div className="grid">
                 <div className="col-12 lg:col-6 xl:col-4">
                     <div className="card mb-0">

diff --git a/styles/layout/layout.scss b/styles/layout/layout.scss
@@ -21,6 +21,7 @@
 @import './templates/_freya';
 @import './templates/_verona';
 @import './templates/_diamond';
+@import './templates/_genesis';
 @import './templates/_avalon';
 @import './templates/_poseidon';
 @import './templates/_babylon';

diff --git a/styles/layout/templates/_diamond.scss b/styles/layout/templates/_diamond.scss
@@ -11,8 +11,8 @@
             }
         }
     }
-
 }
+
 @media only screen and (max-width: 1200px) {
     .diamond {
         .template{

diff --git a/styles/layout/templates/_genesis.scss b/styles/layout/templates/_genesis.scss
@@ -0,0 +1,45 @@
+.genesis {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 62.3125rem;
+                height: 44.8125rem;
+                position: absolute;
+                top: -3.62;
+                left: -3.06;
+                z-index: 6;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 1200px) {
+    .genesis {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 60rem;
+                    height: auto;
+                    bottom: -8rem;
+                    left: -8rem;
+                }
+            }
+        }
+
+    }
+}
+@media only screen and (max-width: 768px) {
+    .genesis {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 64rem;
+                    height: auto;
+                    bottom: 2rem;
+                    left: -8rem;
+                }
+            }
+        }
+
+    }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,8 +11,8 @@ @@
                 }
             }
         }
     }
     @media only screen and (max-width: 1200px) {
         .diamond {
             .template{
@@ Expand Down @@