Create "where we are" and news pages

This commit is contained in:
Daniele Pancottini 2023-01-14 21:46:57 +01:00
parent 30b172cf29
commit 350390f3b8
7 changed files with 381 additions and 66 deletions

View File

@ -41,31 +41,6 @@ export default function AboutSlider() {
const { locale } = useRouter() const { locale } = useRouter()
// This list contains all the data for carousels
// This can be static or loaded from a server
/*
const cards = [
{
title: 'Storia del Mercato',
text: `Ciò che è sempre stato alla base del progresso della civiltà umana è lo scambio (di beni, di idee, di conoscenze). In età neolitica avveniva sotto forma di baratto. Nell'antichità e per tutto il Medioevo i principali canali di scambio erano il mercato, in genere allestito nelle piazze delle città e la fiera, imponente evento commerciale. Il mercato giornaliero, settimanale o mensile, vivacizzava la città e provvedeva alle esigenze della popolazione; era il luogo dello scambio tra la produzione dell'artigianato urbano e quella agricola. La fiera era un evento periodico, suddiviso in più circuiti predeterminati, dove tanti operatori economici convergevano per scambiarsi in natura, in moneta o tramite titoli di credito, beni in quantità consistenti; non mancavano le agevolazioni fiscali per i mercanti stranieri che vi convenivano. Ma la fiera era caratterizzata anche per il clima di confusione e festività; accadeva di tutto: circolazione di persone, di merci e cultura, spettacoli, giochi d'azzardo, reliquie di santi in bella mostra. Mentre l'attività produttiva (e a volte anche commerciale) del mercante, così come dell'artigiano si svolgeva nella bottega. Fino ai primi decenni del XVII secolo le fiere erano il principale canale di scambio commerciale e connotavano i territori entro le quali raggiungevano la loro fortuna. Con l'avvento dell'industrializzazione si afferma in Europa e nel mondo il sistema capitalistico di produzione: le botteghe artigiane diventano grandi fabbriche, le fiere tradizionali sono meno affollate e meno rinomate, divenendo sempre più sbocco di derrate agricole, e lasciando spazio a un nuovo tipo di fiera: la fiera campionaria, il cui massimo esempio è rappresentato dallesposizione nazionale e universale. Nella città nascono gli spazi rispondenti alle nuove produzioni industriali e ai nuovi consumi: i passages, le gallerie, i grandi magazzini, gli antenati dell'odierno centro commerciale, tempio dell'attuale società consumistica del XXI secolo. Oggi sia i centri commerciali che le fiere specializzate (miranti ai singoli comparti dell'industria) sono gli attori fondamentali nel sistema di distribuzione delle novità introdotte dal grande mercato, propongono nuove idee e nuovi modelli di comportamento e consumo e, facilitando anche un'omologazione degli stessi, rispondono alle nuove dinamiche della globalizzazione. Se essi proliferano e riempiono il tessuto urbano, centrale o periferico, nei borghi e nei paesi, si trovano ancora le manifestazioni tipiche della sagra, del mercatino, della piccola fiera, della mostra a tema. Questi piccoli eventi preservano una cultura e una tradizione locali, talvolta ancora espressione della vita artigianale, attenuando il fenomeno della globalizzazione. In particolare il mercatino (agenzia d'affari) può essere strutturato come manifestazione periodica o avente una propria sede fissa. Rimane il luogo in cui possono rinvenirsi oggetti particolari, testimonianza del passato (più o meno recente) e non delle novità industriali.`,
image:
'https://images.unsplash.com/photo-1516796181074-bf453fbfa3e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDV8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
},
{
title: 'Iniziativa',
text: `Se è vero che oggi sia i grandi centri commerciali che questi piccoli eventi sono fenomeni culturali (i primi riguardanti la cultura attuale, globale, di massa, i secondi quella passata), sono luoghi d'intrattenimento e svago, hanno entrambi carattere di coinvolgimento emotivo e grande varietà e assortimento merceologico, è anche vero che gli ultimi sono organizzati esponendo le merci tuttalpiù per generi, settori. I titolari, attenti soprattutto al valore economico del bene usato, possono limitarsi a fornire ai visitatori informazioni basilari sugli stessi, non soddisfacendo mai completamente un ipotetico arricchimento culturale dei propri clienti. Ecco l'ipotesi di una nuova formula di agenzia d'affari che aspiri a essere un'esposizione a tema (come la fiera e la mostra a tema) e allo stesso tempo avere grande varietà e assortimento di culture e generi, il tutto ordinato in un disegno che susciti emozioni e fornisca al cliente la massima trasmissione culturale che può scaturire dall'osservazione di prodotti usati; ridia vita alle merci, ricordandosi delle culture e tradizioni locali (oggi più che mai in pericolo) e sia attenta alle urgenti istanze di ecologia, riuso e sostenibilità. Safara è uno spazio innovativo che espone prodotti datati come un normale mercatino, ma li reinserisce nella loro "cornice" originaria, affianco ad oggetti e simboli dello stesso periodo storico. È costituita da un percorso ramificato in più "fermate", ognuna delle quali rappresenti un decennio del 900. Perfino ogni singolo oggetto racconterà in breve la sua storia. Se ciò che è sempre stato alla base del progresso della civiltà umana è lo scambio, è ancora attraverso esso che Safara fornisce un elemento di diversificazione rispetto agli altri attori dellusato. Riutilizzando la visione ancestrale del commercio basata sul baratto, e adattandola in chiave moderna, assieme ad altri servizi unici, Safara è davvero unagenzia unica nel suo genere. Pensiamo inoltre che lidea possa costituire un supporto utile come completamento di altra manifestazione locale.`,
image:
'https://images.unsplash.com/photo-1438183972690-6d4658e3290e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2274&q=80',
},
{
title: 'Chi Siamo',
text: `Safara è un'agenzia d'affari, più nota con il termine di mercatino dell'usato, che a differenza dei concorrenti, affianca all'offerta commerciale un'offerta culturale, tentando parallelamente di valorizzare la sua regione di provenienza e di fornirle un servizio utile, soprattutto in un periodo storico delicatissimo per il pianeta intero.`,
image:
'https://images.unsplash.com/photo-1507237998874-b4d52d1dd655?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
},
]
*/
const cards = aboutJson[locale as keyof typeof aboutJson] const cards = aboutJson[locale as keyof typeof aboutJson]
return ( return (

View File

@ -0,0 +1,128 @@
import React from 'react'
import {
Box,
IconButton,
useBreakpointValue,
Stack,
Heading,
Text,
Container,
} from '@chakra-ui/react'
// Here we have used react-icons package for the icons
import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi'
// And react-slick as our Carousel Lib
import Slider from 'react-slick'
import newsJson from '../../../static_data/news.json'
import { useRouter } from 'next/router'
// Settings for the slider
const settings = {
dots: true,
arrows: false,
fade: true,
infinite: true,
autoplay: true,
speed: 500,
autoplaySpeed: 15000,
slidesToShow: 1,
slidesToScroll: 1,
}
export default function NewsSlider() {
// As we have used custom buttons, we need a reference variable to
// change the state
const [slider, setSlider] = React.useState<Slider | null>(null)
// These are the breakpoints which changes the position of the
// buttons as the screen size changes
const top = useBreakpointValue({ base: '90%', md: '50%' })
const side = useBreakpointValue({ base: '30%', md: '40px' })
const { locale } = useRouter()
const cards = newsJson[locale as keyof typeof newsJson]
return (
<Box
position={'relative'}
height={'600px'}
width={'full'}
overflow={'auto'}
>
{/* CSS files for react-slick */}
<link
rel="stylesheet"
type="text/css"
charSet="UTF-8"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>
{/* Left Icon */}
<IconButton
aria-label="left-arrow"
variant="ghost"
position="absolute"
left={side}
top={top}
transform={'translate(0%, -50%)'}
zIndex={2}
onClick={() => slider?.slickPrev()}
>
<BiLeftArrowAlt size="40px" />
</IconButton>
{/* Right Icon */}
<IconButton
aria-label="right-arrow"
variant="ghost"
position="absolute"
right={side}
top={top}
transform={'translate(0%, -50%)'}
zIndex={2}
onClick={() => slider?.slickNext()}
>
<BiRightArrowAlt size="40px" />
</IconButton>
{/* Slider */}
<Slider {...settings} ref={(slider: any) => setSlider(slider)}>
{cards.map((card, index) => (
<Box
key={index}
height={'-webkit-fit-content'}
position="relative"
backgroundPosition="center"
backgroundRepeat="no-repeat"
backgroundSize="cover"
>
{/* This is the block you need to change, to customize the caption */}
<Container
maxWidth={'100em'}
height="-webkit-fit-content"
position="relative"
>
<Stack spacing={6} w={'full'} maxW={'-webkit-max-content'}>
<Heading fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}>
{card.title}
</Heading>
<Text
as={'i'}
fontSize={{ base: 'md', lg: 'lg' }}
color="GrayText"
>
{card.text.split('<br/>').map((str) => (
<p>{str}</p>
))}
</Text>
</Stack>
</Container>
</Box>
))}
</Slider>
</Box>
)
}

View File

@ -1,11 +1,11 @@
import { Layout } from '@components/common' import { Layout } from '@components/common'
import NewsSlider from '@components/common/News/NewsSlider'
import { Text } from '@components/ui' import { Text } from '@components/ui'
export default function News() { export default function News() {
return ( return (
<div className="max-w-2xl mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit"> <div className="mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
<Text variant="heading">Work In Progress</Text> <NewsSlider></NewsSlider>
<Text className="">We are working for you...</Text>
</div> </div>
) )
} }

View File

@ -0,0 +1,59 @@
import {
TableContainer,
Table,
TableCaption,
Thead,
Tr,
Th,
Tbody,
Td,
Tfoot,
Box,
} from '@chakra-ui/react'
import { Layout } from '@components/common'
import { Text } from '@components/ui'
import { useRouter } from 'next/router'
import tableData from '../static_data/where-we-are.json'
export default function WhereWeAre() {
const { locale = 'it' } = useRouter()
return (
<div className="mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
<Box>
<Text variant="heading">
{locale == 'it' ? 'Dove Siamo' : 'Where We Are'}
</Text>
</Box>
<Box mt={10}>
<TableContainer>
<Table variant="striped" colorScheme="teal">
<Thead>
<Tr>
<Th>{locale == 'it' ? 'Giorno' : 'Day of Week'}</Th>
<Th>{locale == 'it' ? 'Orario' : 'Time'}</Th>
<Th>{locale == 'it' ? 'Luogo' : 'Location'}</Th>
</Tr>
</Thead>
<Tbody>
{tableData[locale as keyof typeof tableData].map(
(elem, index) => {
return (
<Tr>
<Td>{elem.day}</Td>
<Td>{elem.time}</Td>
<Td>{elem.location}</Td>
</Tr>
)
}
)}
</Tbody>
</Table>
</TableContainer>
</Box>
</div>
)
}
WhereWeAre.Layout = Layout

View File

@ -1,39 +1,46 @@
{ {
"it": [
"it": [ {
{ "label": "Regioni",
"label": "Regioni", "href": "#"
"href": "#" },
}, {
{ "label": "Chi Siamo",
"label": "Chi Siamo", "href": "/about"
"href": "/about" },
}, {
{ "label": "News",
"label": "News", "href": "/news"
"href": "/news" },
}, {
{ "label": "Contatti",
"label": "Contatti", "href": "/contact"
"href": "/contact" },
} {
], "label": "Dove Siamo",
"en": [ "href": "/where-we-are"
{ }
"label": "Regions", ],
"href": "#" "en": [
}, {
{ "label": "Regions",
"label": "About", "href": "#"
"href": "/about" },
}, {
{ "label": "About",
"label": "News", "href": "/about"
"href": "/news" },
}, {
{ "label": "News",
"label": "Contact", "href": "/news"
"href": "/contact" },
} {
] "label": "Contact",
"href": "/contact"
},
{
"label": "Where we are",
"href": "/where-we-are"
}
]
} }

View File

@ -0,0 +1,30 @@
{
"it": [
{
"title": "Come Funziona",
"text": "-Chiunque può contattarci se necessita di un particolare prodotto usato, attraverso la sezione Contattaci, Prenotazioni, oppure scrivendoci nella chat del sito. Appena lo avremo trovato, lo contatteremo una prima volta per fornirgli un preventivo e, qualora venga accettato, lo ricontatteremo appena loggetto sarà disponibile.<br/>-Chiunque può contattarci se necessita di vendere un prodotto. Se questo interessa ad un altro utente che lo abbia prenotato in Contattaci, Prenotazioni o scrivendoci in chat, lo acquisteremo subito. Altrimenti lo reperiremo, esporremo gratuitamente per il proprietario e proveremo a venderlo per lui, sottraendo al prezzo di vendita, le normali commissioni del conto-vendita. Chiunque ci abbia affidato dei prodotti da vendere, può ricontattarci in qualsiasi momento, se desidera riappropriarsene.<br/>-Chiunque può segnalare la preferenza di un prodotto in Contattaci, Preferiti. Così lo considereremo prenotato, fino a quando un altro utente desideri acquistarlo. In questultimo caso, ricontatteremo il primo utente, domandandogli se ancora interessato, prima di procedere con la vendita al secondo. Nella stessa sezione valutiamo proposte di scambio di un oggetto aggiunto ai preferiti. Descriveteci cosa proponete da scambiare in Contattaci, Preferiti. E vi faremo sapere.<br/>-Il percorso fisico attuato giornalmente da Safara nel reperimento e la consegna dei prodotti, nei territori in cui opera, è fisso e prestabilito; e viene gestito in modo da evitare sprechi di carburante e conseguente maggior inquinamento."
},
{
"title": "Per Voi",
"text": "-Chiunque voglia contribuire allarricchimento culturale offerto da Safara, può inviare proprie foto datate e/o recenti inerenti posti tipici o panorami dellAbruzzo. Esse andranno a contornare, con la loro unicità, gli sfondi delle stanze dei vari decenni. Lo stesso invito può ampliarsi ad altri generi di file, quali audio di canzoni ascoltate in Abruzzo negli anni passati e/o attuali, sia locali che di cultura pop, video ecc. I più significativi verranno pubblicati subito e ne verrà specificata la fonte o lautore.<br/>-Chiunque voglia fornirci dei consigli utili a migliorare il nostro servizio online e fisico, può scriverci in Contattaci, Consigli o nella chat del sito. Siate certi che li valuteremo con attenzione."
},
{
"title": "Aggiornamenti",
"text": "-Safara è unattività ancora prevalentemente ludica, basata sullo scambio tra privati, che parte dal nostro territorio e tenta di valorizzarlo. Perciò prende inizialmente forma nella mera formula dellesposizione privata, una semplice vetrina, ma con elementi innovativi nellambito dellesposizione di prodotti usati. Ci auguriamo che, grazie anche al vostro aiuto, diverrà presto e- commerce (è già preparata e strutturata per esserlo); ma totalmente diverso da ciò che attualmente offre tale settore. Ci piace affermare che in Safara, la dicitura e-commerce, sta più per “ecological commerce”, vale a dire un commercio incentrato, incentivato e promosso soprattutto per il mercato locale, al fine di movimentarlo, agevolarlo e valorizzarlo; pur non mancando quei servizi indispensabili ad ogni e-commerce, quali la possibilità di spedizione a distanza, lassistenza e lattenzione verso il cliente ecc. Per questi motivi, non è possibile, al momento, acquistare direttamente in Safara, ma si può acquistare, vendere o scambiare, contattandoci. -Scopo di Safara è garantirsi unautosussistenza, fornendo un servizio utile al suo territorio. La nostra visione futura vede un utilizzo esclusivo di mezzi elettrici per gli spostamenti locali a reperimento e consegna dei prodotti; un potenziale culturale da poter implementare in varie manifestazioni locali; un mezzo per far conoscere la nostra regione e la sua storia ai visitatori del sito residenti in altre zone dellItalia; aggiornamenti sullintrattenimento offerto dal sito (magari prendendo spunto dai consigli, che ognuno può lasciare nella sezione Contattaci, Consigli), ecc.<br/>-Il percorso storico è visitabile a partire dagli anni 60, ma verranno presto implementati tutti i decenni mancanti del secolo 900, e la sezione riguardante ciò che è antecedente a tale secolo, costituita dal primo cerchio della spirale."
}
],
"en": [
{
"title": "How It Works",
"text": "-Anyone can contact us if they need a particular used product, through the section Contact us, Reservations, or by writing to us in the chat of the site. As soon as we find it, we will contact it a first time to provide a quote and, if it is accepted, we will contact it as soon as the item is available.<br/>-Anyone can contact us if they need to sell a product. If this interests another user who has booked it in Contact Us, Reservations or by writing us in chat, we will purchase it immediately. Otherwise we will find it, we will expose it for free for the owner and we will try to sell it for him, subtracting from the sale price, the normal commission of the account-sale. Anyone who has entrusted us with products to sell, can contact us at any time, if you wish to repossess them.<br/>-Anyone can report a product preference in Contact Us, Favorites. So we will consider it booked, until another user wishes to purchase it. In the latter case, we will contact the first user, asking him if still interested, before proceeding with the sale to the second. In the same section we evaluate proposals for exchange of an object added to favorites. Describe what you propose to exchange in Contact Us, Favorites. And we will let you know.<br/>-The physical path implemented daily by Safara in the procurement and delivery of products, in the territories in which it operates, is fixed and pre-established; and is managed so as to avoid fuel waste and consequent greater pollution."
},
{
"title": "For You",
"text": "-Anyone wishing to contribute to the cultural enrichment offered by Safara, can send their own dated and/or recent photos of typical places or landscapes of Abruzzo. They will surround, with their uniqueness, the backgrounds of the rooms of the various decades. The same invitation can be extended to other types of files, such as audio of songs heard in Abruzzo in past and/or current years, both local and pop culture, video etc. The most significant will be published immediately and will specify the source or the author.<br/>-Anyone who wants to give us useful advice to improve our online and physical service, can write us in Contact us, Advice or in the chat of the site. Be assured that we will evaluate them carefully."
},
{
"title": "Updates",
"text": "-Safara is still a mainly recreational activity, based on the exchange between individuals, which starts from our territory and tries to enhance it. So it takes shape initially in the simple formula of the private exhibition, a simple showcase, but with innovative elements in the context of the display of used products. We hope that, thanks to your help, it will soon become e- commerce (it is already prepared and structured to be so); but totally different from what currently offers this sector. We like to say that in Safara, the word e-commerce, is more for 'ecological commerce', that is to say a trade focused, encouraged and promoted especially for the local market, in order to enliven, facilitate and enhance it; while not missing those services essential to every e-commerce, such as the possibility of remote shipping, assistance and attention to the customer etc. For these reasons, it is not possible, at the moment, to buy directly in Safara, but you can buy, sell or exchange, by contacting us.<br/>-Safaras aim is to ensure self-sufficiency by providing a useful service to its territory. Our future vision sees an exclusive use of electric means for the local movements to procurement and delivery of products; a cultural potential to be implemented in various local events; a means to make our region and its history known to visitors of the site residing in other areas of Italy; updates on the entertainment offered by the site (perhaps taking inspiration from the advice, that everyone can leave in the section Contact us, Advice), etc.<br/>-The historical route can be visited from the 1960s, but all the missing decades of the 20th century will soon be implemented, and the section on what predates that century, the first circle of the spiral."
}
]
}

View File

@ -0,0 +1,116 @@
{
"it": [
{
"day": "Lunedì",
"time": "9:00/12:00",
"location": "da Pineto a Chieti (Pineto, Silvi, Montesilvano, Pescara, Chieti e zone limitrofe al tragitto)"
},
{
"day": "Lunedì",
"time": "15:00/18:00",
"location": "da Pineto a Martinsicuro (Pineto, Roseto, Giulianova, Mosciano, Martinsicuro e zone limitrofe)"
},
{
"day": "Martedì",
"time": "9:00/12:00",
"location": "da Pineto a Martinsicuro"
},
{
"day": "Martedì",
"time": "15:00/18:00",
"location": "da Pineto a Chieti"
},
{
"day": "Mercoledì",
"time": "9:00/12:00",
"location": "da Pineto a Chieti"
},
{
"day": "Mercoledì",
"time": "15:00/18:00",
"location": "da Pineto a Martinsicuro"
},
{
"day": "Giovedì",
"time": "9:00/12:00",
"location": "da Pineto a Martinsicuro"
},
{
"day": "Giovedì",
"time": "15:00/18:00",
"location": "da Pineto a Chieti"
},
{
"day": "Venerdì",
"time": "9:00/12:00",
"location": "da Pineto a Chieti"
},
{
"day": "Venerdì",
"time": "15:00/18:00",
"location": "da Pineto a Martinsicuro"
},
{
"day": "Sabato",
"time": "",
"location": "Tragitto coperto in base agli appuntamenti del giorno"
}
],
"en": [
{
"day": "Monday",
"time": "9:00/12:00",
"location": "from Pineto to Chieti (Pineto, Silvi, Montesilvano, Pescara, Chieti and nearby areas)"
},
{
"day": "Monday",
"time": "15:00/18:00",
"location": "from Pineto to Martinsicuro (Pineto, Roseto, Giulianova, Mosciano, Martinsicuro and nearby areas)"
},
{
"day": "Tuesday",
"time": "9:00/12:00",
"location": "from Pineto to Martinsicuro"
},
{
"day": "Tuesday",
"time": "15:00/18:00",
"location": "from Pineto to Chieti"
},
{
"day": "Wednesday",
"time": "9:00/12:00",
"location": "from Pineto to Chieti"
},
{
"day": "Wednesday",
"time": "15:00/18:00",
"location": "from Pineto to Martinsicuro"
},
{
"day": "Thursday",
"time": "9:00/12:00",
"location": "from Pineto to Martinsicuro"
},
{
"day": "Thursday",
"time": "15:00/18:00",
"location": "from Pineto to Chieti"
},
{
"day": "Friday",
"time": "9:00/12:00",
"location": "from Pineto to Chieti"
},
{
"day": "Friday",
"time": "15:00/18:00",
"location": "from Pineto to Martinsicuro"
},
{
"day": "Saturday",
"time": "",
"location": "Route covered according to the appointments of the day"
}
]
}