Refine cinematic hero with richer motion and upgraded Three.js scene

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>
+  );
+}

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>
+  );
+}

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;
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}