diff --git a/package.json b/package.json
index fba887a..500a259 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"dependencies": {
"@types/react-scroll": "^1.8.10",
"antd": "^5.11.4",
+ "dayjs": "^1.11.10",
"prettier": "^3.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
diff --git a/src/App.tsx b/src/App.tsx
index 6f09560..41f0dc4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { Content, Footer } from 'antd/es/layout/layout'
import { NavigationBar } from './components/NavigationBar'
import { Housing } from './pages/Housing'
import { Place } from './pages/Place'
+import { Program } from './pages/Program'
import { Welcome } from './pages/Welcome'
import { Colors } from './styles/Color'
@@ -29,6 +30,7 @@ export const App = () => (
+
diff --git a/src/pages/Program.tsx b/src/pages/Program.tsx
new file mode 100644
index 0000000..cbd85c1
--- /dev/null
+++ b/src/pages/Program.tsx
@@ -0,0 +1,109 @@
+import { ClockCircleOutlined } from '@ant-design/icons'
+import { Card as BaseCard, Tag as BaseTag } from 'antd'
+import BaseMeta from 'antd/es/card/Meta'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import styled from 'styled-components'
+import { Colors } from '../styles/Color'
+import { SectionWrapper } from '../styles/Layout'
+export const Program: React.FC = () => {
+ dayjs.extend(customParseFormat)
+ return (
+
+
+
+
+ -
+ ⛪️}
+ title={Messe}
+ description={Église notre dame de Kedro à Locmariaquer}
+ />
+ }>15h00
+
+
+ -
+ 🍸} title={Cocktail} description={Château de Kérantré à Crach'h} />
+ }>17h30
+
+ -
+ 🍽️} title={Dîner} description={Château de Kérantré à Crach'h} />
+ }>20h00
+
+ -
+ 💃} title={Soirée} description={Château de Kérantré à Crach'h} />
+ }>23h30
+
+
+
+
+
+ -
+ 🦪} title={Retour de plage} description={Château de Kérantré à Crac'h} />
+ }>17h30
+
+ -
+ 🪩} title={Rebond} description={Château de Kérantré à Crach'h} />
+ }>20h30
+
+
+
+
+
+ )
+}
+
+const ColumnWrapper = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 36px;
+`
+
+const Column = styled.div`
+ padding: 0px 0px;
+`
+
+const Card = styled(BaseCard)`
+ box-shadow:
+ rgba(0, 0, 0, 0.07) 0px 1px 2px,
+ rgba(0, 0, 0, 0.07) 0px 2px 4px,
+ rgba(0, 0, 0, 0.07) 0px 4px 8px,
+ rgba(0, 0, 0, 0.07) 0px 8px 16px,
+ rgba(0, 0, 0, 0.07) 0px 16px 32px,
+ rgba(0, 0, 0, 0.07) 0px 32px 64px;
+`
+
+const Item = styled.li`
+ display: flex;
+ align-items: center;
+ list-style-type: none;
+
+ .ant-card-meta-title {
+ margin-bottom: 0 !important;
+ }
+`
+
+const Emoji = styled.span`
+ font-size: 32px;
+ padding-right: 15px;
+`
+
+const Tag = styled(BaseTag)`
+ background-color: ${Colors.light_green};
+ border-color: ${Colors.green};
+ margin-bottom: 38px;
+`
+
+const Meta = styled(BaseMeta)`
+ text-align: left;
+ padding-bottom: 36px;
+`
+const ItemTitle = styled.div`
+ width: 360px;
+ margin-bottom: 0 !important;
+`
+
+const Description = styled.span`
+ font-size: 16px;
+`
diff --git a/src/styles/Color.ts b/src/styles/Color.ts
index 18c14f1..d17410e 100644
--- a/src/styles/Color.ts
+++ b/src/styles/Color.ts
@@ -3,4 +3,5 @@ export enum Colors {
white = 'rgba(255, 255, 255, 0.87)',
green = 'rgba(104, 157, 113, 1)',
dark_green = 'rgba(70, 105, 76, 1)',
+ light_green = 'rgba(104, 157, 113, 0.4)',
}
diff --git a/yarn.lock b/yarn.lock
index 9e35b62..3614254 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1100,7 +1100,7 @@ csstype@^3.0.10, csstype@^3.0.2, csstype@^3.1.2:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
-dayjs@^1.11.1:
+dayjs@^1.11.1, dayjs@^1.11.10:
version "1.11.10"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==