eurecombde · roberthmoller · Sep 29, 2022 · Oct 8, 2022 · Oct 8, 2022 · Oct 8, 2022
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
 		"svelte-check": "^2.7.1",
 		"svelte-preprocess": "^4.10.7",
 		"tailwindcss": "^3.1.8",
+		"tailwindcss-debug-screens": "^2.2.1",
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.4",
 		"vite": "^3.1.0"
@@ -47,9 +48,9 @@
 		"@googleapis/analytics": "^2.0.0",
 		"@googleapis/analyticsreporting": "^0.3.0",
 		"@googleapis/calendar": "^2.0.0",
-		"svelte-clipboard": "^1.0.0",
 		"firebase": "^9.9.4",
 		"rxfire": "^6.0.3",
-		"rxjs": "^7.5.6"
+		"rxjs": "^7.5.6",
+		"svelte-clipboard": "^1.0.0"
 	}
 }
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
-	<body class="bg-white dark:bg-gray-900 dark:text-white">
+	<body class="bg-white dark:bg-gray-900 dark:text-white debug-screens">
 		<div>%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/constants/routes.ts b/src/lib/constants/routes.ts
@@ -7,14 +7,14 @@ export const routes: Page[] = [
             {name: 'Upcoming events', tag: '#events'},
         ]
     },
-    // {
-    //     name: 'Student Life', emoji: '🏖️',  path: '/student-life', sections: [
-    //         {name: 'Student Guides', tag: '#guides'},
-    //         {name: 'Deals & Partners', tag: '#tips'},
-    //         {name: 'Frequent questions', tag: '#faq'}
-    //         {name: 'Places in the area', tag: '#places'},
-    //     ]
-    // },
+    {
+        name: 'Student Life', emoji: '🏖️',  path: '/student-life', sections: [
+            {name: 'Student Guides', tag: '#guides'},
+            {name: 'Deals & Partners', tag: '#tips'},
+            {name: 'Frequent questions', tag: '#faq'},
+            {name: 'Places in the area', tag: '#places'},
+        ]
+    },
     // {
     //     name: 'Clubs', path: '/clubs', emoji: '🍷',sections: [
     //         {name: 'All', tag: '#all'},

diff --git a/src/lib/constants/student-guides.ts b/src/lib/constants/student-guides.ts
@@ -0,0 +1,39 @@
+export type Guide = {
+    name: string,
+    slug: string,
+    description: string,
+    image?: string,
+    tags: string[],
+    content: string,
+    author: string,
+    date: string,
+};
+export const guides: Guide[] = [
+    {
+        name: 'Bars and Clubs',
+        slug: 'bars-and-clubs',
+        description: 'The best bars and clubs in the area.',
+        // image: 'https://images.unsplash.com/photo-1517436073-3b8b4f3b5f9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80',
+        author: 'TBC',
+        date: '2020-01-01',
+        tags: ['bars', 'clubs', 'nightlife'],
+        content: `
+        Dette kan bli bra
+        eller hva tenker du?
+        `
+    },
+
+    {
+        name: 'Getting to around the area',
+        slug: 'transport',
+        description: 'How to get around the area.',
+        // image: 'https://images.unsplash.com/photo-1517436073-3b8b4f3b5f9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80',
+        author: 'TBC',
+        date: '2022-01-01',
+        tags: ['transport', 'buses', 'trains'],
+        content: `
+        How to get around Antibes and the surrounding area by public transport?
+
+        `
+    }
+];
diff --git a/src/lib/sections/places.svelte b/src/lib/sections/places.svelte
@@ -5,16 +5,28 @@
     import {places} from '$lib/constants/places';
 
     let page = 0;
+    let direction = 1;
+    const animX = 100;
+    const animDuration = 400;
 
     function next() {
-        page = (page + 1) % places.length;
+        direction = 1;
+        setTimeout(() => {
+            page = (page + 1) % places.length;
+        }, 100);
     }
 
     function previous() {
-        page = Math.abs(page - 1) % places.length;
+        direction = -1;
+        setTimeout(() => {
+            page = Math.abs(page - 1) % places.length;
+        }, 100);
     }
 
