jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: organize frontend by feature
Some checks failed
Backend CI/CD / build_and_deploy (push) Has been cancelled
Details
Frontend CI/CD / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-04-25 01:05:50 -04:00
parent b6eb692c27
commit 121757546a
60 changed files with 107 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
frontend/src/features/landing/views/Landing.vue Normal file
View File

@@ -0,0 +1,192 @@
<script setup>
import { computed } from 'vue';
const pillars = computed(() => [
{
eyebrow: 'Single source of truth',
title: 'Comments, revisions, decisions, and due dates stay attached to one content item.',
},
{
eyebrow: 'Built for agencies',
title: 'Coordinate internal teams, providers, and client approvers without chasing email threads.',
},
{
eyebrow: 'Google Drive first',
title: 'Keep Drive as the asset owner when clients require it, while centralizing workflow in Socialize.',
},
]);
const workflow = computed(() => [
'Create a content item with copy, targets, due dates, and review notes.',
'Attach Google Drive assets and register revisions as feedback comes in.',
'Request internal review, then client approval, with a clear audit trail.',
'Mark the item ready for publishing handoff once approvals are complete.',
]);
</script>
<template>
<div class="landing-shell">
<section class="hero-card">
<div class="hero-copy">
<div class="eyebrow">Social media approval workflow</div>
<h1>Replace Drive links, scattered comments, and manual follow-up with one review system.</h1>
<p>
Socialize is being rebuilt as an agency workflow product for content review, revision tracking,
client approval, and publication readiness.
</p>
<div class="hero-actions">
<router-link to="/login">
<button class="primary">Open the app</button>
</router-link>
<router-link to="/register">
<button class="secondary">Create an internal account</button>
</router-link>
</div>
</div>
<div class="hero-panel">
<div class="hero-panel-title">Version 1 workflow</div>
<ol class="workflow-list">
<li
v-for="step in workflow"
:key="step"
>
{{ step }}
</li>
</ol>
</div>
</section>
<section class="pillars-grid">
<article
v-for="pillar in pillars"
:key="pillar.title"
class="pillar-card"
>
<div class="eyebrow">{{ pillar.eyebrow }}</div>
<p>{{ pillar.title }}</p>
</article>
</section>
<section class="focus-card">
<div>
<div class="eyebrow">Current build focus</div>
<h2>Phase 1 into Phase 2: retire the creator product surface and install the workflow domain shell.</h2>
</div>
<div class="focus-metrics">
<div>
<strong>Clients</strong>
<span>Brands and businesses under one workspace</span>
</div>
<div>
<strong>Campaigns</strong>
<span>Grouped work tied to timelines, approvals, and delivery goals</span>
</div>
<div>
<strong>Content items</strong>
<span>Reviewable units with assets, copy, and approvals</span>
</div>
</div>
</section>
</div>
</template>
<style scoped>
.landing-shell {
@apply mx-auto flex w-full max-w-7xl flex-col gap-8 px-5 py-8 md:px-8 md:py-12;
}
.hero-card {
@apply grid gap-6 rounded-[2rem] p-6 md:grid-cols-[1.4fr_0.9fr] md:p-10;
background: linear-gradient(145deg, #172033 0%, #25324b 65%, #314766 100%);
color: #fffaf2;
box-shadow: 0 30px 80px rgba(23, 32, 51, 0.18);
}
.hero-copy {
@apply flex flex-col gap-5;
}
.hero-copy h1 {
@apply max-w-3xl text-4xl font-black leading-tight md:text-6xl;
}
.hero-copy p {
@apply max-w-2xl text-base leading-7 md:text-lg;
color: rgba(255, 250, 242, 0.84);
}
.eyebrow {
@apply text-xs font-bold uppercase tracking-[0.26em];
color: #ffb26b;
}
.hero-actions {
@apply flex flex-col gap-3 sm:flex-row;
}
.hero-panel {
@apply rounded-[1.5rem] p-6;
background: rgba(255, 250, 242, 0.08);
border: 1px solid rgba(255, 250, 242, 0.12);
}
.hero-panel-title {
@apply mb-4 text-sm font-bold uppercase tracking-[0.22em];
color: #7dd3c7;
}
.workflow-list {
@apply flex list-decimal flex-col gap-4 pl-5;
}
.workflow-list li {
@apply text-sm leading-6 md:text-base;
}
.pillars-grid {
@apply grid gap-4 md:grid-cols-3;
}
.pillar-card {
@apply rounded-[1.5rem] p-6;
background: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(23, 32, 51, 0.08);
box-shadow: 0 18px 40px rgba(23, 32, 51, 0.06);
}
.pillar-card p {
@apply mt-3 text-lg font-semibold leading-7;
color: #172033;
}
.focus-card {
@apply grid gap-6 rounded-[1.75rem] p-6 md:grid-cols-[1fr_1.1fr] md:p-8;
background: linear-gradient(135deg, rgba(255, 138, 61, 0.12), rgba(52, 211, 153, 0.1));
border: 1px solid rgba(23, 32, 51, 0.08);
}
.focus-card h2 {
@apply mt-3 text-2xl font-black leading-tight md:text-3xl;
color: #172033;
}
.focus-metrics {
@apply grid gap-4 md:grid-cols-3;
}
.focus-metrics div {
@apply rounded-[1.25rem] bg-white/70 p-5;
border: 1px solid rgba(23, 32, 51, 0.06);
}
.focus-metrics strong {
@apply block text-sm font-black uppercase tracking-[0.18em];
color: #0f766e;
}
.focus-metrics span {
@apply mt-2 block text-sm leading-6;
color: #3f4d63;
}
</style>