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

feat: add public site pages and social login

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-05-04 16:13:57 -04:00
parent cd6f402d9e
commit 802668fb0b
9 changed files with 617 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/features/landing/views/BlogsPage.vue Normal file
View File

@@ -0,0 +1,52 @@
<script setup>
import LandingSiteMenu from '@/features/landing/components/LandingSiteMenu.vue';
</script>
<template>
<div class="public-page">
<LandingSiteMenu />
<main class="public-page-content">
<section class="public-page-panel">
<div class="eyebrow">Blogs</div>
<h1>Practical notes on content review workflows.</h1>
<p>
Articles are coming soon. This area will cover approval operations, client review habits,
revision tracking, and publication handoff.
</p>
</section>
</main>
</div>
</template>
<style scoped>
.public-page {
@apply min-h-screen w-full;
}
.public-page-content {
@apply mx-auto flex w-full max-w-7xl flex-col px-5 py-8 md:px-8 md:py-12;
}
.public-page-panel {
@apply rounded-[2rem] p-6 md:p-10;
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);
}
.eyebrow {
@apply text-xs font-bold uppercase tracking-[0.26em];
color: #ff8a3d;
}
h1 {
@apply mt-4 max-w-4xl text-4xl font-black leading-tight md:text-6xl;
color: #172033;
}
p {
@apply mt-5 max-w-3xl text-base leading-7 md:text-lg;
color: #44516a;
}
</style>

52
frontend/src/features/landing/views/GuidesPage.vue Normal file
View File

@@ -0,0 +1,52 @@
<script setup>
import LandingSiteMenu from '@/features/landing/components/LandingSiteMenu.vue';
</script>
<template>
<div class="public-page">
<LandingSiteMenu />
<main class="public-page-content">
<section class="public-page-panel">
<div class="eyebrow">Guides</div>
<h1>Reusable guides for managing review and approval work.</h1>
<p>
Guides are coming soon. This area will collect repeatable playbooks for content intake,
review rounds, approval decisions, and delivery readiness.
</p>
</section>
</main>
</div>
</template>
<style scoped>
.public-page {
@apply min-h-screen w-full;
}
.public-page-content {
@apply mx-auto flex w-full max-w-7xl flex-col px-5 py-8 md:px-8 md:py-12;
}
.public-page-panel {
@apply rounded-[2rem] p-6 md:p-10;
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);
}
.eyebrow {
@apply text-xs font-bold uppercase tracking-[0.26em];
color: #ff8a3d;
}
h1 {
@apply mt-4 max-w-4xl text-4xl font-black leading-tight md:text-6xl;
color: #172033;
}
p {
@apply mt-5 max-w-3xl text-base leading-7 md:text-lg;
color: #44516a;
}
</style>

101
frontend/src/features/landing/views/Landing.vue
View File

@@ -1,5 +1,6 @@
<script setup>
import { computed } from 'vue';
import LandingSiteMenu from '@/features/landing/components/LandingSiteMenu.vue';
const pillars = computed(() => [
{
@@ -25,37 +26,43 @@
</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="landing-page">
<LandingSiteMenu />
<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>
<main class="landing-shell">
<section
id="products"
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
@@ -88,10 +95,28 @@
</div>
</div>
</section>
<section
id="pricing"
class="pricing-card"
>
<div>
<div class="eyebrow">Pricing</div>
<h2>Workspace pricing for teams that manage content approvals with clients.</h2>
</div>
<router-link to="/login">
<button class="secondary pricing-action">Open the app</button>
</router-link>
</section>
</main>
</div>
</template>
<style scoped>
.landing-page {
@apply min-h-screen w-full;
}
.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;
}
@@ -189,4 +214,20 @@
@apply mt-2 block text-sm leading-6;
color: #3f4d63;
}
.pricing-card {
@apply flex flex-col gap-5 rounded-[1.75rem] p-6 md:flex-row md:items-center md:justify-between md:p-8;
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);
}
.pricing-card h2 {
@apply mt-3 max-w-3xl text-2xl font-black leading-tight md:text-3xl;
color: #172033;
}
.pricing-action {
@apply w-full sm:w-auto;
}
</style>

68
frontend/src/features/landing/views/PricingPage.vue Normal file
View File

@@ -0,0 +1,68 @@
<script setup>
import LandingSiteMenu from '@/features/landing/components/LandingSiteMenu.vue';
</script>
<template>
<div class="public-page">
<LandingSiteMenu />
<main class="public-page-content">
<section class="public-page-panel">
<div class="eyebrow">Pricing</div>
<h1>Simple workspace pricing for teams managing client approvals.</h1>
<p>
Pricing details are coming soon. For now, Socialize is focused on the core review workflow:
workspaces, content items, assets, comments, and approval decisions.
</p>
<router-link
class="pricing-login"
to="/login"
>
Login
</router-link>
</section>
</main>
</div>
</template>
<style scoped>
.public-page {
@apply min-h-screen w-full;
}
.public-page-content {
@apply mx-auto flex w-full max-w-7xl flex-col px-5 py-8 md:px-8 md:py-12;
}
.public-page-panel {
@apply rounded-[2rem] p-6 md:p-10;
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);
}
.eyebrow {
@apply text-xs font-bold uppercase tracking-[0.26em];
color: #ff8a3d;
}
h1 {
@apply mt-4 max-w-4xl text-4xl font-black leading-tight md:text-6xl;
color: #172033;
}
p {
@apply mt-5 max-w-3xl text-base leading-7 md:text-lg;
color: #44516a;
}
.pricing-login {
@apply mt-8 inline-flex h-11 w-fit items-center rounded-full px-5 text-sm font-bold no-underline transition-colors;
background: #172033;
color: #fffaf2;
}
.pricing-login:hover {
background: #0f766e;
}
</style>

52
frontend/src/features/landing/views/ProductPage.vue Normal file
View File

@@ -0,0 +1,52 @@
<script setup>
import LandingSiteMenu from '@/features/landing/components/LandingSiteMenu.vue';
</script>
<template>
<div class="public-page">
<LandingSiteMenu />
<main class="public-page-content">
<section class="public-page-panel">
<div class="eyebrow">Product</div>
<h1>Social media content approval, organized around the work itself.</h1>
<p>
Socialize keeps content items, assets, revisions, comments, approval decisions, and publishing
handoff details in one workspace so teams do not have to coordinate review across scattered tools.
</p>
</section>
</main>
</div>
</template>
<style scoped>
.public-page {
@apply min-h-screen w-full;
}
.public-page-content {
@apply mx-auto flex w-full max-w-7xl flex-col px-5 py-8 md:px-8 md:py-12;
}
.public-page-panel {
@apply rounded-[2rem] p-6 md:p-10;
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);
}
.eyebrow {
@apply text-xs font-bold uppercase tracking-[0.26em];
color: #ff8a3d;
}
h1 {
@apply mt-4 max-w-4xl text-4xl font-black leading-tight md:text-6xl;
color: #172033;
}
p {
@apply mt-5 max-w-3xl text-base leading-7 md:text-lg;
color: #44516a;
}
</style>