lucas/nosys_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tailwind and coming soon page

Browse Source
This commit is contained in:
Lucas
2025-12-08 23:25:22 +10:00
parent abc991a8be
commit 6fe01cbb0d
10 changed files with 895 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -4,7 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <link href="/src/assets/main.css" rel="stylesheet">
<title>NoSys</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

726
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -12,10 +12,17 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@tailwindcss/vite": "^4.1.17",
"clsx": "^2.1.1",
"lucide-vue-next": "^0.556.0",
"tailwind-merge": "^3.4.0",
"vue": "^3.5.25" "vue": "^3.5.25"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^6.0.2", "@vitejs/plugin-vue": "^6.0.2",
"autoprefixer": "^10.4.22",
"postcss": "^8.5.6",
"tailwindcss": "^4.1.17",
"vite": "^7.2.4", "vite": "^7.2.4",
"vite-plugin-vue-devtools": "^8.0.5" "vite-plugin-vue-devtools": "^8.0.5"
} }

152
src/App.vue
View File

@@ -1,11 +1,151 @@
<script setup></script> <script setup>
import { ref } from 'vue';
import { MessageSquare, Shield, Lock, Users, Clock, AlertTriangle, Eye, Zap } from 'lucide-vue-next';
import Button from '@/components/ui/Button.vue';
import Input from '@/components/ui/Input.vue';
import FeatureCard from '@/components/FeatureCard.vue';
const email = ref('');
const submitted = ref(false);
const handleSubmit = () => {
if (email.value) {
submitted.value = true;
setTimeout(() => {
email.value = '';
submitted.value = false;
}, 3000);
}
};
</script>
<template> <template>
<h1>You did it!</h1> <div class="min-h-screen bg-gradient-to-b from-[#0a0a0a] via-[#1a1a2e] to-[#0a0a0a] text-white">
<p> <!-- Hero Section -->
Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the <div class="container mx-auto px-4 py-20">
documentation <div class="flex flex-col items-center justify-center text-center space-y-8 max-w-4xl mx-auto">
</p> <!-- Logo/Brand -->
<div class="flex items-center gap-3 mb-4">
<div class="w-16 h-16 bg-gradient-to-br from-[#ff6b6b] to-[#ee5a6f] rounded-lg flex items-center justify-center shadow-lg shadow-[#ff6b6b]/50">
<MessageSquare class="w-8 h-8 text-white" />
</div>
<h1 class="text-6xl font-bold bg-gradient-to-r from-[#ff6b6b] to-[#ee5a6f] bg-clip-text text-transparent">
NoSys
</h1>
</div>
<!-- Tagline -->
<h2 class="text-4xl md:text-5xl font-bold leading-tight">
Reclaim Your Right to
<span class="bg-gradient-to-r from-[#ff6b6b] to-[#ee5a6f] bg-clip-text text-transparent">
Free Speech
</span>
</h2>
<!-- Description -->
<p class="text-xl text-gray-300 max-w-2xl leading-relaxed">
A decentralized, peer-to-peer social media platform where your voice can't be silenced.
No big tech. No government control. Just pure, unfiltered freedom of expression.
</p>
<!-- Coming Soon Badge -->
<div class="inline-flex items-center gap-2 bg-[#ff6b6b]/20 border border-[#ff6b6b]/50 rounded-full px-6 py-3 backdrop-blur-sm">
<Clock class="w-5 h-5 text-[#ff6b6b]" />
<span class="font-semibold text-[#ff6b6b]">Coming Soon</span>
</div>
<!-- Email Signup -->
<!-- <div class="w-full max-w-md mt-8">
<form @submit.prevent="handleSubmit" class="flex flex-col sm:flex-row gap-3">
<Input
type="email"
placeholder="Enter your email"
v-model="email"
required
class="flex-1 bg-white/10 border-white/20 text-white placeholder:text-gray-400 focus:border-[#ff6b6b] focus:ring-[#ff6b6b]"
/>
<Button
type="submit"
class="bg-gradient-to-r from-[#ff6b6b] to-[#ee5a6f] hover:from-[#ee5a6f] hover:to-[#ff6b6b] text-white font-semibold px-8 shadow-lg shadow-[#ff6b6b]/50"
>
Notify Me
</Button>
</form>
<p v-if="submitted" class="text-sm text-[#ff6b6b] mt-3 text-center">
✓ Thanks! We'll notify you when we launch.
</p>
</div> -->
</div>
</div>
<!-- Features Section -->
<div class="container mx-auto px-4 py-20">
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<FeatureCard
:icon="Shield"
title="Decentralized"
description="Built on peer-to-peer technology. No central servers, no single point of failure or censorship."
/>
<FeatureCard
:icon="Lock"
title="Privacy First"
description="End-to-end encryption ensures your conversations remain private and secure from prying eyes."
/>
<FeatureCard
:icon="Users"
title="Community Owned"
description="Governed by the people, for the people. Your platform, your rules, your freedom."
/>
</div>
</div>
<!-- Why NoSys Section -->
<div class="container mx-auto px-4 py-20">
<div class="max-w-4xl mx-auto">
<h3 class="text-3xl font-bold text-center mb-12">
Why We're Building <span class="text-[#ff6b6b]">NoSys</span>
</h3>
<div class="space-y-6 text-lg text-gray-300 leading-relaxed">
<div class="flex gap-4 items-start">
<div class="flex-shrink-0 w-8 h-8 bg-[#ff6b6b]/20 rounded-full flex items-center justify-center mt-1">
<AlertTriangle class="w-5 h-5 text-[#ff6b6b]" />
</div>
<div>
<h4 class="font-semibold text-white mb-2">Big Tech Censorship</h4>
<p>Major platforms decide what you can and cannot say, silencing voices that don't fit their narrative.</p>
</div>
</div>
<div class="flex gap-4 items-start">
<div class="flex-shrink-0 w-8 h-8 bg-[#ff6b6b]/20 rounded-full flex items-center justify-center mt-1">
<Eye class="w-5 h-5 text-[#ff6b6b]" />
</div>
<div>
<h4 class="font-semibold text-white mb-2">Government Surveillance</h4>
<p>Your data is constantly monitored, collected, and analyzed without your meaningful consent.</p>
</div>
</div>
<div class="flex gap-4 items-start">
<div class="flex-shrink-0 w-8 h-8 bg-[#ff6b6b]/20 rounded-full flex items-center justify-center mt-1">
<Zap class="w-5 h-5 text-[#ff6b6b]" />
</div>
<div>
<h4 class="font-semibold text-white mb-2">Time for Change</h4>
<p>We deserve a platform that respects fundamental human rights and values true freedom of expression.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="border-t border-white/10 py-12">
<div class="container mx-auto px-4">
<div class="flex flex-col items-center justify-center space-y-4">
<div class="flex items-center gap-2">
<MessageSquare class="w-6 h-6 text-[#ff6b6b]" />
<span class="font-bold text-xl">NoSys</span>
</div>
<p class="text-gray-400 text-sm text-center max-w-md">
Fighting for free speech, one decentralized connection at a time.
</p>
<p class="text-gray-500 text-xs">
© 2026 NoSys. No rights reserved.
</p>
</div>
</div>
</footer>
</div>
</template> </template>
<style scoped></style> <style scoped></style>

