Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@aweell
aweell committed Nov 28, 2024
1 parent 32b98a4 commit f4dd900
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 124 deletions.
8 changes: 6 additions & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,19 @@
content="Mistica design team"
data-react-helmet="true"
/>
<meta property="og:title" content="Wrapped 2023" data-react-helmet="true" />
<meta
property="og:title"
content="Advent calendar 2024"
data-react-helmet="true"
/>
<meta
property="og:description"
content="Mistica design team"
data-react-helmet="true"
/>
<meta
property="og:image"
content="https://mistica-design-dg8f5xdzr-aweell.vercel.app/static/media/thumbnail.bd98c1039c876d408948.png"
content="https://mistica-design-qwb4-lqrrl9njr-alex-buenos-projects.vercel.app/static/media/coming-soon.f61036da17b3da68badb.png"
data-react-helmet="true"
/>
<meta
Expand Down
218 changes: 121 additions & 97 deletions src/pages/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,21 @@ import TeamMember from "../components/teamMember";
import thumbnailWrapped2023 from "../pages/wrapped2023/assets/thumbnail.png";
import skinTool from "../img/skin-tool.png";
import AppLayout from "../components/app-layout";
import ComingSoon from "../pages/advent-calendar-2024/assets/images/coming-soon.png";
import { Helmet } from "react-helmet";

