-
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e860f68
commit 9115caa
Showing
12 changed files
with
656 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,13 @@ | ||
| import { LandingPage } from '@components/LandingPage'; | ||
| import { DemoPage } from '@components/DemoPage'; | ||
| import { PageLayout } from '@layouts/PageLayout'; | ||
| import type { NextPageIntlayer } from 'next-intlayer'; | ||
| import { generateMetadata } from './metadata'; | ||
|
|
||
| export { generateMetadata }; | ||
|
|
||
| const Page: NextPageIntlayer = ({ params: { locale } }) => ( | ||
| <PageLayout locale={locale}>{''}</PageLayout> | ||
| <PageLayout locale={locale}> | ||
| <DemoPage /> | ||
| </PageLayout> | ||
| ); | ||
| export default Page; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| 'use client'; | ||
|
|
||
| import { motion } from 'framer-motion'; | ||
| import type { FC, HTMLAttributes, ReactNode } from 'react'; | ||
|
|
||
| type AnimatedDivProps = { | ||
| children?: ReactNode; | ||
| } & Pick<HTMLAttributes<HTMLDivElement>, 'className'>; | ||
|
|
||
| export const AnimatedDiv: FC<AnimatedDivProps> = ({ children, ...props }) => ( | ||
| <motion.div | ||
| initial={{ opacity: 0, translateY: '100px' }} | ||
| whileInView={{ opacity: 1, translateY: '0px' }} | ||
| viewport={{ once: false }} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </motion.div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| 'use client'; | ||
|
|
||
| import { motion } from 'framer-motion'; | ||
| import React, { type HTMLAttributes, type FC } from 'react'; | ||
|
|
||
| type AnimatedDescriptionProps = Pick< | ||
| HTMLAttributes<HTMLParagraphElement>, | ||
| 'className' | 'children' | ||
| >; | ||
|
|
||
| // AnimatedCharacters | ||
| // Handles the deconstruction of each word and character to setup for the | ||
| // individual character animations | ||
| export const AnimatedTitle: FC<AnimatedDescriptionProps> = ({ | ||
| children, | ||
| ...props | ||
| }) => ( | ||
| <motion.p | ||
| initial={{ opacity: 0 }} | ||
| whileInView={{ opacity: 1 }} | ||
| viewport={{ once: false }} | ||
| transition={{ | ||
| delay: 0.8, | ||
| }} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </motion.p> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| 'use client'; | ||
|
|
||
| import Image from 'next/image'; | ||
| import { useIntlayer } from 'next-intlayer'; | ||
| import { useTheme } from 'next-themes'; | ||
| import type { FC } from 'react'; | ||
| import DarkScreenshot from './assets/dark-screenshot.png'; | ||
| import LightScreenshot from './assets/light-screenshot.png'; | ||
|
|
||
| export const AsideImage: FC = () => { | ||
| const { theme } = useTheme(); | ||
| const { imageAlt } = useIntlayer('demo-page'); | ||
|
|
||
| const src = theme === 'dark' ? LightScreenshot : DarkScreenshot; | ||
|
|
||
| return <Image src={src} alt={imageAlt.value} />; | ||
| }; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { t, type DeclarationContent } from 'intlayer'; | ||
|
|
||
| const demoContent: DeclarationContent = { | ||
| id: 'demo-page', | ||
| title: t({ | ||
| fr: 'Essayez le nouvel éditeur visuel Intlayer', | ||
| en: 'Try the new Intlayer visual editor', | ||
| es: 'Pruebe el nuevo editor visual de Intlayer', | ||
| }), | ||
| landingParagraph: t({ | ||
| fr: 'Déléguez la gestion de votre contenu à vos équipes en transformant votre application en CMS en un clique.', | ||
| en: 'Delegate content management to your teams by transforming your application into a CMS with a single click.', | ||
| es: 'Delegue la gestión de su contenido a sus equipos transformando su aplicación en un CMS con un solo clic.', | ||
| }), | ||
| imageAlt: t({ | ||
| fr: "Capture d'écran de l'éditeur Intlayer", | ||
| en: 'Screenshort of the Intlayer editor', | ||
| es: 'Captura de pantalla del editor de Intlayer', | ||
| }), | ||
|
|
||
| tutoParagraphs: [ | ||
| { | ||
| title: t({ | ||
| fr: 'Sélectionnez le contenu à modifier', | ||
| en: 'Hover over the content to be modified', | ||
| es: 'Pase el cursor sobre el contenido a modificar', | ||
| }), | ||
| description: t({ | ||
| fr: "Exercez un clic prolongé pour faire apparaître l'éditeur visuel. Le panneau d'édition s'étend de la droite et met en évidence le contenu sélectionné pour édition.", | ||
| en: 'Press and hold to make the visual editor appear. The editing panel extends from the right, highlighting the content selected for editing.', | ||
| es: 'Mantenga presionado para que aparezca el editor visual. El panel de edición se extiende desde la derecha y resalta el contenido seleccionado para editar.', | ||
| }), | ||
| }, | ||
| { | ||
| title: t({ | ||
| fr: 'Faites vos modifications en remplaçant le texte concerné', | ||
| en: 'Make your modifications by replacing the relevant text', | ||
| es: 'Realice sus modificaciones reemplazando el texto correspondiente', | ||
| }), | ||
| description: t({ | ||
| fr: "Le texte mis en évidence dans le panneau d'édition peut être modifié ou remplacé à guise. Les modifications apparaîtront instantanément sur la page principale, facilitant la révision du contenu. Pour annuler les changements apportés, cliquez sur la croix.", | ||
| en: 'The highlighted text in the editing panel can be modified or replaced at will. The changes will appear instantly on the main page, making it easy to review the content. To undo the changes made, click on the cross.', | ||
| es: 'El texto resaltado en el panel de edición puede modificarse o reemplazarse a voluntad. Los cambios aparecerán instantáneamente en la página principal, facilitando la revisión del contenido. Para deshacer los cambios realizados, haga clic en la cruz.', | ||
| }), | ||
| }, | ||
| { | ||
| title: t({ | ||
| fr: 'Validez vos changements', | ||
| en: 'Confirm your changes', | ||
| es: 'Confirme sus cambios', | ||
| }), | ||
| description: t({ | ||
| fr: 'Une fois vos changements effectués, validez les modifications apportées au champ concerné, puis validez les changements apportés au dictionnaire. Lorsque les changements apportés au dictionnaire sont validés, Intlayer écrira les modifications dans le fichier concerné.', | ||
| en: 'Once your changes are made, validate the modifications made to the relevant field, then confirm the changes made to the dictionary. When the changes to the dictionary are validated, Intlayer will write the modifications to the relevant file.', | ||
| es: 'Una vez realizados los cambios, valide las modificaciones hechas en el campo correspondiente, luego confirme los cambios hechos en el diccionario. Cuando se validen los cambios en el diccionario, Intlayer escribirá las modificaciones en el archivo correspondiente.', | ||
| }), | ||
| }, | ||
| ], | ||
|
|
||
| tryItByYourself: { | ||
| title: t({ | ||
| fr: 'Essayez-le par vous-même', | ||
| en: 'Try it by yoursef', | ||
| es: 'Pruébelo usted mismo', | ||
| }), | ||
| }, | ||
| }; | ||
|
|
||
| export default demoContent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { useIntlayer } from 'next-intlayer/server'; | ||
| import type { FC } from 'react'; | ||
| import { AnimatedDiv } from './AnimatedDiv'; | ||
| import { AnimatedTitle } from './AnimatedTitle'; | ||
| import { AsideImage } from './AsideImage'; | ||
|
|
||
| export const DemoPage: FC = () => { | ||
| const { title, landingParagraph, tutoParagraphs } = useIntlayer('demo-page'); | ||
|
|
||
| return ( | ||
| <div className="m-auto flex w-full flex-col p-20 md:size-full"> | ||
| <div className="flex h-[70vh] w-full flex-col items-center gap-10"> | ||
| <div className="max-w-[500px]"> | ||
| <AsideImage /> | ||
| </div> | ||
| <div> | ||
| <AnimatedTitle className="mb-3 mt-24 text-4xl font-bold"> | ||
| {title} | ||
| </AnimatedTitle> | ||
| <p className="text-neutral text-md">{landingParagraph}</p> | ||
| </div> | ||
| </div> | ||
| <div className="relative mx-auto my-10 flex max-w-[700px] flex-col gap-28"> | ||
| {tutoParagraphs.map((paragraph, index) => ( | ||
| <AnimatedDiv key={index} className="flex gap-10"> | ||
| <span className="flex size-12 shrink-0 items-center justify-center rounded-full border-4 border-lime-300 text-xl font-black text-lime-800 dark:border-lime-900 dark:text-lime-600"> | ||
| <span>{index + 1}</span> | ||
| </span> | ||
| <div> | ||
| <h3 className="mb-2 text-lg font-semibold">{paragraph.title}</h3> | ||
| <p className="text-neutral text-sm">{paragraph.description}</p> | ||
| </div> | ||
| </AnimatedDiv> | ||
| ))} | ||
| </div> | ||
|
|
||
| {/* <h2>{tryItByYourself.title}</h2> */} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.