Add location page

GregdTd · Dec 10, 2023 · a299f44 · a299f44
1 parent 5c99ac7
commit a299f44
Show file tree

Hide file tree

Showing 13 changed files with 198 additions and 32 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,7 @@ import { ConfigProvider, Layout } from 'antd'
 import { Footer as BaseFooter, Content } from 'antd/es/layout/layout'
 import styled from 'styled-components'
 import { NavigationBar } from './components/NavigationBar'
-import { Housing } from './pages/Accomodation'
+import { Accomodation } from './pages/Accomodation'
 import { Place } from './pages/Location'
 import { Program } from './pages/Program'
 import { Welcome } from './pages/Welcome'
@@ -30,9 +30,14 @@ export const App = () => (
                 <Welcome />
                 <Program />
                 <Place />
-                <Housing />
+                <Accomodation />
             </Content>
-            <Footer>All right reserved</Footer>
+            <Footer>
+                All right reserved-{' '}
+                <a href="www.freepik.com" style={{ fontSize: '6px' }}>
+                    Icons designed by Freepik
+                </a>
+            </Footer>
         </Layout>
     </ConfigProvider>
 )

diff --git a/src/assets/icons/car.png b/src/assets/icons/car.png
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -0,0 +1,3 @@
+export { default as CarPng } from './car.png'
+export { default as PlanePng } from './plane.png'
+export { default as TrainPng } from './train.png'
diff --git a/src/assets/icons/plane.png b/src/assets/icons/plane.png
diff --git a/src/assets/icons/train.png b/src/assets/icons/train.png
diff --git a/src/components/Emoji.tsx b/src/components/Emoji.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+import { mobile } from '../styles/media-queries'
+
+const BaseEmoji: React.FC<{ value: string; className?: string }> = ({ value, className }) => <span className={className}>{value}</span>
+
+export const Emoji = styled(BaseEmoji)`
+    font-size: 32px;
+
+    @media ${mobile} {
+        font-size: 24px;
+    }
+`
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
@@ -1,7 +1,7 @@
 import { CalendarFilled, CompassFilled, GiftFilled, HomeFilled, RocketFilled } from '@ant-design/icons'
 import type { MenuProps } from 'antd'
 import { Menu as BaseMenu } from 'antd'
-import React from 'react'
+import React, { SetStateAction } from 'react'
 import { scroller } from 'react-scroll'
 import styled from 'styled-components'
 import { Colors } from '../styles/Colors'
