Skip to content

Commit 9bfa6f4

Browse files
blackboxaicodeblackboxaicode
committed
Create a 3D interactive website concept for Full L...
1 parent 9066cac commit 9bfa6f4

File tree

14 files changed

+996
-0
lines changed

14 files changed

+996
-0
lines changed

‎fulllink-website/app/globals.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Cairo:wght@300;400;600;700;900&display=swap');
6+
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
box-sizing: border-box;
11+
}
12+
13+
html {
14+
scroll-behavior: smooth;
15+
}
16+
17+
body {
18+
font-family: 'Inter', sans-serif;
19+
background-color: #0A1628;
20+
color: #ffffff;
21+
overflow-x: hidden;
22+
}
23+
24+
.arabic {
25+
font-family: 'Cairo', sans-serif;
26+
direction: rtl;
27+
}
28+
29+
/* Custom scrollbar */
30+
::-webkit-scrollbar {
31+
width: 8px;
32+
}
33+
34+
::-webkit-scrollbar-track {
35+
background: #0A1628;
36+
}
37+
38+
::-webkit-scrollbar-thumb {
39+
background: #00D4FF;
40+
border-radius: 4px;
41+
}
42+
43+
::-webkit-scrollbar-thumb:hover {
44+
background: #33ddff;
45+
}
46+
47+
/* Glow effects */
48+
.glow-text {
49+
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5),
50+
0 0 20px rgba(0, 212, 255, 0.3),
51+
0 0 30px rgba(0, 212, 255, 0.2);
52+
}
53+
54+
.glow-box {
55+
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3),
56+
0 0 40px rgba(0, 212, 255, 0.2),
57+
inset 0 0 20px rgba(0, 212, 255, 0.1);
58+
}
59+
60+
/* Glass morphism */
61+
.glass {
62+
background: rgba(255, 255, 255, 0.05);
63+
backdrop-filter: blur(10px);
64+
border: 1px solid rgba(255, 255, 255, 0.1);
65+
}
66+
67+
/* Gradient text */
68+
.gradient-text {
69+
background: linear-gradient(135deg, #ffffff 0%, #00D4FF 100%);
70+
-webkit-background-clip: text;
71+
-webkit-text-fill-color: transparent;
72+
background-clip: text;
73+
}
74+
75+
/* Neon border */
76+
.neon-border {
77+
border: 2px solid #00D4FF;
78+
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5),
79+
inset 0 0 10px rgba(0, 212, 255, 0.2);
80+
}
81+
82+
/* Smooth transitions */
83+
.transition-smooth {
84+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
85+
}

‎fulllink-website/app/layout.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { Metadata } from "next";
2+
import "./globals.css";
3+
4+
export const metadata: Metadata = {
5+
title: "Full Link - Connect Your World in One Link",
6+
description: "Smart digital tool that combines all social media profiles, business links, and contact info into one customizable link.",
7+
};
8+
9+
export default function RootLayout({
10+
children,
11+
}: Readonly<{
12+
children: React.ReactNode;
13+
}>) {
14+
return (
15+
<html lang="en">
16+
<body>{children}</body>
17+
</html>
18+
);
19+
}

‎fulllink-website/components/ConnectionFlow.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
"use client";
2+
3+
import { useRef } from 'react';
4+
import { useFrame } from '@react-three/fiber';
5+
import * as THREE from 'three';
6+
7+
function FlowingLine({ start, end, color, delay }: { start: THREE.Vector3; end: THREE.Vector3; color: string; delay: number }) {
8+
const lineRef = useRef<THREE.Line>(null);
9+
const materialRef = useRef<THREE.LineBasicMaterial>(null);
10+
11+
useFrame((state) => {
12+
if (materialRef.current) {
13+
const opacity = (Math.sin(state.clock.getElapsedTime() * 2 + delay) + 1) / 2;
14+
materialRef.current.opacity = opacity * 0.8;
15+
}
16+
});
17+
18+
const points = [];
19+
const segments = 20;
20+
21+
for (let i = 0; i <= segments; i++) {
22+
const t = i / segments;
23+
const x = start.x + (end.x - start.x) * t;
24+
const y = start.y + (end.y - start.y) * t + Math.sin(t * Math.PI) * 0.5;
25+
const z = start.z + (end.z - start.z) * t;
26+
points.push(new THREE.Vector3(x, y, z));
27+
}
28+
29+
const geometry = new THREE.BufferGeometry().setFromPoints(points);
30+
31+
return (
32+
<line ref={lineRef} geometry={geometry}>
33+
<lineBasicMaterial
34+
ref={materialRef}
35+
color={color}
36+
transparent
37+
opacity={0.8}
38+
linewidth={2}
39+
/>
40+
</line>
41+
);
42+
}
43+
44+
function Node({ position, color }: { position: [number, number, number]; color: string }) {
45+
const meshRef = useRef<THREE.Mesh>(null);
46+
47+
useFrame((state) => {
48+
if (meshRef.current) {
49+
const scale = 1 + Math.sin(state.clock.getElapsedTime() * 3) * 0.2;
50+
meshRef.current.scale.set(scale, scale, scale);
51+
}
52+
});
53+
54+
return (
55+
<mesh ref={meshRef} position={position}>
56+
<sphereGeometry args={[0.15, 16, 16]} />
57+
<meshStandardMaterial
58+
color={color}
59+
emissive={color}
60+
emissiveIntensity={1}
61+
metalness={0.8}
62+
roughness={0.2}
63+
/>
64+
<pointLight color={color} intensity={2} distance={2} />
65+
</mesh>
66+
);
67+
}
68+
69+
export default function ConnectionFlow() {
70+
const nodes = [
71+
{ pos: [-3, 2, 0] as [number, number, number], color: '#E4405F' },
72+
{ pos: [-2, -1, 0] as [number, number, number], color: '#25D366' },
73+
{ pos: [0, 2.5, 0] as [number, number, number], color: '#0A66C2' },
74+
{ pos: [2, -1, 0] as [number, number, number], color: '#FF0000' },
75+
{ pos: [3, 1.5, 0] as [number, number, number], color: '#1DA1F2' },
76+
{ pos: [0, 0, 0] as [number, number, number], color: '#00D4FF' },
77+
];
78+
79+
return (
80+
<>
81+
<ambientLight intensity={0.5} />
82+
<pointLight position={[0, 0, 5]} intensity={1} />
83+
84+
{/* Nodes */}
85+
{nodes.map((node, index) => (
86+
<Node key={index} position={node.pos} color={node.color} />
87+
))}
88+
89+
{/* Connecting lines to center */}
90+
{nodes.slice(0, -1).map((node, index) => (
91+
<FlowingLine
92+
key={index}
93+
start={new THREE.Vector3(...node.pos)}
94+
end={new THREE.Vector3(0, 0, 0)}
95+
color={node.color}
96+
delay={index * 0.5}
97+
/>
98+
))}
99+
</>
100+
);
101+
}

