-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'products-overview-page'
- Loading branch information
Showing
12 changed files
with
144 additions
and
190 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +0,0 @@ | ||
| <script> | ||
| import { mobile,active } from './stores.js'; | ||
| import AccordionSection from './AccordionSection.svelte' | ||
| import FooterFull from '@components/FooterFull.svelte' | ||
| export let products; | ||
| products.sort((a,b) => a.data.order - b.data.order) | ||
| // Uncomment below to limit accordion to only the top three products | ||
| products = products.slice(0,3); | ||
| let width = 0; | ||
| $: mobile.set(width < 1024); | ||
| function setActive(section){ | ||
| if ($active == parseInt(section)){ | ||
| active.set(0); | ||
| } | ||
| else{ | ||
| active.set(section); | ||
| } | ||
| } | ||
| function expandLink(link){ | ||
| return "products/"+link; | ||
| } | ||
| </script> | ||
|
|
||
| <svelte:window bind:innerWidth={width} /> | ||
|
|
||
| <div class="grid grid-cols-1 lg:h-5/6" class:lg:grid-cols-6={products.length == 3} class:lg:grid-cols-7={products.length == 4}> | ||
| <!-- svelte-ignore a11y-click-events-have-key-events --> | ||
| <div role="button" tabindex="0" class="flex flex-col col-span-1 justify-end lg:justify-normal h-96 px-16 lg:px-32 {($active==0 && !$mobile) ? 'col-span-3': ''} {($active!=0 && !$mobile) ? 'col-span-2': ''} bg-[url('/images/shaking_hands.png')] bg-auto bg-no-repeat bg-cover lg:h-full" on:click={() => setActive(0)}> | ||
| <div class="h-1/4"></div> | ||
| <div class="py-8 text-mcswf-gold font-bold text-center font-expressway text-xl lg:text-4xl"> | ||
| OUR PRODUCT PORTFOLIO | ||
| </div> | ||
| <div class="text-base lg:text-2xl font-expressway text-center py-8"> | ||
| Real solutions to real problems - Created for Marines, by Marines at the Marine Corps Software Factory | ||
| </div> | ||
| </div> | ||
| <!-- svelte-ignore a11y-click-events-have-key-events --> | ||
| {#each products as product} | ||
| <div role="button" tabindex="0" class="h-fit lg:h-full {($active==product.data.order && !$mobile) ? 'col-span-2': 'col-span-1'} red-radial-gradient" on:click={() => setActive(product.data.order)} > | ||
| <div class="relative h-full lg:border-x lg:border-y-0 border-y"> | ||
| <AccordionSection | ||
| text={product.data.description} | ||
| title={product.data.product} | ||
| sequence={product.data.order} | ||
| href={expandLink(product.id)} | ||
| /> | ||
| </div> | ||
| </div> | ||
| {/each} | ||
| </div> | ||
|
|
||
| <FooterFull></FooterFull> | ||
|
|
||
|
|
||
|
|
||
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,56 @@ | ||
| --- | ||
| import Layout from '../../layouts/Layout.astro' | ||
| import { getCollection } from 'astro:content' | ||
| import { displaySiteBanner } from '../../components/stores.js' | ||
| import Layout from '../../layouts/Layout.astro'; | ||
| import { getCollection } from 'astro:content'; | ||
| import { displaySiteBanner } from '../../components/stores.js'; | ||
| import FooterFull from '@components/FooterFull.svelte'; | ||
| import '../../styles/global.css' | ||
| import '../../styles/fonts.css' | ||
| import Accordion from '../../components/accordion/Accordion.svelte' | ||
| const products = await getCollection('products') | ||
| displaySiteBanner.set(false) | ||
| import '../../styles/global.css'; | ||
| import '../../styles/fonts.css'; | ||
| import Hero from '../../components/elements/Hero.svelte'; | ||
| import ContentImageFull from '../../components/sections/ContentImageFull.svelte'; | ||
| const products = await getCollection('products'); | ||
| displaySiteBanner.set(false); | ||
| products.sort((a,b) => a.data.order - b.data.order) | ||
| --- | ||
|
|
||
| <Layout title=""> | ||
| <div class="bg-black h-screen"> | ||
| <Accordion products={products} client:only /> | ||
|
|
||
|
|
||
| <Layout title='Overview'> | ||
| <div | ||
| class='fixed left-0 z-10 flex justify-center w-full align-middle top-24 h-5/6'> | ||
| <img src='/ega.svg' /> | ||
| </div> | ||
| <div class='relative font-expressway red-radial-gradient scrollbar-hide'> | ||
| <div | ||
| class="relative z-20 h-fit bg-[url('/images/Overview_hero.svg')] bg-top bg-cover bg-center bg-no-repeat rounded-b-2xl lg:rounded-none"> | ||
| <div | ||
| class='bg-gradient-to-t from-black py-20 rounded-b-2xl lg:rounded-none'> | ||
| <Hero | ||
| padding='pt-24' | ||
| title='OUR PRODUCT PORTFOLIO' | ||
| content='Real solutions to real problems - Created for Marines, by Marines at the Marine Corps Software Factory.' | ||
| contentClasses='pt-5' | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div class='relative z-20'> | ||
| {products.map(e => ( | ||
|
|
||
| <ContentImageFull | ||
| flipped = { e.data.order % 2 === 0 } | ||
| link=`products/${e.id}` | ||
| linkText='LEARN MORE' | ||
| title=`<span class="flex"><span class='text-mcswf-gold text-[48px] flex-shrink lg:text-[64px] font-menobanner font-light'>0${e.data.order}</span> <span class='ml-2 text-[32px] lg:ml-5'>${e.data['product']}</span></span>` | ||
| content={e.data['description']} | ||
| image={e.data['image2'].src} | ||
| imageClasses='' | ||
| titleClasses='text-white tracking-[4px]' | ||
| /> | ||
| ), | ||
| )} | ||
| </div> | ||
| <div class='pt-20 relative z-20'> | ||
| <FooterFull client:only /> | ||
| </div> | ||
| </div> | ||
| </Layout> |