@@ -37,8 +37,8 @@ const items: MenuProps['items'] = [
 
 interface BaseMenuProps {
     mode: 'horizontal' | 'vertical' | 'inline'
-    currentValueSelected: string | undefined
-    setCurrentValue: React.Dispatch<string | undefined>
+    currentValueSelected: string
+    setCurrentValue: React.Dispatch<SetStateAction<string>>
     showDrawer?: () => void
 }
 export const Menu: React.FC<BaseMenuProps> = ({ mode, currentValueSelected, setCurrentValue, showDrawer }) => {
@@ -54,7 +54,7 @@ export const Menu: React.FC<BaseMenuProps> = ({ mode, currentValueSelected, setC
 }
 
 const SMenu = styled(BaseMenu)`
-    color: ${Colors.light_black};
+    color: ${Colors.dark_green};
     justify-content: flex-end;
     flex: auto;
     min-width: 0px;

diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
@@ -12,14 +12,14 @@ const TITLE = 'Vendredi 14 juin'
 
 export const NavigationBar = () => {
     const [open, setOpen] = useState(false)
-    const [current, setCurrent] = useState(undefined)
+    const [current, setCurrent] = useState('')
     const showDrawer = () => {
         setOpen(!open)
     }
     const isTabletOrMobile = useMedia(`screen and (max-width: 1024px)`)
 
     const onTitleClick = () => {
-        setCurrent(undefined)
+        setCurrent('')
         animateScroll.scrollToTop({ duration: 500, smooth: true })
     }
 
@@ -48,7 +48,7 @@ export const NavigationBar = () => {
 
 const TITLE_WIDTH = 230
 const Header = styled(BaseHeader)`
-    color: ${Colors.black};
+    color: ${Colors.dark_green};
     padding-bottom: 1px;
     border-bottom: solid 1px #e8e8e8;
     background-color: ${Colors.white};

diff --git a/src/pages/Location.tsx b/src/pages/Location.tsx
@@ -1,10 +1,147 @@
+import { Tag as BaseTag } from 'antd'
+import styled from 'styled-components'
+import { CarPng, PlanePng, TrainPng } from '../assets/icons'
+import { Colors } from '../styles/Colors'
 import { SectionWrapper } from '../styles/Layout'
+import { mobile } from '../styles/media-queries'
 import { Pages } from '../utils/types'
-
 export const Place: React.FC = () => {
     return (
         <SectionWrapper id={Pages.LOCATION}>
-            <span>Chateau de K</span>
+            <MainWrapper>
+                <Wrapper>
+                    <GoogleTitle>Église Notre Dame de Kedro</GoogleTitle>
+                    <StyledGoogleFrame
+                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1345.9655645846701!2d-2.9452889612618542!3d47.56912840248482!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x481011e2b3e53d0b%3A0x188d9b6a1ba0e0f7!2s%C3%89glise%20Notre-Dame%20de%20Locmariaquer!5e0!3m2!1sen!2sfr!4v1702234753928!5m2!1sen!2sfr"
+                        allowFullScreen={false}
+                        loading="lazy"
+                        referrerPolicy="no-referrer-when-downgrade"
+                    ></StyledGoogleFrame>
+                    <GoogleTitle>Lieu de réception</GoogleTitle>
+                    <StyledGoogleFrame
+                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2688.8213638879993!2d-2.9647473!3d47.629603599999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48101331dd572fd9%3A0x3f348baf0ac63b33!2zQ2jDonRlYXUgZGUgS2VyYW50csOp!5e0!3m2!1sen!2sfr!4v1702234411432!5m2!1sen!2sfr"
+                        allowFullScreen={true}
+                        loading="lazy"
+                        referrerPolicy="no-referrer-when-downgrade"
+                    />
+                </Wrapper>
+                <Wrapper>
+                    <ColumnWrapper>
+                        <Train src={TrainPng} />
+                        <span>
+                            Gare la plus proche - <b>Auray</b>
+                        </span>
+                        <span>
+                            <Tag bordered={false} onClick={() => window.open('https://www.sncf-connect.com/app/home/search?userInput=Auray&destinationId=')}>
+                                sncf-connect.com
+                            </Tag>
+                        </span>
+                    </ColumnWrapper>
+                    <ColumnWrapper>
+                        <Car src={CarPng} />
+                        <CarTextWrapper>
+                            <CarText>
+                                Depuis Lille<span>7h20</span>
+                            </CarText>
+                            <CarText>
+                                Depuis Paris<span>5h00</span>
+                            </CarText>
+                            <CarText>
+                                Depuis Orléans<span>4h40</span>
+                            </CarText>
+                            <CarText>
+                                Depuis Nantes<span>1h30</span>
+                            </CarText>
+                        </CarTextWrapper>
+                    </ColumnWrapper>
+                    <ColumnWrapper>
+                        <Plane src={PlanePng} />
+                        <span>
+                            Aéroport le plus proche - <b>Nantes</b>
+                        </span>
+                        <span>
+                            <Tag bordered={false} onClick={() => window.open('https://www.skyscanner.fr/')}>
+                                skyscanner.fr
+                            </Tag>
+                        </span>
+                    </ColumnWrapper>
+                </Wrapper>
+            </MainWrapper>
         </SectionWrapper>
     )
 }
+
+const MainWrapper = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    gap: 16px;
+`
+
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+`
+const GoogleTitle = styled.span`
+    font-size: 18px;
+    font-weight: bold;
+`
+
+const StyledGoogleFrame = styled.iframe`
+    width: 400px;
+    height: 300px;
+    border: 0;
+    border-radius: 8px;
+
+    @media ${mobile} {
+        width: 200px;
+        height: 150px;
+    }
+`
+
+const ColumnWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: justify;
+`
+
+const CarTextWrapper = styled.span`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+`
+
+const CarText = styled.span`
+    width: 250px;
+    display: flex;
+    justify-content: space-between;
+`
+
+const Train = styled.img`
+    width: 80px;
+    height: 80px;
+    margin-bottom: 16px;
+`
+
+const Car = styled.img`
+    width: 100px;
+    height: 100px;
+`
+
+const Plane = styled.img`
+    width: 70px;
+    height: 70px;
+    margin-top: 24px;
+    margin-bottom: 24px;
+`
+
+const Tag = styled(BaseTag)`
+    background-color: ${Colors.light_green};
+    color: ${Colors.black};
+    margin: 16px 0px;
+    cursor: pointer;
+`
diff --git a/src/pages/Program.tsx b/src/pages/Program.tsx
@@ -1,6 +1,7 @@
 import { Card as BaseCard, Tag as BaseTag } from 'antd'
 import BaseMeta from 'antd/es/card/Meta'
 import styled from 'styled-components'
+import { Emoji as BaseEmoji } from '../components/Emoji'
 import { Colors } from '../styles/Colors'
 import { SectionWrapper } from '../styles/Layout'
 import { mobile } from '../styles/media-queries'
@@ -14,35 +15,39 @@ export const Program: React.FC = () => {
                     <Card title="Vendredi 14 juin" bordered={true}>
                         <Item>
                             <Meta
-                                avatar={<Emoji>⛪️</Emoji>}
+                                avatar={<Emoji value="⛪️" />}
                                 title={<ItemTitle>Messe</ItemTitle>}
-                                description={<Description>Église notre dame de Kedro à Locmariaquer</Description>}
+                                description={<Description>Église Notre Dame de Kedro à Locmariaquer</Description>}
                             />
                             <Tag bordered={false}>15h00</Tag>
                         </Item>
 
                         <Item>
-                            <Meta avatar={<Emoji>🍸</Emoji>} title={<ItemTitle>Cocktail</ItemTitle>} description={<Description>Château de Kérantré à Crac'h</Description>} />
+                            <Meta avatar={<Emoji value="🍸" />} title={<ItemTitle>Cocktail</ItemTitle>} description={<Description>Château de Kérantré à Crac'h</Description>} />
                             <Tag bordered={false}>17h30</Tag>
                         </Item>
                         <Item>
-                            <Meta avatar={<Emoji>🍽️</Emoji>} title={<ItemTitle>Dîner</ItemTitle>} description={<Description>Château de Kérantré à Crac'h</Description>} />
+                            <Meta avatar={<Emoji value="🍽️" />} title={<ItemTitle>Dîner</ItemTitle>} description={<Description>Château de Kérantré à Crac'h</Description>} />
                             <Tag bordered={false}>20h00</Tag>
                         </Item>
                         <Item>
-                            <Meta avatar={<Emoji>💃</Emoji>} title={<ItemTitle>Soirée</ItemTitle>} description={<Description>Château de Kérantré à Crac'h</Description>} />
+                            <Meta avatar={<Emoji value="💃" />} title={<ItemTitle>Soirée</ItemTitle>} description={<Description>Château de Kérantré à Crac'h</Description>} />
                             <Tag bordered={false}>23h30</Tag>
                         </Item>
                     </Card>
                 </Column>
                 <Column>
                     <Card title="Samedi 15 juin" bordered={true}>
                         <Item>
-                            <Meta avatar={<Emoji>🦪</Emoji>} title={<ItemTitle>Retour de plage</ItemTitle>} description={<Description>Château de Kérantré à Crac'h</Description>} />
+                            <Meta
+                                avatar={<Emoji value="🦪" />}
+                                title={<ItemTitle>Retour de plage</ItemTitle>}
+                                description={<Description>Château de Kérantré à Crac'h</Description>}
+                            />
                             <Tag bordered={false}>17h30</Tag>
                         </Item>
                         <Item>
-                            <Meta avatar={<Emoji>🪩</Emoji>} title={<ItemTitle>Rebond</ItemTitle>} description={<Description>Château de Kérantré à Crac'h</Description>} />
+                            <Meta avatar={<Emoji value="🪩" />} title={<ItemTitle>Rebond</ItemTitle>} description={<Description>Château de Kérantré à Crac'h</Description>} />
                             <Tag bordered={false}>20h30</Tag>
                         </Item>
                     </Card>
@@ -64,6 +69,10 @@ const Column = styled.div`
     padding: 0px 0px;
 `
 
+const Emoji = styled(BaseEmoji)`
+    padding-right: 15px;
+`
+
 const Card = styled(BaseCard)`
     width: 460px;
     box-shadow:
@@ -90,18 +99,9 @@ const Item = styled.li`
     }
 `
 
-const Emoji = styled.span`
-    font-size: 32px;
-    padding-right: 15px;
-
-    @media ${mobile} {
-        font-size: 24px;
-    }
-`
-
 const Tag = styled(BaseTag)`
-    background-color: ${Colors.light_brown};
-    color: ${Colors.dark_brown};
+    background-color: ${Colors.light_green};
+    color: ${Colors.black};
     margin-bottom: 38px;
 `
 
@@ -111,6 +111,7 @@ const Meta = styled(BaseMeta)`
 `
 const ItemTitle = styled.div`
     margin-bottom: 0 !important;
+    font-weight: normal;
     @media ${mobile} {
         font-size: 16px;
     }

diff --git a/src/styles/Colors.ts b/src/styles/Colors.ts
@@ -2,9 +2,9 @@ export enum Colors {
     black = 'rgba(0, 0, 0, 1)',
     light_black = 'rgba(0, 0, 0, 0.5)',
     white = 'rgba(255, 255, 255, 1)',
-    light_green = 'rgba(159, 175, 161, 1)', //'rgba(104, 157, 113, 0.4)', //9FAFA1
+    light_green = 'rgba(215, 250, 219, 1)', // D7FADB
     green = 'rgba(104, 157, 113, 1)', //689D71
-    dark_green = 'rgba(77, 103, 0, 1)', //4D6700
+    dark_green = 'rgba(54, 105, 65, 1)', //366941
 
     purple = 'rgba(153, 153, 204, 1)', //9999CC
 

diff --git a/src/styles/Layout.tsx b/src/styles/Layout.tsx
@@ -27,4 +27,5 @@ const Section = styled.section`
 
 const Title = styled.h1`
     font-size: 36px;
+    font-weight: normal;
 `
diff --git a/src/styles/fonts/font.css b/src/styles/fonts/font.css
@@ -11,3 +11,10 @@
   font-style: normal;
   src: url('CaviarDreams.ttf') format('truetype');
 }
+
+@font-face {
+  font-family: 'caviar-dreams';
+  font-weight: bold;
+  font-style: normal;
+  src: url('CaviarDreams_Bold.ttf') format('truetype');
+}