1
src/assets/main.css Normal file
View File

@@ -0,0 +1 @@
@import "tailwindcss";

16
src/components/FeatureCard.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300 hover:border-[#ff6b6b]/50 hover:shadow-lg hover:shadow-[#ff6b6b]/20">
<div class="w-12 h-12 bg-gradient-to-br from-[#ff6b6b] to-[#ee5a6f] rounded-lg flex items-center justify-center mb-4 shadow-lg shadow-[#ff6b6b]/30">
<component :is="icon" class="w-6 h-6 text-white" />
</div>
<h3 class="text-xl font-bold mb-2 text-white">{{ title }}</h3>
<p class="text-gray-300 leading-relaxed">{{ description }}</p>
</div>
</template>
<script setup>
defineProps({
icon: Object,
title: String,
description: String,
});
</script>

23
src/components/ui/Button.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<button
:class="cn(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
'h-10 py-2 px-4',
className
)"
:disabled="disabled"
v-bind="$attrs"
>
<slot>
</slot>
</button>
</template>
<script setup>
import { cn } from '@/lib/utils';
defineProps({
className: String,
disabled: Boolean
});
</script>

26
src/components/ui/Input.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<input
:class="cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className
)"
:type="type"
:placeholder="placeholder"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
v-bind="$attrs"
/>
</template>
<script setup>
import { cn } from '@/lib/utils';
defineProps({
type: String,
placeholder: String,
modelValue: String,
className: String,
});
const emit = defineEmits(['update:modelValue']);
</script>

6
src/lib/utils.js Normal file
View File

@@ -0,0 +1,6 @@
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs) {
return twMerge(clsx(inputs));
}

2
vite.config.js
View File

@@ -3,12 +3,14 @@ import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools' import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
vue(), vue(),
vueDevTools(), vueDevTools(),
tailwindcss(),
], ],
resolve: { resolve: {
alias: { alias: {