‎fulllink-website/components/FloatingCards.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
"use client";
2+
3+
import { motion } from 'framer-motion';
4+
import { useState } from 'react';
5+
6+
interface CardProps {
7+
title: string;
8+
description: string;
9+
icon: string;
10+
delay: number;
11+
}
12+
13+
function Card({ title, description, icon, delay }: CardProps) {
14+
const [isHovered, setIsHovered] = useState(false);
15+
16+
return (
17+
<motion.div
18+
initial={{ opacity: 0, y: 50 }}
19+
whileInView={{ opacity: 1, y: 0 }}
20+
transition={{ duration: 0.6, delay }}
21+
whileHover={{ scale: 1.05, rotateY: 5 }}
22+
onHoverStart={() => setIsHovered(true)}
23+
onHoverEnd={() => setIsHovered(false)}
24+
className="glass rounded-2xl p-8 relative overflow-hidden group cursor-pointer"
25+
>
26+
{/* Glow effect on hover */}
27+
<motion.div
28+
animate={{
29+
opacity: isHovered ? 0.3 : 0,
30+
scale: isHovered ? 1 : 0.8,
31+
}}
32+
className="absolute inset-0 bg-gradient-radial from-electric/30 to-transparent"
33+
/>
34+
35+
{/* Icon */}
36+
<motion.div
37+
animate={{ rotate: isHovered ? 360 : 0 }}
38+
transition={{ duration: 0.6 }}
39+
className="text-6xl mb-4"
40+
>
41+
{icon}
42+
</motion.div>
43+
44+
{/* Content */}
45+
<h3 className="text-2xl font-bold mb-3 gradient-text">{title}</h3>
46+
<p className="text-gray-300 leading-relaxed">{description}</p>
47+
48+
{/* Animated border */}
49+
<motion.div
50+
animate={{
51+
opacity: isHovered ? 1 : 0,
52+
}}
53+
className="absolute inset-0 rounded-2xl border-2 border-electric pointer-events-none"
54+
/>
55+
</motion.div>
56+
);
57+
}
58+
59+
export default function FloatingCards() {
60+
const cards = [
61+
{
62+
title: "One Link",
63+
description: "Combine all your social media, websites, and contact information into a single, powerful link.",
64+
icon: "🔗",
65+
},
66+
{
67+
title: "Customizable",
68+
description: "Design your page to match your brand with custom themes, colors, and layouts.",
69+
icon: "🎨",
70+
},
71+
{
72+
title: "Analytics",
73+
description: "Track clicks, views, and engagement with detailed analytics and insights.",
74+
icon: "📊",
75+
},
76+
{
77+
title: "Fast & Secure",
78+
description: "Lightning-fast loading times with enterprise-grade security for your data.",
79+
icon: "⚡",
80+
},
81+
{
82+
title: "Mobile First",
83+
description: "Optimized for mobile devices to ensure the best experience for your audience.",
84+
icon: "📱",
85+
},
86+
{
87+
title: "Easy Setup",
88+
description: "Get started in minutes with our intuitive interface and simple setup process.",
89+
icon: "✨",
90+
},
91+
];
92+
93+
return (
94+
<section className="min-h-screen py-20 px-4 relative">
95+
{/* Background gradient */}
96+
<div className="absolute inset-0 bg-gradient-to-b from-navy via-navy-light to-navy opacity-50"></div>
97+
98+
<div className="max-w-7xl mx-auto relative z-10">
99+
{/* Section header */}
100+
<motion.div
101+
initial={{ opacity: 0, y: 30 }}
102+
whileInView={{ opacity: 1, y: 0 }}
103+
transition={{ duration: 0.8 }}
104+
className="text-center mb-16"
105+
>
106+
<h2 className="text-5xl md:text-6xl font-bold mb-6 glow-text">
107+
Why Choose Full Link?
108+
</h2>
109+
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
110+
Everything you need to create a powerful digital presence in one place
111+
</p>
112+
</motion.div>
113+
114+
{/* Cards grid */}
115+
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
116+
{cards.map((card, index) => (
117+
<Card
118+
key={index}
119+
title={card.title}
120+
description={card.description}
121+
icon={card.icon}
122+
delay={index * 0.1}
123+
/>
124+
))}
125+
</div>
126+
</div>
127+
</section>
128+
);
129+
}

0 commit comments

Comments
 (0)