tailwind and coming soon page
This commit is contained in:
Lucas
@@ -4,7 +4,8 @@
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<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>
|
||||
<body>
|
||||
<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"
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.2",
|
||||
"autoprefixer": "^10.4.22",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^4.1.17",
|
||||
"vite": "^7.2.4",
|
||||
"vite-plugin-vue-devtools": "^8.0.5"
|
||||
}
|
||||
|
||||
152
src/App.vue
152
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>
|
||||
<h1>You did it!</h1>
|
||||
<p>
|
||||
Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
|
||||
documentation
|
||||
</p>
|
||||
<div class="min-h-screen bg-gradient-to-b from-[#0a0a0a] via-[#1a1a2e] to-[#0a0a0a] text-white">
|
||||
<!-- Hero Section -->
|
||||
<div class="container mx-auto px-4 py-20">
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<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 vue from '@vitejs/plugin-vue'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools(),
|
||||
tailwindcss(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
|
||||
Reference in New Issue
Block a user