diff --git a/app/about/page.jsx b/app/about/page.jsx
new file mode 100644
index 0000000..ecba887
--- /dev/null
+++ b/app/about/page.jsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Section } from '../../components/Section';
+
+export default function AboutPage() {
+  return (
+    <div className="pt-24">
+      <Section>
+        <h1 className="text-4xl font-semibold md:text-6xl">We’re the force behind breakout brands.</h1>
+        <p className="mt-6 max-w-2xl text-white/75">Flux Aura Digital blends strategic rigor with cinematic creative to build brands that own attention.</p>
+      </Section>
+      <Section>
+        <h2 className="text-3xl font-semibold">Timeline</h2>
+        <div className="mt-8 space-y-4 border-l border-white/20 pl-6">
+          {['2019: Founded with one mission—results.', '2021: Expanded into multi-channel growth systems.', '2024: Partnered with global challenger brands.'].map((item, i) => (
+            <motion.p key={item} initial={{ x: -10, opacity: 0 }} whileInView={{ x: 0, opacity: 1 }} transition={{ delay: i * 0.2 }}>
+              {item}
+            </motion.p>
+          ))}
+        </div>
+      </Section>
+      <Section>
+        <h2 className="text-3xl font-semibold">Team</h2>
+        <div className="mt-8 grid gap-4 md:grid-cols-3">
+          {['Strategy Lead', 'Creative Director', 'Growth Engineer'].map((role) => (
+            <motion.div key={role} whileHover={{ y: -6 }} className="glass rounded-2xl p-6">
+              <p className="text-sm text-cyan-200/80">Flux Aura</p>
+              <p className="mt-2 text-xl">{role}</p>
+            </motion.div>
+          ))}
+        </div>
+      </Section>
+    </div>
+  );
+}
diff --git a/app/contact/page.jsx b/app/contact/page.jsx
new file mode 100644
index 0000000..26041a6
--- /dev/null
+++ b/app/contact/page.jsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Section } from '../../components/Section';
+
+export default function ContactPage() {
+  return (
+    <div className="pt-24">
+      <Section>
+        <h1 className="text-4xl font-semibold md:text-6xl">Let’s Build Something Powerful.</h1>
+      </Section>
+      <Section>
+        <motion.form
+          className="glass mx-auto flex max-w-2xl flex-col gap-4 rounded-3xl p-8"
+          initial={{ opacity: 0, y: 16 }}
+          whileInView={{ opacity: 1, y: 0 }}
+        >
+          <input placeholder="Name" className="rounded-xl border border-white/15 bg-white/5 px-4 py-3 outline-none focus:border-cyan-300/60" />
+          <input placeholder="Email" type="email" className="rounded-xl border border-white/15 bg-white/5 px-4 py-3 outline-none focus:border-cyan-300/60" />
+          <textarea placeholder="Tell us your growth target" rows={5} className="rounded-xl border border-white/15 bg-white/5 px-4 py-3 outline-none focus:border-cyan-300/60" />
+          <button className="mt-3 rounded-full bg-gradient-to-r from-cyan-400 to-violet-500 px-6 py-3 font-semibold text-black transition hover:scale-[1.02]">
+            Send Mission Brief
+          </button>
+        </motion.form>
+      </Section>
+    </div>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..4cf301e
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,41 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: dark;
+}
+
+html, body {
+  background: radial-gradient(circle at top, #0f1034 0%, #070710 44%, #020205 100%);
+  color: #f4f4ff;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: Inter, system-ui, sans-serif;
+}
+
+.glass {
+  @apply border border-white/15 bg-white/5 backdrop-blur-xl;
+}
+
+.neon-border {
+  box-shadow: 0 0 0 1px rgba(133, 104, 255, 0.4), 0 0 30px rgba(105, 94, 255, 0.35);
+}
+
+.section-shell {
+  @apply mx-auto max-w-6xl px-6 md:px-10;
+}
+
+.text-gradient {
+  background: linear-gradient(90deg, #6fe4ff, #ad8cff, #ff81d5);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.grid-glow {
+  background-image: linear-gradient(rgba(108, 89, 255, 0.2) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(108, 89, 255, 0.2) 1px, transparent 1px);
+  background-size: 50px 50px;
+}
diff --git a/app/layout.jsx b/app/layout.jsx
new file mode 100644
index 0000000..fddf608
--- /dev/null
+++ b/app/layout.jsx
@@ -0,0 +1,22 @@
+import './globals.css';
+import { Navbar } from '../components/Navbar';
+import { Loader } from '../components/Loader';
+
+export const metadata = {
+  title: 'Flux Aura Digital | Digital Marketing Agency',
+  description:
+    'Flux Aura Digital is a futuristic digital marketing agency focused on social media marketing, branding, growth strategy, and high-performance web experiences.',
+  keywords: ['Digital Marketing Agency', 'Social Media Marketing', 'Growth Strategy', 'Branding Agency'],
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className="min-h-screen overflow-x-hidden bg-[#05050a] text-white antialiased">
+        <Loader />
+        <Navbar />
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.jsx b/app/page.jsx
new file mode 100644
index 0000000..2159fee
--- /dev/null
+++ b/app/page.jsx
@@ -0,0 +1,151 @@
+'use client';
+
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { MagneticButton } from '../components/MagneticButton';
+import { Section } from '../components/Section';
+import { ThreeHero } from '../components/ThreeHero';
+
+const services = ['Social Media Marketing', 'Branding', 'Paid Ads', 'Content Creation', 'Web Development'];
+
+const headlineWords = ['We', 'Don’t', 'Market.', 'We', 'Create', 'Digital', 'Gravity.'];
+
+export default function HomePage() {
+  const { scrollYProgress } = useScroll();
+  const heroY = useTransform(scrollYProgress, [0, 1], [0, -170]);
+  const heroOpacity = useTransform(scrollYProgress, [0, 0.35], [1, 0.45]);
+  const layerY = useTransform(scrollYProgress, [0, 1], [0, -240]);
+
+  return (
+    <div className="relative pb-24">
+      <section className="relative flex min-h-screen items-center overflow-hidden">
+        <ThreeHero />
+
+        <motion.div style={{ y: layerY }} className="pointer-events-none absolute -top-24 left-1/2 -z-10 h-[560px] w-[560px] -translate-x-1/2 rounded-full bg-fuchsia-500/20 blur-[120px]" />
+
+        <motion.div style={{ y: heroY, opacity: heroOpacity }} className="section-shell relative z-10 pt-24">
+          <motion.p
+            className="mb-6 inline-flex rounded-full border border-cyan-200/30 bg-cyan-200/10 px-4 py-2 text-xs uppercase tracking-[0.28em] text-cyan-100"
+            initial={{ opacity: 0, y: 18 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.75 }}
+          >
+            Digital Marketing Agency
+          </motion.p>
+
+          <h1 className="max-w-5xl text-4xl font-semibold leading-tight md:text-7xl">
+            {headlineWords.map((word, idx) => (
+              <motion.span
+                key={`${word}-${idx}`}
+                initial={{ opacity: 0, y: 28, filter: 'blur(8px)' }}
+                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+                transition={{ delay: 0.12 * idx, duration: 0.65, ease: 'easeOut' }}
+                className={`mr-3 inline-block ${word === 'Digital' || word === 'Gravity.' ? 'text-gradient' : ''}`}
+              >
+                {word}
+              </motion.span>
+            ))}
+          </h1>
+
+          <motion.p
+            className="mt-6 max-w-2xl text-lg text-white/75"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1, delay: 0.5 }}
+          >
+            We engineer magnetic brand ecosystems that turn cold traffic into obsessed communities and unstoppable growth.
+          </motion.p>
+
+          <motion.div
+            className="mt-10 flex flex-wrap gap-4"
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.7, duration: 0.8 }}
+          >
+            <MagneticButton href="/contact">Start Your Growth Orbit</MagneticButton>
+            <MagneticButton href="/portfolio">Explore Case Studies</MagneticButton>
+          </motion.div>
+
+          <motion.div
+            className="mt-10 flex flex-wrap gap-3 text-xs uppercase tracking-[0.22em] text-white/55"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 1.05, duration: 0.8 }}
+          >
+            {['Growth Strategy', 'Performance Creative', 'Category Dominance'].map((label) => (
+              <span key={label} className="rounded-full border border-white/20 px-3 py-1.5">
+                {label}
+              </span>
+            ))}
+          </motion.div>
+
+          <motion.div
+            className="mt-10 flex items-center gap-3 text-xs uppercase tracking-[0.3em] text-white/45"
+            animate={{ y: [0, 6, 0] }}
+            transition={{ repeat: Infinity, duration: 2.2, ease: 'easeInOut' }}
+          >
+            <span>Scroll</span>
+            <span className="h-10 w-6 rounded-full border border-white/25 p-1">
+              <span className="block h-2 w-2 rounded-full bg-cyan-200" />
+            </span>
+          </motion.div>
+        </motion.div>
+      </section>
+
+      <Section id="services">
+        <h2 className="text-3xl font-semibold md:text-5xl">Services that weaponize growth.</h2>
+        <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+          {services.map((item) => (
+            <motion.div
+              key={item}
+              whileHover={{ scale: 1.03, y: -6 }}
+              className="glass rounded-2xl p-6 transition hover:shadow-[0_0_35px_rgba(112,96,255,0.35)]"
+            >
+              <h3 className="text-xl font-medium">{item}</h3>
+              <p className="mt-3 text-sm text-white/70">Precision strategy, cinematic content, and conversion-first systems.</p>
+            </motion.div>
+          ))}
+        </div>
+      </Section>
+
+      <Section id="portfolio">
+        <h2 className="text-3xl font-semibold md:text-5xl">Selected launches from the orbit.</h2>
+        <div className="mt-10 grid gap-6 md:grid-cols-3">
+          {[1, 2, 3].map((i) => (
+            <motion.div
+              key={i}
+              whileHover={{ scale: 1.02 }}
+              className="group relative overflow-hidden rounded-2xl border border-white/10"
+            >
+              <div className="grid-glow h-60 bg-gradient-to-br from-blue-500/30 via-purple-600/20 to-pink-500/30" />
+              <div className="absolute inset-0 flex items-end p-5">
+                <p className="text-lg font-medium">Project Pulse {i}</p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </Section>
+
+      <Section>
+        <h2 className="text-3xl font-semibold md:text-5xl">Our process is engineered for dominance.</h2>
+        <div className="mt-10 grid gap-5 md:grid-cols-4">
+          {['Discover', 'Architect', 'Launch', 'Scale'].map((step, idx) => (
+            <motion.div key={step} initial={{ opacity: 0.2 }} whileInView={{ opacity: 1 }} transition={{ delay: idx * 0.2 }}>
+              <p className="text-sm text-cyan-200/80">0{idx + 1}</p>
+              <p className="mt-2 text-xl">{step}</p>
+            </motion.div>
+          ))}
+        </div>
+      </Section>
+
+      <Section>
+        <div className="glass rounded-3xl p-10 text-center">
+          <p className="text-sm uppercase tracking-[0.3em] text-cyan-200/70">Ready to lead your category?</p>
+          <h2 className="mt-4 text-3xl font-semibold md:text-5xl">Let’s Build Something Powerful.</h2>
+          <div className="mt-8 flex justify-center">
+            <MagneticButton href="/contact">Book Strategy Call</MagneticButton>
+          </div>
+        </div>
+      </Section>
+    </div>
+  );
+}
diff --git a/app/portfolio/page.jsx b/app/portfolio/page.jsx
new file mode 100644
index 0000000..7babc10
--- /dev/null
+++ b/app/portfolio/page.jsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Section } from '../../components/Section';
+
+const projects = [
+  { title: 'Nova Fitness', tag: 'Branding', blurb: 'Rebrand + paid social led to 4.1x ROAS.' },
+  { title: 'Astra Beauty', tag: 'Social', blurb: 'Short-form content framework delivered 290% follower growth.' },
+  { title: 'Orbit Fintech', tag: 'Web', blurb: 'New conversion funnel doubled qualified leads in 60 days.' },
+  { title: 'Velocity Labs', tag: 'Paid Ads', blurb: 'Creative testing protocol cut CPA by 42%.' },
+];
+
+const filters = ['All', 'Branding', 'Social', 'Web', 'Paid Ads'];
+
+export default function PortfolioPage() {
+  const [filter, setFilter] = useState('All');
+  const [active, setActive] = useState(null);
+  const data = useMemo(() => projects.filter((p) => filter === 'All' || p.tag === filter), [filter]);
+
+  return (
+    <div className="pt-24">
+      <Section>
+        <h1 className="text-4xl font-semibold md:text-6xl">Portfolio: proof of digital gravity.</h1>
+        <div className="mt-8 flex flex-wrap gap-3">
+          {filters.map((item) => (
+            <button
+              key={item}
+              onClick={() => setFilter(item)}
+              className={`rounded-full px-4 py-2 text-sm ${filter === item ? 'bg-white/20' : 'bg-white/8'}`}
+            >
+              {item}
+            </button>
+          ))}
+        </div>
+      </Section>
+      <Section>
+        <div className="grid gap-5 md:grid-cols-2">
+          {data.map((project) => (
+            <motion.button
+              key={project.title}
+              whileHover={{ scale: 1.02 }}
+              onClick={() => setActive(project.title)}
+              className="glass rounded-2xl p-7 text-left"
+            >
+              <p className="text-xs uppercase tracking-[0.2em] text-cyan-200/80">{project.tag}</p>
+              <h2 className="mt-3 text-2xl font-medium">{project.title}</h2>
+              <p className="mt-2 text-white/70">{project.blurb}</p>
+            </motion.button>
+          ))}
+        </div>
+      </Section>
+      <AnimatePresence>
+        {active && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6"
+            onClick={() => setActive(null)}
+          >
+            <motion.div
+              initial={{ y: 20, scale: 0.98 }}
+              animate={{ y: 0, scale: 1 }}
+              exit={{ y: 20 }}
+              className="glass max-w-xl rounded-2xl p-8"
+            >
+              <h3 className="text-3xl font-semibold">{active}</h3>
+              <p className="mt-4 text-white/70">This case study combines growth strategy, creative velocity, and data-led optimization.</p>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/app/services/page.jsx b/app/services/page.jsx
new file mode 100644
index 0000000..1cde6f1
--- /dev/null
+++ b/app/services/page.jsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Section } from '../../components/Section';
+
+const blocks = [
+  ['📱', 'Social Media Marketing', 'Build momentum with platform-native content systems that trigger engagement and action.'],
+  ['✨', 'Branding', 'Position your brand as the obvious premium choice with bold identity and strategic storytelling.'],
+  ['🎯', 'Paid Ads', 'Performance creative + media science designed for profitable scale across channels.'],
+  ['🎬', 'Content Creation', 'Cinematic short-form and campaign assets made to stop thumbs and drive demand.'],
+  ['💻', 'Web Development', 'High-converting, lightning-fast websites with premium interaction design.'],
+];
+
+export default function ServicesPage() {
+  return (
+    <div className="pt-24">
+      <Section>
+        <h1 className="text-4xl font-semibold md:text-6xl">Services engineered for growth velocity.</h1>
+      </Section>
+      <Section>
+        <div className="grid gap-5 md:grid-cols-2">
+          {blocks.map(([icon, title, copy], idx) => (
+            <motion.article
+              key={title}
+              className="glass rounded-2xl p-8"
+              initial={{ opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ delay: idx * 0.1, duration: 0.6 }}
+              whileHover={{ y: -6, boxShadow: '0 0 30px rgba(134, 109, 255, 0.3)' }}
+            >
+              <p className="text-3xl">{icon}</p>
+              <h2 className="mt-4 text-2xl font-medium">{title}</h2>
+              <p className="mt-3 text-white/70">{copy}</p>
+            </motion.article>
+          ))}
+        </div>
+      </Section>
+    </div>
+  );
+}
diff --git a/components/Loader.jsx b/components/Loader.jsx
new file mode 100644
index 0000000..bcfc5db
--- /dev/null
+++ b/components/Loader.jsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
+
+export function Loader() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 1300);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <AnimatePresence>
+      {loading && (
+        <motion.div
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-[#05050a]"
+          initial={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.8 } }}
+        >
+          <motion.div
+            className="h-20 w-20 rounded-full border-2 border-white/20 border-t-cyan-300"
+            animate={{ rotate: 360 }}
+            transition={{ repeat: Infinity, duration: 1.1, ease: 'linear' }}
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/components/MagneticButton.jsx b/components/MagneticButton.jsx
new file mode 100644
index 0000000..1aba1b1
--- /dev/null
+++ b/components/MagneticButton.jsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { motion, useMotionValue, useSpring } from 'framer-motion';
+import Link from 'next/link';
+
+export function MagneticButton({ href, children }) {
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const springX = useSpring(x, { stiffness: 150, damping: 13 });
+  const springY = useSpring(y, { stiffness: 150, damping: 13 });
+
+  return (
+    <motion.div
+      style={{ x: springX, y: springY }}
+      onMouseMove={(e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        x.set((e.clientX - rect.left - rect.width / 2) * 0.2);
+        y.set((e.clientY - rect.top - rect.height / 2) * 0.2);
+      }}
+      onMouseLeave={() => {
+        x.set(0);
+        y.set(0);
+      }}
+      className="inline-block"
+    >
+      <Link
+        href={href}
+        className="rounded-full border border-cyan-300/40 bg-cyan-300/10 px-6 py-3 text-sm font-semibold tracking-wide text-cyan-100 transition duration-300 hover:shadow-[0_0_30px_rgba(119,224,255,0.45)]"
+      >
+        {children}
+      </Link>
+    </motion.div>
+  );
+}
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
new file mode 100644
index 0000000..b946b75
--- /dev/null
+++ b/components/Navbar.jsx
@@ -0,0 +1,38 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const links = [
+  ['/', 'Home'],
+  ['/services', 'Services'],
+  ['/portfolio', 'Portfolio'],
+  ['/about', 'About'],
+  ['/contact', 'Contact'],
+];
+
+export function Navbar() {
+  const pathname = usePathname();
+  return (
+    <header className="fixed top-3 z-50 w-full px-4">
+      <nav className="section-shell glass neon-border flex items-center justify-between rounded-2xl py-4">
+        <Link href="/" className="text-sm font-bold tracking-[0.18em] text-cyan-100">
+          FLUX AURA DIGITAL
+        </Link>
+        <div className="flex gap-1 md:gap-2">
+          {links.map(([href, label]) => (
+            <Link
+              key={href}
+              href={href}
+              className={`rounded-full px-3 py-1.5 text-xs transition md:text-sm ${
+                pathname === href ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white'
+              }`}
+            >
+              {label}
+            </Link>
+          ))}
+        </div>
+      </nav>
+    </header>
+  );
+}
diff --git a/components/Section.jsx b/components/Section.jsx
new file mode 100644
index 0000000..9ccb739
--- /dev/null
+++ b/components/Section.jsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+export function Section({ children, id }) {
+  return (
+    <motion.section
+      id={id}
+      className="section-shell py-20 md:py-28"
+      initial={{ opacity: 0, y: 45 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-80px' }}
+      transition={{ duration: 0.8, ease: 'easeOut' }}
+    >
+      {children}
+    </motion.section>
+  );
+}
diff --git a/components/ThreeHero.jsx b/components/ThreeHero.jsx
new file mode 100644
index 0000000..d102dc1
--- /dev/null
+++ b/components/ThreeHero.jsx
@@ -0,0 +1,123 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import * as THREE from 'three';
+
+export function ThreeHero() {
+  const mountRef = useRef(null);
+
+  useEffect(() => {
+    if (!mountRef.current) return;
+
+    const container = mountRef.current;
+    const isMobile = window.innerWidth < 768;
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(65, container.clientWidth / container.clientHeight, 0.1, 1000);
+    camera.position.set(0, 0.2, 6);
+
+    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: !isMobile, powerPreference: 'high-performance' });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, isMobile ? 1.1 : 1.6));
+    renderer.setSize(container.clientWidth, container.clientHeight);
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    container.appendChild(renderer.domElement);
+
+    const keyLight = new THREE.DirectionalLight(0xffffff, 1.25);
+    keyLight.position.set(3, 2, 4);
+    const fill = new THREE.PointLight(0x8e7bff, 1.4, 25);
+    fill.position.set(-3, -1.2, 3);
+    scene.add(keyLight, fill, new THREE.AmbientLight(0x8d7dff, 0.4));
+
+    const geometry = new THREE.IcosahedronGeometry(0.9, 2);
+    const materials = ['#53b8ff', '#9a7bff', '#ff76cf'].map(
+      (color) => new THREE.MeshStandardMaterial({ color, metalness: 0.72, roughness: 0.15 }),
+    );
+
+    const meshes = materials.map((material, i) => {
+      const mesh = new THREE.Mesh(geometry, material);
+      mesh.position.set(i * 2 - 2, i - 1.2, -i - 0.4);
+      scene.add(mesh);
+      return mesh;
+    });
+
+    const ring = new THREE.Mesh(
+      new THREE.TorusGeometry(3.3, 0.03, 32, 200),
+      new THREE.MeshBasicMaterial({ color: '#7f8dff', transparent: true, opacity: 0.25 }),
+    );
+    ring.rotation.x = 1.3;
+    ring.position.y = -1.4;
+    scene.add(ring);
+
+    const particlesGeometry = new THREE.BufferGeometry();
+    const particlesCount = isMobile ? 520 : 1100;
+    const particlePos = new Float32Array(particlesCount * 3);
+    for (let i = 0; i < particlesCount; i++) {
+      particlePos[i * 3] = (Math.random() - 0.5) * 35;
+      particlePos[i * 3 + 1] = (Math.random() - 0.5) * 35;
+      particlePos[i * 3 + 2] = -Math.random() * 22;
+    }
+    particlesGeometry.setAttribute('position', new THREE.BufferAttribute(particlePos, 3));
+    const points = new THREE.Points(
+      particlesGeometry,
+      new THREE.PointsMaterial({ color: '#89a2ff', size: isMobile ? 0.045 : 0.06, transparent: true, opacity: 0.7 }),
+    );
+    scene.add(points);
+
+    const pointer = { x: 0, y: 0 };
+    const onPointer = (e) => {
+      pointer.x = (e.clientX / window.innerWidth) * 2 - 1;
+      pointer.y = -(e.clientY / window.innerHeight) * 2 + 1;
+    };
+
+    const onResize = () => {
+      camera.aspect = container.clientWidth / container.clientHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(container.clientWidth, container.clientHeight);
+    };
+
+    window.addEventListener('pointermove', onPointer, { passive: true });
+    window.addEventListener('resize', onResize);
+
+    let frame = 0;
+    const animate = () => {
+      frame = requestAnimationFrame(animate);
+      const t = performance.now() * 0.00045;
+
+      meshes.forEach((mesh, i) => {
+        mesh.rotation.x += 0.0035 + i * 0.0009;
+        mesh.rotation.y += 0.005 + i * 0.001;
+        mesh.position.y = Math.sin(t + i) * 0.3;
+      });
+
+      ring.rotation.z += 0.0017;
+      points.rotation.y += 0.00025;
+
+      scene.rotation.y += (pointer.x * 0.16 - scene.rotation.y) * 0.03;
+      scene.rotation.x += (pointer.y * 0.09 - scene.rotation.x) * 0.03;
+
+      renderer.render(scene, camera);
+    };
+
+    animate();
+
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener('pointermove', onPointer);
+      window.removeEventListener('resize', onResize);
+      container.removeChild(renderer.domElement);
+      renderer.dispose();
+      geometry.dispose();
+      ring.geometry.dispose();
+      ring.material.dispose();
+      particlesGeometry.dispose();
+      materials.forEach((m) => m.dispose());
+    };
+  }, []);
+
+  return (
+    <>
+      <div ref={mountRef} className="absolute inset-0 -z-10 opacity-85" />
+      <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_35%,rgba(76,172,255,0.22),transparent_52%)]" />
+    </>
+  );
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..4e61471
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,14 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+export default [
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
+];
diff --git a/next.config.mjs b/next.config.mjs
new file mode 100644
index 0000000..8ed2416
--- /dev/null
+++ b/next.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    optimizePackageImports: ['framer-motion'],
+  },
+};
+
+export default nextConfig;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..6c2bd81
--- /dev/null
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "flux-aura-digital",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "framer-motion": "^11.15.0",
+    "next": "15.2.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "three": "^0.174.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.21.0",
+    "eslint-config-next": "15.2.3",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17"
+  }
+}
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..2aa7205
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..425755f
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./app/**/*.{js,jsx}', './components/**/*.{js,jsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};