Squashed commit of the following:

commit 35072c7 Author: Toprak Koç <hello@toprak.dev> Date: Tue Jan 9 17:33:54 2024 +0300 updated apollo hero background commit e1b0d78 Author: Toprak Koç <hello@toprak.dev> Date: Tue Jan 9 17:13:41 2024 +0300 Renamed folder commit 8993432 Author: Toprak Koç <hello@toprak.dev> Date: Tue Jan 9 17:06:40 2024 +0300 Refactored promo pages commit 5768735 Author: tanerengiiin <tanerengin4444@gmail.com> Date: Thu Dec 28 10:09:46 2023 +0300 Fix Apollo hero dashboard commit 3fd4072 Author: tanerengiiin <tanerengin4444@gmail.com> Date: Mon Dec 25 22:57:52 2023 +0300 Add spesific content commit ca99021 Author: tanerengiiin <tanerengin4444@gmail.com> Date: Fri Dec 22 19:29:13 2023 +0300 Fix 4 on orders, Add dark mode hero commit 31f428f Author: tanerengiiin <tanerengin4444@gmail.com> Date: Thu Dec 21 19:59:15 2023 +0300 Add water animation commit 715b373 Author: tanerengiiin <tanerengin4444@gmail.com> Date: Thu Dec 21 14:44:15 2023 +0300 Fix responsive commit 0506419 Author: tanerengiiin <tanerengin4444@gmail.com> Date: Thu Dec 21 12:13:19 2023 +0300 Fix some errors and Features type 2 commit b2caf78 Author: tanerengiiin <tanerengin4444@gmail.com> Date: Tue Dec 12 12:17:01 2023 +0300 Fix color of lights commit 47a0305 Author: tanerengiiin <tanerengin4444@gmail.com> Date: Mon Dec 11 01:30:41 2023 +0300 Fix Responsive Hero commit 41fb637 Author: tanerengiiin <tanerengin4444@gmail.com> Date: Sat Dec 9 13:08:21 2023 +0300 Switch to primary colors commit 028bf93 Author: tanerengiiin <tanerengin4444@gmail.com> Date: Thu Dec 7 15:01:44 2023 +0300 Done for all templates, Need water animation commit 630ff85 Author: tanerengiiin <tanerengin4444@gmail.com> Date: Wed Dec 6 22:02:43 2023 +0300 Done by structurally commit bf1030f Author: tanerengiiin <tanerengin4444@gmail.com> Date: Sat Dec 2 16:16:39 2023 +0300 Add Templates' components commit c7d9a00 Author: ATAKAN TEPE <tepe_atakan@outlook.com> Date: Sun Nov 26 12:39:04 2023 +0300 initiate templates pages (apollo)
primefaces · Jan 9, 2024 · 84e728a · 84e728a
1 parent d597d23
commit 84e728a
Show file tree

Hide file tree

