Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
454c88e5dd |
@ -1,6 +1,5 @@
|
|||||||
import React, {useEffect, useRef} from 'react'
|
import React, {useEffect, useRef, useState} from 'react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { useState } from 'react'
|
|
||||||
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
||||||
import BaseDivider from './BaseDivider'
|
import BaseDivider from './BaseDivider'
|
||||||
import BaseIcon from './BaseIcon'
|
import BaseIcon from './BaseIcon'
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import React, { ReactNode, useEffect } from 'react'
|
import React, { ReactNode, useEffect, useState } from 'react'
|
||||||
import { useState } from 'react'
|
|
||||||
import jwt from 'jsonwebtoken';
|
import jwt from 'jsonwebtoken';
|
||||||
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
||||||
import menuAside from '../menuAside'
|
import menuAside from '../menuAside'
|
||||||
|
|||||||
@ -2,6 +2,11 @@ import * as icon from '@mdi/js';
|
|||||||
import { MenuAsideItem } from './interfaces'
|
import { MenuAsideItem } from './interfaces'
|
||||||
|
|
||||||
const menuAside: MenuAsideItem[] = [
|
const menuAside: MenuAsideItem[] = [
|
||||||
|
{
|
||||||
|
href: '/autoscroller',
|
||||||
|
icon: icon.mdiSpeedometer,
|
||||||
|
label: 'Autoscroller',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
href: '/dashboard',
|
href: '/dashboard',
|
||||||
icon: icon.mdiViewDashboardOutline,
|
icon: icon.mdiViewDashboardOutline,
|
||||||
|
|||||||
242
frontend/src/pages/autoscroller.tsx
Normal file
242
frontend/src/pages/autoscroller.tsx
Normal file
@ -0,0 +1,242 @@
|
|||||||
|
import { mdiPlay, mdiPause, mdiFullscreen, mdiArrowLeft, mdiArrowRight, mdiFormatSize, mdiSpeedometer, mdiFolderOpen } from '@mdi/js'
|
||||||
|
import Head from 'next/head'
|
||||||
|
import React, { ReactElement, useEffect, useRef, useState } from 'react'
|
||||||
|
import CardBox from '../components/CardBox'
|
||||||
|
import LayoutAuthenticated from '../layouts/Authenticated'
|
||||||
|
import SectionMain from '../components/SectionMain'
|
||||||
|
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
|
||||||
|
import { getPageTitle } from '../config'
|
||||||
|
import { useAppDispatch, useAppSelector } from '../stores/hooks'
|
||||||
|
import { fetch as fetchTexts } from '../stores/texts/textsSlice'
|
||||||
|
import { fetch as fetchFolders } from '../stores/folders/foldersSlice'
|
||||||
|
import BaseButton from '../components/BaseButton'
|
||||||
|
import BaseButtons from '../components/BaseButtons'
|
||||||
|
import BaseIcon from '../components/BaseIcon'
|
||||||
|
|
||||||
|
const AutoscrollerPage = () => {
|
||||||
|
const dispatch = useAppDispatch()
|
||||||
|
const texts = useAppSelector((state) => state.texts.texts)
|
||||||
|
const folders = useAppSelector((state) => state.folders.folders)
|
||||||
|
const [selectedTextId, setSelectedTextId] = useState<string | null>(null)
|
||||||
|
const [isPlaying, setIsPlaying] = useState(false)
|
||||||
|
const [speed, setSpeed] = useState(2)
|
||||||
|
const [fontSize, setFontSize] = useState(24)
|
||||||
|
const scrollRef = useRef<HTMLDivElement>(null)
|
||||||
|
const requestRef = useRef<number>()
|
||||||
|
|
||||||
|
const selectedText = texts.find((t: any) => t.id === selectedTextId)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(fetchTexts({}))
|
||||||
|
dispatch(fetchFolders({}))
|
||||||
|
}, [dispatch])
|
||||||
|
|
||||||
|
const scroll = () => {
|
||||||
|
if (scrollRef.current && isPlaying) {
|
||||||
|
scrollRef.current.scrollTop += speed / 2
|
||||||
|
}
|
||||||
|
requestRef.current = requestAnimationFrame(scroll)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
requestRef.current = requestAnimationFrame(scroll)
|
||||||
|
return () => {
|
||||||
|
if (requestRef.current) {
|
||||||
|
cancelAnimationFrame(requestRef.current)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [isPlaying, speed])
|
||||||
|
|
||||||
|
const toggleFullscreen = () => {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
document.documentElement.requestFullscreen()
|
||||||
|
} else {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextPage = () => {
|
||||||
|
if (scrollRef.current) {
|
||||||
|
scrollRef.current.scrollTop += scrollRef.current.clientHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const prevPage = () => {
|
||||||
|
if (scrollRef.current) {
|
||||||
|
scrollRef.current.scrollTop -= scrollRef.current.clientHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>{getPageTitle('Autoscroller')}</title>
|
||||||
|
</Head>
|
||||||
|
<SectionMain>
|
||||||
|
<SectionTitleLineWithButton icon={mdiSpeedometer} title='Autoscroller' main>
|
||||||
|
<BaseButtons>
|
||||||
|
<BaseButton
|
||||||
|
icon={mdiFullscreen}
|
||||||
|
color='whiteDark'
|
||||||
|
onClick={toggleFullscreen}
|
||||||
|
label='Fullscreen'
|
||||||
|
/>
|
||||||
|
</BaseButtons>
|
||||||
|
</SectionTitleLineWithButton>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-1 lg:grid-cols-4 gap-6'>
|
||||||
|
{/* Sidebar - Title Selection */}
|
||||||
|
<div className='lg:col-span-1 space-y-4'>
|
||||||
|
<CardBox className='h-full overflow-y-auto max-h-[70vh]'>
|
||||||
|
<div className='space-y-4'>
|
||||||
|
<div className='flex items-center space-x-2 text-gray-500 font-bold mb-2'>
|
||||||
|
<BaseIcon path={mdiFolderOpen} />
|
||||||
|
<span>Choose Title</span>
|
||||||
|
</div>
|
||||||
|
{folders.map((folder: any) => (
|
||||||
|
<div key={folder.id} className='space-y-1'>
|
||||||
|
<h3 className='text-xs font-semibold uppercase text-gray-400 px-2'>
|
||||||
|
{folder.name}
|
||||||
|
</h3>
|
||||||
|
<div className='space-y-1'>
|
||||||
|
{texts
|
||||||
|
.filter((t: any) => t.folderId === folder.id)
|
||||||
|
.map((text: any) => (
|
||||||
|
<button
|
||||||
|
key={text.id}
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedTextId(text.id)
|
||||||
|
setIsPlaying(false)
|
||||||
|
}}
|
||||||
|
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
|
||||||
|
selectedTextId === text.id
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'hover:bg-gray-100 text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{text.title}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{/* Texts without folders */}
|
||||||
|
{texts.filter((t: any) => !t.folderId).length > 0 && (
|
||||||
|
<div className='space-y-1 pt-2 border-t'>
|
||||||
|
<h3 className='text-xs font-semibold uppercase text-gray-400 px-2'>
|
||||||
|
Other
|
||||||
|
</h3>
|
||||||
|
{texts
|
||||||
|
.filter((t: any) => !t.folderId)
|
||||||
|
.map((text: any) => (
|
||||||
|
<button
|
||||||
|
key={text.id}
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedTextId(text.id)
|
||||||
|
setIsPlaying(false)
|
||||||
|
}}
|
||||||
|
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
|
||||||
|
selectedTextId === text.id
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'hover:bg-gray-100 text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{text.title}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Scroller Area */}
|
||||||
|
<div className='lg:col-span-3 flex flex-col space-y-4'>
|
||||||
|
{selectedText ? (
|
||||||
|
<>
|
||||||
|
<CardBox className='flex-1 flex flex-col p-0 overflow-hidden relative'>
|
||||||
|
<div className='p-4 border-b flex justify-between items-center bg-gray-50'>
|
||||||
|
<h2 className='font-bold text-lg'>{selectedText.title}</h2>
|
||||||
|
<div className='flex items-center space-x-4'>
|
||||||
|
<div className='flex items-center space-x-2'>
|
||||||
|
<BaseIcon path={mdiFormatSize} size={20} />
|
||||||
|
<input
|
||||||
|
type='range'
|
||||||
|
min='12'
|
||||||
|
max='72'
|
||||||
|
value={fontSize}
|
||||||
|
onChange={(e) => setFontSize(parseInt(e.target.value))}
|
||||||
|
className='w-24'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center space-x-2'>
|
||||||
|
<BaseIcon path={mdiSpeedometer} size={20} />
|
||||||
|
<input
|
||||||
|
type='range'
|
||||||
|
min='1'
|
||||||
|
max='20'
|
||||||
|
value={speed}
|
||||||
|
onChange={(e) => setSpeed(parseInt(e.target.value))}
|
||||||
|
className='w-24'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={scrollRef}
|
||||||
|
className='flex-1 overflow-y-auto p-8 bg-white selection:bg-yellow-200'
|
||||||
|
style={{ fontSize: `${fontSize}px`, lineHeight: '1.6' }}
|
||||||
|
>
|
||||||
|
<div className='max-w-4xl mx-auto whitespace-pre-wrap font-serif'>
|
||||||
|
{selectedText.content}
|
||||||
|
</div>
|
||||||
|
{/* Padding bottom to allow scrolling to the very end */}
|
||||||
|
<div className='h-[80vh]' />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='p-4 border-t flex justify-center items-center space-x-4 bg-gray-50'>
|
||||||
|
<BaseButton
|
||||||
|
icon={mdiArrowLeft}
|
||||||
|
color='whiteDark'
|
||||||
|
onClick={prevPage}
|
||||||
|
label='Prev'
|
||||||
|
/>
|
||||||
|
<BaseButton
|
||||||
|
icon={isPlaying ? mdiPause : mdiPlay}
|
||||||
|
color={isPlaying ? 'danger' : 'success'}
|
||||||
|
onClick={() => setIsPlaying(!isPlaying)}
|
||||||
|
label={isPlaying ? 'Pause' : 'Play'}
|
||||||
|
className='w-32'
|
||||||
|
/>
|
||||||
|
<BaseButton
|
||||||
|
icon={mdiArrowRight}
|
||||||
|
color='whiteDark'
|
||||||
|
onClick={nextPage}
|
||||||
|
label='Next'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<CardBox className='flex-1 flex items-center justify-center text-gray-400'>
|
||||||
|
<div className='text-center'>
|
||||||
|
<BaseIcon path={mdiPlay} size={64} className='mb-4 opacity-20' />
|
||||||
|
<p>Select a title from the menu to start scrolling</p>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SectionMain>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
AutoscrollerPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AutoscrollerPage
|
||||||
@ -1,161 +1,108 @@
|
|||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import type { ReactElement } from 'react';
|
import type { ReactElement } from 'react';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
|
||||||
import BaseButton from '../components/BaseButton';
|
import BaseButton from '../components/BaseButton';
|
||||||
import CardBox from '../components/CardBox';
|
import CardBox from '../components/CardBox';
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
import SectionFullScreen from '../components/SectionFullScreen';
|
||||||
import LayoutGuest from '../layouts/Guest';
|
import LayoutGuest from '../layouts/Guest';
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
import BaseButtons from '../components/BaseButtons';
|
||||||
import { getPageTitle } from '../config';
|
import { getPageTitle } from '../config';
|
||||||
import { useAppSelector } from '../stores/hooks';
|
import { useAppSelector } from '../stores/hooks';
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
import { mdiSpeedometer, mdiPlayCircleOutline } from '@mdi/js';
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
import { getPexelsImage } from '../helpers/pexels';
|
||||||
|
|
||||||
|
|
||||||
export default function Starter() {
|
export default function Starter() {
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
const [illustrationImage, setIllustrationImage] = useState<any>(null)
|
||||||
src: undefined,
|
|
||||||
photographer: undefined,
|
|
||||||
photographer_url: undefined,
|
|
||||||
})
|
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
|
||||||
const [contentType, setContentType] = useState('image');
|
|
||||||
const [contentPosition, setContentPosition] = useState('background');
|
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||||
|
|
||||||
const title = 'Autoscroller App'
|
const title = 'Autoscroller Pro'
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
const image = await getPexelsImage();
|
const image = await getPexelsImage();
|
||||||
const video = await getPexelsVideo();
|
|
||||||
setIllustrationImage(image);
|
setIllustrationImage(image);
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
}
|
||||||
fetchData();
|
fetchData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
|
||||||
<div
|
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
|
||||||
style={{
|
|
||||||
backgroundImage: `${
|
|
||||||
image
|
|
||||||
? `url(${image?.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
|
||||||
if (video?.video_files?.length > 0) {
|
|
||||||
return (
|
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
|
||||||
<video
|
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={video?.user?.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={
|
className="min-h-screen flex flex-col"
|
||||||
contentPosition === 'background'
|
style={{
|
||||||
? {
|
backgroundImage: illustrationImage ? `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(${illustrationImage.src?.large2x})` : 'linear-gradient(to bottom right, #1e293b, #0f172a)',
|
||||||
backgroundImage: `${
|
backgroundSize: 'cover',
|
||||||
illustrationImage
|
backgroundPosition: 'center',
|
||||||
? `url(${illustrationImage.src?.original})`
|
}}
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
<title>{getPageTitle('Home')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
<SectionFullScreen>
|
||||||
<div
|
<div className='flex items-center justify-center flex-col space-y-8 w-full px-6'>
|
||||||
className={`flex ${
|
<div className='text-center space-y-4 max-w-2xl'>
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
<div className='inline-flex items-center justify-center p-3 bg-blue-600 rounded-2xl shadow-lg mb-4'>
|
||||||
} min-h-screen w-full`}
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="white">
|
||||||
>
|
<path d={mdiSpeedometer} />
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
</svg>
|
||||||
? imageBlock(illustrationImage)
|
</div>
|
||||||
: null}
|
<h1 className="text-4xl md:text-6xl font-extrabold text-white tracking-tight">
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
Smooth <span className="text-blue-400">Autoscrolling</span> for Professionals
|
||||||
? videoBlock(illustrationVideo)
|
</h1>
|
||||||
: null}
|
<p className='text-lg md:text-xl text-gray-300'>
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
The ultimate tool for speakers, musicians, and readers. Organize your texts into folders, adjust speed in real-time, and read with comfort.
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
</p>
|
||||||
<CardBoxComponentTitle title="Welcome to your Autoscroller App app!"/>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-3">
|
<CardBox className='w-full max-w-md bg-white/10 backdrop-blur-md border-white/20 shadow-2xl'>
|
||||||
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
<div className="space-y-6 py-4 text-center">
|
||||||
<p className='text-center text-gray-500'>For guides and documentation please check
|
<p className='text-white/80 font-medium'>Ready to start your session?</p>
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BaseButtons>
|
<BaseButtons type="justify-center">
|
||||||
<BaseButton
|
<BaseButton
|
||||||
href='/login'
|
href='/autoscroller'
|
||||||
label='Login'
|
label='Open Autoscroller'
|
||||||
color='info'
|
color='info'
|
||||||
className='w-full'
|
icon={mdiPlayCircleOutline}
|
||||||
/>
|
className='px-8 py-3 rounded-xl text-lg font-bold'
|
||||||
|
/>
|
||||||
|
</BaseButtons>
|
||||||
|
|
||||||
</BaseButtons>
|
<div className="flex justify-center space-x-4 pt-4 border-t border-white/10">
|
||||||
</CardBox>
|
<BaseButton
|
||||||
</div>
|
href='/login'
|
||||||
</div>
|
label='Sign In'
|
||||||
|
color='whiteDark'
|
||||||
|
className='text-sm'
|
||||||
|
/>
|
||||||
|
<BaseButton
|
||||||
|
href='/register'
|
||||||
|
label='Register'
|
||||||
|
color='whiteDark'
|
||||||
|
className='text-sm'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
|
||||||
|
{illustrationImage && (
|
||||||
|
<div className='absolute bottom-10 right-10 hidden md:block'>
|
||||||
|
<a
|
||||||
|
className='text-[10px] text-white/40 hover:text-white/60 transition-colors'
|
||||||
|
href={illustrationImage.photographer_url}
|
||||||
|
target='_blank'
|
||||||
|
rel='noreferrer'
|
||||||
|
>
|
||||||
|
Photo by {illustrationImage.photographer} on Pexels
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</SectionFullScreen>
|
</SectionFullScreen>
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
|
||||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
|
||||||
Privacy Policy
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<footer className='mt-auto py-8 text-center text-white/40 text-sm'>
|
||||||
|
<p>© 2026 {title}. All rights reserved.</p>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -163,4 +110,3 @@ export default function Starter() {
|
|||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user