diff --git a/movie-group-8/src/assets/TMDB.svg b/movie-group-8/src/assets/TMDB.svg
new file mode 100644
index 0000000000000000000000000000000000000000..42f31f15442e3afe6ae8b38024637112e508bf7a
--- /dev/null
+++ b/movie-group-8/src/assets/TMDB.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 190.24 81.52"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" y1="40.76" x2="190.24" y2="40.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#90cea1"/><stop offset="0.56" stop-color="#3cbec9"/><stop offset="1" stop-color="#00b3e5"/></linearGradient></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M105.67,36.06h66.9A17.67,17.67,0,0,0,190.24,18.4h0A17.67,17.67,0,0,0,172.57.73h-66.9A17.67,17.67,0,0,0,88,18.4h0A17.67,17.67,0,0,0,105.67,36.06Zm-88,45h76.9A17.67,17.67,0,0,0,112.24,63.4h0A17.67,17.67,0,0,0,94.57,45.73H17.67A17.67,17.67,0,0,0,0,63.4H0A17.67,17.67,0,0,0,17.67,81.06ZM10.41,35.42h7.8V6.92h10.1V0H.31v6.9h10.1Zm28.1,0h7.8V8.25h.1l9,27.15h6l9.3-27.15h.1V35.4h7.8V0H66.76l-8.2,23.1h-.1L50.31,0H38.51ZM152.43,55.67a15.07,15.07,0,0,0-4.52-5.52,18.57,18.57,0,0,0-6.68-3.08,33.54,33.54,0,0,0-8.07-1h-11.7v35.4h12.75a24.58,24.58,0,0,0,7.55-1.15A19.34,19.34,0,0,0,148.11,77a16.27,16.27,0,0,0,4.37-5.5,16.91,16.91,0,0,0,1.63-7.58A18.5,18.5,0,0,0,152.43,55.67ZM145,68.6A8.8,8.8,0,0,1,142.36,72a10.7,10.7,0,0,1-4,1.82,21.57,21.57,0,0,1-5,.55h-4.05v-21h4.6a17,17,0,0,1,4.67.63,11.66,11.66,0,0,1,3.88,1.87A9.14,9.14,0,0,1,145,59a9.87,9.87,0,0,1,1,4.52A11.89,11.89,0,0,1,145,68.6Zm44.63-.13a8,8,0,0,0-1.58-2.62A8.38,8.38,0,0,0,185.63,64a10.31,10.31,0,0,0-3.17-1v-.1a9.22,9.22,0,0,0,4.42-2.82,7.43,7.43,0,0,0,1.68-5,8.42,8.42,0,0,0-1.15-4.65,8.09,8.09,0,0,0-3-2.72,12.56,12.56,0,0,0-4.18-1.3,32.84,32.84,0,0,0-4.62-.33h-13.2v35.4h14.5a22.41,22.41,0,0,0,4.72-.5,13.53,13.53,0,0,0,4.28-1.65,9.42,9.42,0,0,0,3.1-3,8.52,8.52,0,0,0,1.2-4.68A9.39,9.39,0,0,0,189.66,68.47ZM170.21,52.72h5.3a10,10,0,0,1,1.85.18,6.18,6.18,0,0,1,1.7.57,3.39,3.39,0,0,1,1.22,1.13,3.22,3.22,0,0,1,.48,1.82,3.63,3.63,0,0,1-.43,1.8,3.4,3.4,0,0,1-1.12,1.2,4.92,4.92,0,0,1-1.58.65,7.51,7.51,0,0,1-1.77.2h-5.65Zm11.72,20a3.9,3.9,0,0,1-1.22,1.3,4.64,4.64,0,0,1-1.68.7,8.18,8.18,0,0,1-1.82.2h-7v-8h5.9a15.35,15.35,0,0,1,2,.15,8.47,8.47,0,0,1,2.05.55,4,4,0,0,1,1.57,1.18,3.11,3.11,0,0,1,.63,2A3.71,3.71,0,0,1,181.93,72.72Z"/></g></g></svg>
\ No newline at end of file
diff --git a/movie-group-8/src/assets/review_poster.png b/movie-group-8/src/assets/review_poster.png
new file mode 100644
index 0000000000000000000000000000000000000000..64d338c03a1f9c348fbebc5fd6b36b13eb37bd29
Binary files /dev/null and b/movie-group-8/src/assets/review_poster.png differ
diff --git a/movie-group-8/src/assets/tmdb_poster.png b/movie-group-8/src/assets/tmdb_poster.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3caa85d45a1b549aba2128421978d23fd5f0325
Binary files /dev/null and b/movie-group-8/src/assets/tmdb_poster.png differ
diff --git a/movie-group-8/src/views/Home.vue b/movie-group-8/src/views/Home.vue
index 756efb2a2fe4593150ce71d1c2c22b47a2e4320f..04089a56d0655779a1cbdd2d067b22e84be646be 100644
--- a/movie-group-8/src/views/Home.vue
+++ b/movie-group-8/src/views/Home.vue
@@ -1,77 +1,75 @@
<template>
<div class="h-full bg-neutral-900 p-6">
- <!-- Features -->
- <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto dark">
- <div class="relative p-6 md:p-16">
- <!-- Grid -->
- <div class="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
- <div class="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
- <h2 class="text-2xl text-neutral-200 font-bold sm:text-3xl">
- Fully customizable rules to match your unique needs
- </h2>
-
- <!-- Tab Navs -->
- <nav class="grid gap-4 mt-5 md:mt-10" aria-label="Tabs" role="tablist" aria-orientation="vertical">
- <button type="button" class="hs-tab-active:bg-neutral-700 hs-tab-active:shadow-md text-start hover:bg-neutral-700 focus:bg-neutral-700 p-4 md:p-5 rounded-xl active" id="tabs-with-card-item-1" aria-selected="true" data-hs-tab="#tabs-with-card-1" aria-controls="tabs-with-card-1" role="tab">
- <span class="flex gap-x-6">
- <svg class="shrink-0 mt-2 size-6 md:size-7 text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"/><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"/><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"/><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"/></svg>
- <span class="grow">
- <span class="block text-lg font-semibold text-blue-500">Advanced tools</span>
- <span class="block mt-1 text-neutral-200">Use Preline's automated libraries to manage your business.</span>
- </span>
- </span>
- </button>
-
- <button type="button" class="hs-tab-active:bg-neutral-700 hs-tab-active:shadow-md text-start hover:bg-neutral-700 focus:bg-neutral-700 p-4 md:p-5 rounded-xl" id="tabs-with-card-item-2" aria-selected="false" data-hs-tab="#tabs-with-card-2" aria-controls="tabs-with-card-2" role="tab">
- <span class="flex gap-x-6">
- <svg class="shrink-0 mt-2 size-6 md:size-7 text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
- <span class="grow">
- <span class="block text-lg font-semibold text-blue-500">Smart dashboards</span>
- <span class="block mt-1 text-neutral-200">Quickly use Preline sample components.</span>
- </span>
- </span>
- </button>
-
- <button type="button" class="hs-tab-active:bg-neutral-700 hs-tab-active:shadow-md text-start hover:bg-neutral-700 focus:bg-neutral-700 p-4 md:p-5 rounded-xl" id="tabs-with-card-item-3" aria-selected="false" data-hs-tab="#tabs-with-card-3" aria-controls="tabs-with-card-3" role="tab">
- <span class="flex gap-x-6">
- <svg class="shrink-0 mt-2 size-6 md:size-7 text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>
- <span class="grow">
- <span class="block text-lg font-semibold text-blue-500">Powerful features</span>
- <span class="block mt-1 text-neutral-200">Save time with Preline's modern designs.</span>
- </span>
- </span>
- </button>
- </nav>
- </div>
- <!-- End Col -->
-
- <div class="lg:col-span-6">
- <div class="relative">
- <!-- Tab Content -->
- <div>
- <div id="tabs-with-card-1" role="tabpanel" aria-labelledby="tabs-with-card-item-1">
- <img class="shadow-xl shadow-gray-900/20 rounded-xl" src="https://images.unsplash.com/photo-1605629921711-2f6b00c6bbf4?ixlib=rb-4.0.3&auto=format&fit=crop&w=560&h=720&q=80" alt="Features Image">
- </div>
-
- <div id="tabs-with-card-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-card-item-2">
- <img class="shadow-xl shadow-gray-900/20 rounded-xl" src="https://images.unsplash.com/photo-1665686306574-1ace09918530?ixlib=rb-4.0.3&auto=format&fit=crop&w=560&h=720&q=80" alt="Features Image">
- </div>
-
- <div id="tabs-with-card-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-card-item-3">
- <img class="shadow-xl shadow-gray-900/20 rounded-xl" src="https://images.unsplash.com/photo-1598929213452-52d72f63e307?ixlib=rb-4.0.3&auto=format&fit=crop&w=560&h=720&q=80" alt="Features Image">
- </div>
+ <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto dark">
+ <div class="relative p-6 md:p-16">
+ <div class="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
+ <div class="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
+ <h2 class="text-2xl text-neutral-200 font-bold sm:text-3xl">
+ Welcome to SceneIt! Your new portal for all your movie needs.
+ </h2>
+ <nav class="grid gap-4 mt-5 md:mt-10" aria-label="Tabs" role="tablist" aria-orientation="vertical">
+ <button @click="setTab('list')" :class="{ 'bg-neutral-700 shadow-md': activeTab === 'list' }" class="text-start hover:bg-neutral-700 focus:bg-neutral-700 p-4 md:p-5 rounded-xl">
+ <span class="flex gap-x-6">
+ <svg class="shrink-0 mt-2 size-6 md:size-7 text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"/><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"/><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"/><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"/></svg>
+ <span class="grow">
+ <span class="block text-lg font-semibold text-blue-500">Movie Lists</span>
+ <span class="block mt-1 text-neutral-200">Organize your favorites, track what you've seen, and never forget a great film again!</span>
+ </span>
+ </span>
+ </button>
+ <button @click="setTab('reviews')" :class="{ 'bg-neutral-700 shadow-md': activeTab === 'reviews' }" class="text-start hover:bg-neutral-700 focus:bg-neutral-700 p-4 md:p-5 rounded-xl">
+ <span class="flex gap-x-6">
+ <svg class="shrink-0 mt-2 size-6 md:size-7 text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>
+ <span class="grow">
+ <span class="block text-lg font-semibold text-blue-500">Movie Reviews</span>
+ <span class="block mt-1 text-neutral-200">Read reviews from fellow movie lovers or share your own.</span>
+ </span>
+ </span>
+ </button>
+ <button @click="setTab('tmdb')" :class="{ 'bg-neutral-700 shadow-md': activeTab === 'tmdb' }" class="text-start hover:bg-neutral-700 focus:bg-neutral-700 p-4 md:p-5 rounded-xl">
+ <span class="flex gap-x-6">
+ <img class="h-10 w-auto" src="../assets/TMDB.svg" alt="TMDb Logo" />
+ <span class="grow">
+ <span class="block text-lg font-semibold text-blue-500">Powered by TMDB</span>
+ <span class="block mt-1 text-neutral-200">Data provided by The Movie Database.</span>
+ </span>
+ </span>
+ </button>
+ </nav>
</div>
- <!-- End Tab Content -->
+ <div class="lg:col-span-6">
+ <div class="relative">
+ <img v-if="activeTab === 'list'" class="shadow-xl shadow-gray-900/20 rounded-xl object-cover w-[560px] h-[720px]" src="../assets/home_poster.png" alt="Movie Lists">
+ <img v-if="activeTab === 'reviews'" class="shadow-xl shadow-gray-900/20 rounded-xl object-cover w-[560px] h-[720px]" src="../assets/review_poster.png" alt="Movie Reviews">
+ <img v-if="activeTab === 'tmdb'" class="shadow-xl shadow-gray-900/20 rounded-xl object-cover w-[560px] h-[720px]" src="../assets/tmdb_poster.png" alt="Powered by TMDB">
+ </div>
</div>
+ </div>
+ <div class="absolute inset-0 bg-neutral-800 rounded-xl"></div>
</div>
- <!-- End Col -->
- </div>
- <!-- End Grid -->
-
- <!-- Background Color -->
- <div class="absolute inset-0 bg-neutral-800 rounded-xl"></div>
- </div>
- </div>
- <!-- End Features -->
+ </div>
</div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+export default {
+data() {
+ return {
+ activeTab: 'list',
+ tabs: ['list', 'reviews', 'tmdb'],
+ };
+},
+methods: {
+ setTab(tab) {
+ this.activeTab = tab;
+ }
+},
+mounted() {
+ setInterval(() => {
+ const currentIndex = this.tabs.indexOf(this.activeTab);
+ const nextIndex = (currentIndex + 1) % this.tabs.length;
+ this.activeTab = this.tabs[nextIndex];
+ }, 5000);
+}
+};
+</script>
\ No newline at end of file