const Home = () => {
const { isDesktopOrBigger } = useScreenSize();
const { isDarkMode } = useTheme();

const projects = [
{
title: "Mística 2024",
description: "Coming soon...",
link: "/advent-calendar-2024",
buttonLabel: "Visit",
image: ComingSoon,
},
{
title: "Mistica wrapped 2023",
description:
Expand Down Expand Up @@ -175,109 +184,124 @@ const Home = () => {
];

return (
<AppLayout>
<Slideshow
inverseBullets={isDarkMode ? true : false}
withBullets
items={projects.map((project, index) => (
<Hero
headline={
<ThemeVariant isInverse>
<Tag type="active">Project</Tag>
</ThemeVariant>
}
background="alternative"
title={project.title}
description={project.description}
media={
<Image
height={"100%"}
src={project.image}
aspectRatio="4:3"
></Image>
}
buttonLink={
<ButtonLink to={project.link} newTab={true}>
{project.buttonLabel}
</ButtonLink>
}
></Hero>
))}
></Slideshow>
<>
<Helmet>
<title>Advent calendar</title>
<meta name="description" content="Coming soon..." />
<meta property="og:title" content="Advent calendar" />
<meta property="og:description" content="Coming soon..." />
<meta
property="og:image"
content="https://mistica-design-qwb4-lqrrl9njr-alex-buenos-projects.vercel.app/static/media/coming-soon.f61036da17b3da68badb.png"
/>
<meta property="twitter:title" content="Advent calendar" />
<meta property="twitter:description" content="Coming soon..." />
<meta property="twitter:card" content="summary_large_image" />
</Helmet>
<AppLayout>
<Slideshow
inverseBullets={isDarkMode ? true : false}
withBullets
items={projects.map((project, index) => (
<Hero
headline={
<ThemeVariant isInverse>
<Tag type="active">Project</Tag>
</ThemeVariant>
}
background="alternative"
title={project.title}
description={project.description}
media={
<Image
height={"100%"}
src={project.image}
aspectRatio="4:3"
></Image>
}
buttonLink={
<ButtonLink to={project.link} newTab={true}>
{project.buttonLabel}
</ButtonLink>
}
></Hero>
))}
></Slideshow>

<ResponsiveLayout>
<Box paddingY={isDesktopOrBigger ? 120 : 24}>
<Stack space={80}>
<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Our resources</Title2>
<ResponsiveLayout>
<Box paddingY={isDesktopOrBigger ? 120 : 24}>
<Stack space={80}>
<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Our resources</Title2>

<SubGrid columns={isDesktopOrBigger ? resources.length : 1}>
{resources.map((resource, index) => (
<DisplayDataCard
isInverse={resource.inverse}
key={index}
icon={
<Circle
size={40}
backgroundColor={skinVars.colors.brandLow}
>
{resource.icon}
</Circle>
}
title={resource.title}
buttonLink={
<ButtonLink href={resource.link}>
{resource.buttonLabel}
</ButtonLink>
}
/>
))}
</SubGrid>
</Stack>
</Box>

<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Guides</Title2>
<NegativeBox>
<RowList>
{guides.map((guide, index) => (
<Row
index={index + 1}
title={guide.title}
description={guide.description}
onPress={() => {
window.open(guide.link, "_blank");
}}
<SubGrid columns={isDesktopOrBigger ? resources.length : 1}>
{resources.map((resource, index) => (
<DisplayDataCard
isInverse={resource.inverse}
key={index}
icon={
<Circle
size={40}
backgroundColor={skinVars.colors.brandLow}
>
{resource.icon}
</Circle>
}
title={resource.title}
buttonLink={
<ButtonLink href={resource.link}>
{resource.buttonLabel}
</ButtonLink>
}
/>
))}
</RowList>
</NegativeBox>
</Stack>
</Box>
</SubGrid>
</Stack>
</Box>

<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Guides</Title2>
<NegativeBox>
<RowList>
{guides.map((guide, index) => (
<Row
index={index + 1}
title={guide.title}
description={guide.description}
onPress={() => {
window.open(guide.link, "_blank");
}}
/>
))}
</RowList>
</NegativeBox>
</Stack>
</Box>

<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Meet the team</Title2>
<Box paddingY={isDesktopOrBigger ? 40 : 24}>
<Stack space={48}>
<Title2>Meet the team</Title2>

<SubGrid columns={isDesktopOrBigger ? 2 : 1} gap={48}>
{team.map((member, index) => (
<TeamMember
key={index}
name={member.name}
description={member.description}
src={member.src}
src2={member.src2}
></TeamMember>
))}
</SubGrid>
</Stack>
</Box>
</Stack>
</Box>
</ResponsiveLayout>
</AppLayout>
<SubGrid columns={isDesktopOrBigger ? 2 : 1} gap={48}>
{team.map((member, index) => (
<TeamMember
key={index}
name={member.name}
description={member.description}
src={member.src}
src2={member.src2}
></TeamMember>
))}
</SubGrid>
</Stack>
</Box>
</Stack>
</Box>
</ResponsiveLayout>
</AppLayout>
</>
);
};

Expand Down
Binary file added src/pages/advent-calendar-2024/assets/images/coming-soon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 19 additions & 1 deletion src/pages/advent-calendar-2024/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import ComingSoonPage from "./pages/coming-soon";
import CalendarView from "./pages/calendar-view";

import { RELEASE_DATE } from "./utils/constants";
import { Helmet } from "react-helmet";

const targetDate = new Date(RELEASE_DATE);

Expand All @@ -26,7 +27,24 @@ const AdventCalendar2024 = () => {
}, []);

if (!isReleased) {
return <ComingSoonPage targetDate={targetDate.toLocaleString()} />;
return (
<>
<Helmet>
<title>Advent calendar</title>
<meta name="description" content="Coming soon..." />
<meta property="og:title" content="Advent calendar" />
<meta property="og:description" content="Coming soon..." />
<meta
property="og:image"
content="https://mistica-design-qwb4-lqrrl9njr-alex-buenos-projects.vercel.app/static/media/coming-soon.f61036da17b3da68badb.png"
/>
<meta property="twitter:title" content="Advent calendar" />
<meta property="twitter:description" content="Coming soon..." />
<meta property="twitter:card" content="summary_large_image" />
</Helmet>
<ComingSoonPage targetDate={targetDate.toLocaleString()} />
</>
);
}

return <CalendarView />;
Expand Down
24 changes: 0 additions & 24 deletions src/pages/wrapped2023/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { teamsMembers } from "./data/teamsData";
import { medianBFSessions } from "./data/brandFactoryData";
import { releases, mergedPRs } from "./data/devData";
import { formatCount } from "./utils";
import { Helmet } from "react-helmet";
import thumbnail from "./assets/thumbnail.png";

import {
Title2,
Expand Down Expand Up @@ -102,28 +100,6 @@ const Wrapped2023 = () => {

return (
<>
<Helmet>
<title>Wrapped 2023</title>
<meta
name="description"
content="Wrapped 2023 is a celebration of the work of the Telefonica Design System team in 2023"
/>
<meta property="og:title" content="Wrapped 2023" />
<meta
property="og:description"
content="Wrapped 2023 is a celebration of the work of the Telefonica Design System team in 2023"
/>
<meta
property="og:image"
content="https://mistica-design-dg8f5xdzr-aweell.vercel.app/static/media/thumbnail.bd98c1039c876d408948.png"
/>
<meta property="twitter:title" content="Wrapped 2023" />
<meta
property="twitter:description"
content="Wrapped 2023 is a celebration of the work of the Telefonica Design System team in 2023"
/>
<meta property="twitter:card" content="summary_large_image" />
</Helmet>
<Wrapper>
<Section color="#031A34">
<Cover></Cover>
Expand Down

0 comments on commit f4dd900

Please sign in to comment.