tailwind and coming soon page
This commit is contained in:
Lucas
@@ -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
726
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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"
|
||||||
}
|
}
|
||||||
|
|||||||
150
src/App.vue
150
src/App.vue
@@ -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">
|
||||||
|
<!-- 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>
|
</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
1
src/assets/main.css
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
16
src/components/FeatureCard.vue
Normal file
16
src/components/FeatureCard.vue
Normal 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
23
src/components/ui/Button.vue
Normal 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
26
src/components/ui/Input.vue
Normal 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
6
src/lib/utils.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { clsx } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
@@ -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: {
|
||||||
|
|||||||
Reference in New Issue
Block a user