-    $: currentPlace = places[page];
+    // $: currentPlace = places[page];
+    $: animIn = {x: direction * animX, duration: animDuration, delay: animDuration};
+    $: animOut = {x: -direction * animX, duration: animDuration};
+
 </script>
 
 <section id="places" in:fade out:fade>
@@ -26,29 +38,45 @@
             <h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl xl:text-5xl dark:text-white">
                 Places <span class="text-blue-500">in the area</span> we think are <br> worth seeing
             </h1>
+            <div class="mt-10 lg:mt-20 lg:flex lg:items-center">
+                {#each places as place, index}
+                    <!--{#if index === page}-->
+                        <div class="relative w-full lg:w-[32rem] h-96" in:fly={animIn} out:fly={animOut}>
+                            <img class="absolute object-cover object-center rounded-lg w-full h-full left-0 top-0" src={place.photo} alt={place.name}>
+                        </div>
+                    <!--{/if}-->
+
+                {/each}
+
+                {#each places as place, index}
+                    {#if index === page}
+                        <div class="relative mt-8 lg:px-10 lg:mt-0" in:fly={animIn} out:fly={animOut}>
 
+                            <div class="absolute left-10">
+                                <h1 class="text-2xl font-semibold text-gray-800 dark:text-white lg:w-72">
+                                    {place.name}
+                                </h1>
 
-            <div class="mt-10 lg:mt-20 lg:flex lg:items-center" id="place{page}">
-                <img class="object-cover object-center w-full lg:w-[32rem] rounded-lg h-96" src={currentPlace.photo} alt="Jardin Exotique d'Èze">
-                <div class="mt-8 lg:px-10 lg:mt-0">
-                    <h1 class="text-2xl font-semibold text-gray-800 dark:text-white lg:w-72">
-                        {currentPlace.name}
-                    </h1>
+                                <!--                            <p class="max-w-lg mt-6 text-gray-500 dark:text-gray-400">{place.description}</p>-->
+                                {#if place.tripadvisor}
+                                    <a href="{place.tripadvisor}">
 
-                    <p class="max-w-lg mt-6 text-gray-500 dark:text-gray-400">{currentPlace.description}</p>
-                    {#if currentPlace.tripadvisor}
-                        <a href="{currentPlace.tripadvsor}">
+                                        <h3 class="mt-6 text-lg font-medium text-gray-800 dark:text-white">
+                                            <Icon data={tripadvisor}/>
+                                            Tripadvisor
+                                        </h3>
+                                    </a>
+                                {/if}
+                            </div>
+                        </div>
 
-                            <h3 class="mt-6 text-lg font-medium text-gray-800 dark:text-white">
-                                <Icon data={tripadvisor}/>
-                                Tripadvisor
-                            </h3>
-                        </a>
                     {/if}
-                </div>
+
+                {/each}
+
             </div>
             {#if places.length > 1}
-                <div class="flex items-center justify-between mt-12 lg:justify-start">
+                <div class="flex items-center justify-between mt-8 lg:justify-start">
                     <button class="p-2 text-gray-800 transition-colors duration-300 border rounded-full rtl:-scale-x-100 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100"
                             on:click={previous}>
                         <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

diff --git a/src/lib/sections/tips.svelte b/src/lib/sections/tips.svelte
@@ -6,7 +6,7 @@
 
 <section id="tips" in:fade out:fade>
     <div class="container px-6 py-10 mx-auto">
-        <h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="underline decoration-blue-500">deals & partners</span></h1>
+        <h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <span class="underline decoration-blue-500">deals & partners</span></h1>
 
         <p class="mt-4 text-gray-500 xl:mt-6 dark:text-gray-300">
             Take advantage of the deals and partnerships available for you. If you want to join the list or have a suggestion please do <a href="/about#contact" class="underline text-blue-500">reach out to us</a>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -112,7 +112,7 @@
         <hr class="h-px my-6 bg-gray-200 border-none dark:bg-gray-700">
 
         <div>
-            <p class="text-center text-gray-500 dark:text-gray-400">© Brand 2020 - All rights reserved</p>
+            <p class="text-center text-gray-500 dark:text-gray-400">© EURECOM BDE 2022 - All rights reserved</p>
         </div>
     </div>
 </footer>
diff --git a/src/routes/student-life/+page.server.ts b/src/routes/student-life/+page.server.ts