Showing 172 changed files with 3,513 additions and 6 deletions.
diff --git a/components/templates/TemplateConfiguration.js b/components/templates/TemplateConfiguration.js
@@ -0,0 +1,35 @@
+import React from 'react'
+
+const TemplateConfiguration = ({
+    title = "",
+    description = "",
+}) => {
+    return (
+        <div className="template-configuration-wrapper">
+            <div className="template-configuration">
+                <div className="template-configuration-screen">
+                    <div className="template-configuration-screen-top">
+                        <div className="template-configuration-screen-top-close template-configuration-screen-top-circle"></div>
+                        <div className="template-configuration-screen-top-minimize template-configuration-screen-top-circle"></div>
+                        <div className="template-configuration-screen-top-zoom template-configuration-screen-top-circle"></div>
+                    </div>
+                    <div className="template-configuration-screen-bottom">
+                        <p>
+                            &gt;npm install <span className="text-gray-500">or yarn</span>
+                        </p>
+                        <p>
+                            &gt;npm run dev <span className="text-gray-500">or yarn dev</span>
+                        </p>
+                        <br />
+                        <br />
+                        <img className="template-configuration-screen-bottom-logo" src={'/images/templates/react-3d-logo.png'} alt="Angular 3D Logo" />
+                    </div>
+                </div>
+                <h3 className="template-configuration-title">{title}</h3>
+                <p className="template-configuration-description">{description}</p>
+            </div>
+        </div>
+    );
+}
+
+export default TemplateConfiguration
diff --git a/components/templates/TemplateFeatures.js b/components/templates/TemplateFeatures.js
@@ -0,0 +1,54 @@
+import React from 'react';
+
+const TemplateFeatures = ({ featuresData, displayType }) => {
+    const renderHorizontalFeatures = () => {
+        return (
+            <div className="template-features-horizontal-wrapper">
+                <div className="template-features-horizontal">
+                    {featuresData.map((data, i) => (
+                        <div key={i} className="template-features-horizontal-card">
+                            <div className="template-features-horizontal-card-top">
+                                <img src={data.src} alt={data.title}></img>
+                            </div>
+                            <div className="template-features-horizontal-card-bottom">
+                                <h5 className="template-features-horizontal-card-bottom-title">{data.title}</h5>
+                                <p className="template-features-horizontal-card-bottom-description">{data.description}</p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    };
+
+    const renderVerticalFeatures = () => {
+        const firstColumnData = featuresData.slice(0, Math.ceil(featuresData.length / 2));
+        const secondColumnData = featuresData.slice(Math.ceil(featuresData.length / 2));
+
+        return (
+            <div className="template-features-vertical-wrapper">
+                <div className="template-features-vertical">
+                    {Array(2)
+                        .fill(null)
+                        .map((_, i) => (
+                            <div key={i} className="template-features-vertical-col">
+                                {(i === 0 ? firstColumnData : secondColumnData).map((data, j) => (
+                                    <div key={j} className={`template-features-vertical-card `}>
+                                        <div className="template-features-vertical-card-image">
+                                            <img src={data.src} alt={data.title} />
+                                        </div>
+                                        <h2>{data.title}</h2>
+                                        <p>{data.description}</p>
+                                    </div>
+                                ))}
+                            </div>
+                        ))}
+                </div>
+            </div>
+        );
+    };
+
+    return <div className="template-features">{displayType === 'vertical' ? renderVerticalFeatures() : renderHorizontalFeatures()}</div>;
+};
+
+export default TemplateFeatures;
diff --git a/components/templates/TemplateRelated.js b/components/templates/TemplateRelated.js
@@ -0,0 +1,20 @@
+import React from 'react'
+
+const TemplateRelated = ({ relatedData }) => {
+    return (
+        <div className="template-related-wrapper">
+            <div className="template-related">
+                <h2 className="template-related-title">Related Layouts</h2>
+                <div className="template-related-slide">
+                    {relatedData.map((data, i) => (
+                        <a href={data.href} key={i} className="template-related-slide-card">
+                            <img src={data.src} alt={'Related Image ' + i} />
+                        </a>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default TemplateRelated
diff --git a/components/templates/TemplateSeparator.js b/components/templates/TemplateSeparator.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const TemplateSeparator = ({ separatorLogo }) => {
+    return (
+        <div className="template-seperator">
+            <span className="template-seperator-icon">{separatorLogo}</span>
+        </div>
+    );
+}
+
+export default TemplateSeparator
diff --git a/components/templates/TemplateYoutube.js b/components/templates/TemplateYoutube.js
@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+import { Dialog } from '../lib/primereact.all'
+
+const PlayIcon = React.memo(() => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" fill="none">
+        <g filter="url(#filter0_d_918_49700)">
+            <rect x="50" y="46" width="80" height="80" rx="40" fill="white" />
+            <rect x="50.5" y="46.5" width="79" height="79" rx="39.5" stroke="#DFE7EF" />
+            <path
+                d="M103.062 84.7896C104.085 85.5904 104.085 87.1386 103.062 87.9394L85.3123 101.834C83.9995 102.862 82.0795 101.926 82.0795 100.259L82.0795 72.47C82.0795 70.8028 83.9995 69.8674 85.3123 70.8951L103.062 84.7896Z"
+                fill="var(--primary-400)"
+            />
+        </g>
+        <defs>
+            <filter id="filter0_d_918_49700" x="0" y="0" width="180" height="180" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                <feOffset dy="4" />
+                <feGaussianBlur stdDeviation="25" />
+                <feComposite in2="hardAlpha" operator="out" />
+                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_918_49700" />
+                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_918_49700" result="shape" />
+            </filter>
+        </defs>
+    </svg>
+));
+
+const TemplateYoutube = ({
+    imgSrc,
+    title = ['Integration with', 'Existing Vite Applications'],
+    description = 'Only the folders that are related to the layout needs to move in to your project. We‘ve already created a short tutorial with details for Sakai Vue. The both templates have the same implementation.',
+    youtubeLink = 'https://www.youtube.com/embed/Y07edRJd5QM'
+}) => {
+    const [youtubeVideoVisible, setYoutubeVideoVisible] = useState(false);
+
+    return (
+        <div className="template-youtube-wrapper">
+            <div className="template-youtube">
+                <div className="template-youtube-title">
+                    {title.map((data, i) => (
+                        <h2 key={i}>{data}</h2>
+                    ))}
+                </div>
+                <div className="template-youtube-description">{description}</div>
+                <div className="template-youtube-screen" onClick={() => setYoutubeVideoVisible(true)}>
+                    <div className="template-youtube-screen-blur">
+                        <div className="template-youtube-screen-play">
+                            <PlayIcon />
+                        </div>
+                    </div>
+                    <img src={imgSrc} alt="Template Youtube Screen" />
+                </div>
+                <Dialog header="Video Content" visible={youtubeVideoVisible} style={{ width: '70vw' }} onHide={() => setYoutubeVideoVisible(false)}>
+                    <div className="template-youtube-video">
+                        <iframe src={youtubeLink} title="PrimeNG 2023 Roadmap" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                    </div>
+                </Dialog>
+            </div>
+        </div>
+    );
+};
+
+export default TemplateYoutube
diff --git a/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js b/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js
@@ -0,0 +1,27 @@
+import React, { useRef } from 'react'
+import useAnimatedFeatures from './useAnimatedFeatures';
+
+const TemplateFeaturesAnimationInline = ({ inlineFeaturesData, parentHandleClick, parentID , inlineSeconds =1000 }) => {
+    const animationInlineRef = useRef(null)
+    const { selectedID, handleClick } = useAnimatedFeatures(animationInlineRef, inlineFeaturesData.length, inlineSeconds);
+
+    const handleBtnClick = (id) => {
+        handleClick(id)
+        parentHandleClick(parentID)
+    }
+
+    return (
+        <div className='template-features-animation-right-inline' ref={animationInlineRef}>
+            <div className='template-features-animation-right-inline-tabs'>
+                {inlineFeaturesData.map((data, i) => (
+                    <button className={`${!!(data.id === selectedID) && "template-features-animation-right-inline-tabs-btnActive"}`} onClick={() => handleBtnClick(data.id)} key={i}>{data.title}</button>
+                ))}
+            </div>
+            <div className='template-features-animation-right-inline-image'>
+                <img src={inlineFeaturesData[selectedID - 1].src} alt='Animation Inline Feature Image' />
+            </div>
+        </div>
+    )
+}
+
+export default TemplateFeaturesAnimationInline
diff --git a/components/templates/templateFeaturesAnimation/index.js b/components/templates/templateFeaturesAnimation/index.js
@@ -0,0 +1,49 @@
+import React, { useRef } from 'react'
+import useAnimatedFeatures from './useAnimatedFeatures';
+import TemplateFeaturesAnimationInline from './TemplateFeaturesAnimationInline';
+
+const TemplateFeaturesAnimation = ({ featuresData, title, animationSeconds = 5000 }) => {
+    const animationRef = useRef(null)
+    const { selectedID, handleClick } = useAnimatedFeatures(animationRef, featuresData.length, animationSeconds);
+
+    return (
+        <div className="template-features-animation-wrapper">
+            {!!title && <div className="template-features-animation-title">{title}</div>}
+            <div className="template-features-animation" ref={animationRef}>
+                <div className="template-features-animation-left">
+                    {featuresData.map((data, i) => {
+                        const orderNumber = (i + 1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false });
+
+                        return (
+                            <div key={i} className={`template-features-animation-left-card ${selectedID === data.id ? 'template-features-animation-left-card-active' : ''}`} onClick={() => handleClick(data.id)}>
+                                <div className="template-features-animation-left-card-order">
+                                    <div>{orderNumber}</div>
+                                    <div>{orderNumber}</div>
+                                    <div>{orderNumber}</div>
+                                </div>
+                                <div className="template-features-animation-left-card-content">
+                                    <h5>{data.title}</h5>
+                                    <p>{data.description}</p>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+                <div className="template-features-animation-right">
+                    {featuresData[selectedID - 1]?.type === 'inline-animation' ? (
+                        <TemplateFeaturesAnimationInline
+                            inlineFeaturesData={featuresData[selectedID - 1]?.inlineFeaturesData}
+                            parentHandleClick={handleClick}
+                            parentID={selectedID}
+                            inlineSeconds={animationSeconds / featuresData[selectedID - 1]?.inlineFeaturesData.length}
+                        />
+                    ) : (
+                        <img src={featuresData[selectedID - 1]?.src} alt="Animation Feature Image" />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default TemplateFeaturesAnimation
diff --git a/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
@@ -0,0 +1,44 @@
+// useAnimatedFeatures.js
+import React, { useEffect, useState } from "react";
+import useVisible from "./useVisible";
+
+const useAnimatedFeatures = (animationRef, arrayLength, seconds = 5000) => {
+    const [selectedID, setSelectedID] = useState(1);
+    const [intervalIds, setIntervalIds] = useState([]);
+    const isVisible = useVisible(animationRef);
+
+    const clearAllIntervals = () => {
+        if (intervalIds.length <= 0) return;
+        intervalIds.forEach(intervalId => window.clearInterval(intervalId));
+        setIntervalIds([]);
+    };
+
+    const createInterval = () => {
+        const interval = setInterval(() => {
+            setSelectedID(prev => (prev === arrayLength ? 1 : prev + 1));
+        }, seconds);
+
+        setIntervalIds(prev => [...prev, interval]);
+    }
+
+    const handleClick = cardId => {
+        clearAllIntervals();
+        setSelectedID(cardId);
+        createInterval()
+    };
+
+    useEffect(() => {
+        clearAllIntervals();
+
+        if (isVisible) {
+            createInterval()
+        } else {
+            clearAllIntervals();
+            setSelectedID(1)
+        }
+    }, [animationRef, isVisible]);
+
+    return { selectedID, handleClick };
+};
+
+export default useAnimatedFeatures;
diff --git a/components/templates/templateFeaturesAnimation/useVisible.js b/components/templates/templateFeaturesAnimation/useVisible.js
@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+
+const useVisible = (element, rootMargin = 0.2) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                setIsVisible(entry.isIntersecting);
+            },
+            { threshold: rootMargin },
+        );
+
+        if (element.current) {
+            observer.observe(element.current);
+        }
+
+        return () => {
+            if (observer && element.current) {
+                observer.unobserve(element.current)
+            }
+        }
+
+    }, []);
+
+    return isVisible;
+};
+
+export default useVisible;
diff --git a/components/templates/templateHero/TemplateHero.js b/components/templates/templateHero/TemplateHero.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import TemplateHeroRectangle from './TemplateHeroRectangle'
+import TemplateHeroLight from './TemplateHeroLight'
+
+const TemplateHero = ({ logo, pattern, rectangle, light, dashboard1, dashboard2, description, liveHref, docHref }) => {
+    return (
+        <div className="template-hero">
+            {!!pattern && <img className="template-hero-pattern" src={pattern} alt="Template Hero Pattern" />}
+            {!!light && <TemplateHeroLight />}
+            {!!rectangle && <TemplateHeroRectangle />}
+            <div className="template-hero-card">
+                <div className="template-hero-card-logo ">{logo}</div>
+                <p>{description}</p>
+                <div className="template-hero-card-buttons">
+                    <a href={liveHref} target="_blank" className="template-hero-card-buttons-btn1 p-button ">
+                        Live Demo
+                    </a>
+                    <a href="https://www.primefaces.org/store/" target="_blank" className="template-hero-card-buttons-btn2 p-button">
+                        Buy Now
+                    </a>
+                </div>
+                <div className="template-hero-card-links ">
+                    <a href="https://github.com/orgs/primefaces/discussions/categories/primereact-templates" target="_blank">
+                        <i className="pi pi-github " style={{ fontSize: '1rem' }}></i>
+                        <span>Get Support</span>
+                    </a>
+                    <a href={docHref} target="_blank">
+                        <i className="pi pi-book " style={{ fontSize: '1rem' }}></i>
+                        <span>Read Doc</span>
+                    </a>
+                </div>
+            </div>
+            {!!dashboard1 && <img className="template-hero-dashboard1" src={dashboard1} alt="Template Dashboard Image 1" />}
+            {!!dashboard2 && <img className="template-hero-dashboard2" src={dashboard2} alt="Template Dashboard Image 2" />}
+        </div>
+    );
+};
+
+export default TemplateHero