Initial commit

.env.production

@@ -0,0 +1 @@
+DISABLE_ESLINT_PLUGIN=true

.gitea/workflows/build.yml

@@ -0,0 +1,62 @@
+name: Build
+
+on:
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: 'Branch to build'
+        required: true
+        default: 'main'
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ gitea.event.inputs.branch }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 24
+
+      - name: Install dependencies
+        run: |
+          set -euo pipefail
+          npm install --no-audit --silent 2>&1 | tee install.log
+        env:
+          NODE_OPTIONS: '--max-old-space-size=4096'
+
+      - name: Build (react-scripts build)
+        env:
+          CI: 'false'
+          NODE_OPTIONS: '--max-old-space-size=4096'
+        run: |
+          set -euo pipefail
+          npm run build 2>&1 | tee build.log
+        timeout-minutes: 5
+
+      - name: Verify build folder exists
+        run: test -d build || (echo "No build folder. Check build logs above."; exit 1)
+
+      - name: Upload logs on failure
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: build-logs
+          path: |
+            install.log
+            build.log
+            npm-debug.log*
+          if-no-files-found: ignore
+
+      - name: Build completed
+        if: success()
+        run: echo "Build completed successfully"

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "react-dev-clone",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.1",
+    "lucide-react": "^0.400.0",
+    "framer-motion": "^11.0.0"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

src/App.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Header from './components/Header';
+import Hero from './components/Hero';
+import Features from './components/Features';
+import CodeExamples from './components/CodeExamples';
+import Platforms from './components/Platforms';
+import News from './components/News';
+import Community from './components/Community';
+import Footer from './components/Footer';
+
+function App() {
+  return (
+    <div className="min-h-screen bg-white">
+      <Header />
+      <main>
+        <Hero />
+        <Features />
+        <CodeExamples />
+        <Platforms />
+        <News />
+        <Community />
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default App;

src/components/CodeExamples.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function CodeExamples() {
+  const shouldReduceMotion = useReducedMotion();
+
+  const fadeUpPreset = (delay = 0, duration = 0.8) => ({
+    initial: { opacity: 0, y: 20 },
+    whileInView: { opacity: 1, y: 0 },
+    viewport: { once: true, amount: 0.2 },
+    transition: { delay, duration, ease: "easeOut" }
+  });
+
+  const frameworkExample = {
+    title: "Go full-stack with a framework",
+    description: "React is a library. It lets you put components together, but it doesn't prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like Next.js or React Router.",
+    code: `import { db } from './database.js';
+import { Suspense } from 'react';
+
+async function ConferencePage({ slug }) {
+  const conf = await db.Confs.find({ slug });
+  return (
+    <ConferenceLayout conf={conf}>
+      <Suspense fallback={<TalksLoading />}>
+        <Talks confId={conf.id} />
+      </Suspense>
+    </ConferenceLayout>
+  );
+}
+
+async function Talks({ confId }) {
+  const talks = await db.Talks.findAll({ confId });
+  const videos = talks.map(talk => talk.video);
+  return <SearchableVideoList videos={videos} />;
+}`,
+    note: "React is also an architecture. Frameworks that implement it let you fetch data in asynchronous components that run on the server or even during the build. Read data from a file or a database, and pass it down to your interactive components.",
+    cta: "Get started with a framework"
+  };
+
+  if (shouldReduceMotion) {
+    return (
+      <section className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div className="space-y-6">
+              <h2 className="text-3xl md:text-4xl font-bold text-react-dark leading-tight">
+                {frameworkExample.title}
+              </h2>
+              <p className="text-lg text-react-gray leading-relaxed">
+                {frameworkExample.description}
+              </p>
+              <p className="text-react-gray leading-relaxed">
+                {frameworkExample.note}
+              </p>
+              <button className="text-react-blue font-semibold hover:underline">
+                {frameworkExample.cta}
+              </button>
+            </div>
+            <div className="bg-gray-50 rounded-xl shadow-lg p-6">
+              <div className="bg-gray-900 rounded-lg p-6 font-mono text-sm text-gray-100 overflow-x-auto">
+                <pre className="whitespace-pre-wrap">{frameworkExample.code}</pre>
+              </div>
+              <div className="mt-4 text-sm text-react-gray">
+                example.com/confs/react-conf-2021
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 0.8)}
+      className="py-20 bg-white"
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
+          <motion.div {...fadeUpPreset(0.2, 0.8)} className="space-y-6">
+            <h2 className="text-3xl md:text-4xl font-bold text-react-dark leading-tight">
+              {frameworkExample.title}
+            </h2>
+            <p className="text-lg text-react-gray leading-relaxed">
+              {frameworkExample.description}
+            </p>
+            <p className="text-react-gray leading-relaxed">
+              {frameworkExample.note}
+            </p>
+            <button className="text-react-blue font-semibold hover:underline">
+              {frameworkExample.cta}
+            </button>
+          </motion.div>
+          <motion.div {...fadeUpPreset(0.3, 0.8)} className="bg-gray-50 rounded-xl shadow-lg p-6">
+            <div className="bg-gray-900 rounded-lg p-6 font-mono text-sm text-gray-100 overflow-x-auto">
+              <pre className="whitespace-pre-wrap">{frameworkExample.code}</pre>
+            </div>
+            <div className="mt-4 text-sm text-react-gray">
+              example.com/confs/react-conf-2021
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </motion.section>
+  );
+}
+
+export default CodeExamples;

src/components/Community.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { Users, Heart } from 'lucide-react';
+
+function Community() {
+  const shouldReduceMotion = useReducedMotion();
+
+  const fadeUpPreset = (delay = 0, duration = 0.8) => ({
+    initial: { opacity: 0, y: 20 },
+    whileInView: { opacity: 1, y: 0 },
+    viewport: { once: true, amount: 0.2 },
+    transition: { delay, duration, ease: "easeOut" }
+  });
+
+  const communityImages = [
+    "https://react.dev/images/home/conf2021/andrew.jpg",
+    "https://react.dev/images/home/conf2021/lauren.jpg",
+    "https://react.dev/images/home/conf2021/juan.jpg",
+    "https://react.dev/images/home/conf2021/rick.jpg"
+  ];
+
+  if (shouldReduceMotion) {
+    return (
+      <section className="py-20 bg-gradient-to-b from-blue-50 to-purple-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <div className="flex items-center justify-center mb-6">
+              <Users className="w-8 h-8 text-react-blue mr-3" />
+              <h2 className="text-3xl md:text-4xl font-bold text-react-dark">
+                Join a community of millions
+              </h2>
+            </div>
+            <p className="text-lg text-react-gray max-w-4xl mx-auto leading-relaxed">
+              You're not alone. Two million developers from all over the world visit the React docs every month. React is something that people and teams can agree on.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
+            {communityImages.map((image, index) => (
+              <div key={index} className="aspect-square rounded-lg overflow-hidden">
+                <img 
+                  src={image} 
+                  alt={`Community member ${index + 1}`}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            ))}
+          </div>
+
+          <div className="text-center space-y-6">
+            <p className="text-lg text-react-gray max-w-4xl mx-auto leading-relaxed">
+              This is why React is more than a library, an architecture, or even an ecosystem. React is a community. It's a place where you can ask for help, find opportunities, and meet new friends. You will meet both developers and designers, beginners and experts, researchers and artists, teachers and students. Our backgrounds may be very different, but React lets us all create user interfaces together.
+            </p>
+            
+            <div className="bg-white rounded-xl shadow-lg p-8 max-w-2xl mx-auto">
+              <div className="flex items-center justify-center mb-6">
+                <div className="w-16 h-16 bg-react-blue rounded-full flex items-center justify-center">
+                  <Heart className="w-8 h-8 text-white" />
+                </div>
+              </div>
+              <h3 className="text-2xl font-bold text-react-dark mb-4">
+                Welcome to the React community
+              </h3>
+              <button className="bg-react-blue text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors">
+                Get Started
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 0.8)}
+      className="py-20 bg-gradient-to-b from-blue-50 to-purple-50"
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div {...fadeUpPreset(0.2, 0.8)} className="text-center mb-16">
+          <div className="flex items-center justify-center mb-6">
+            <Users className="w-8 h-8 text-react-blue mr-3" />
+            <h2 className="text-3xl md:text-4xl font-bold text-react-dark">
+              Join a community of millions
+            </h2>
+          </div>
+          <p className="text-lg text-react-gray max-w-4xl mx-auto leading-relaxed">
+            You're not alone. Two million developers from all over the world visit the React docs every month. React is something that people and teams can agree on.
+          </p>
+        </motion.div>
+
+        <motion.div {...fadeUpPreset(0.3, 0.8)} className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
+          {communityImages.map((image, index) => (
+            <motion.div 
+              key={index} 
+              {...fadeUpPreset(0.4 + index * 0.05, 0.6)}
+              className="aspect-square rounded-lg overflow-hidden"
+            >
+              <img 
+                src={image} 
+                alt={`Community member ${index + 1}`}
+                className="w-full h-full object-cover"
+              />
+            </motion.div>
+          ))}
+        </motion.div>
+
+        <motion.div {...fadeUpPreset(0.5, 0.8)} className="text-center space-y-6">
+          <p className="text-lg text-react-gray max-w-4xl mx-auto leading-relaxed">
+            This is why React is more than a library, an architecture, or even an ecosystem. React is a community. It's a place where you can ask for help, find opportunities, and meet new friends. You will meet both developers and designers, beginners and experts, researchers and artists, teachers and students. Our backgrounds may be very different, but React lets us all create user interfaces together.
+          </p>
+          
+          <motion.div 
+            {...fadeUpPreset(0.6, 0.8)}
+            className="bg-white rounded-xl shadow-lg p-8 max-w-2xl mx-auto"
+          >
+            <div className="flex items-center justify-center mb-6">
+              <div className="w-16 h-16 bg-react-blue rounded-full flex items-center justify-center">
+                <Heart className="w-8 h-8 text-white" />
+              </div>
+            </div>
+            <h3 className="text-2xl font-bold text-react-dark mb-4">
+              Welcome to the React community
+            </h3>
+            <button className="bg-react-blue text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors">
+              Get Started
+            </button>
+          </motion.div>
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+}
+
+export default Community;

src/components/Features.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function Features() {
+  const shouldReduceMotion = useReducedMotion();
+
+  const fadeUpPreset = (delay = 0, duration = 0.8) => ({
+    initial: { opacity: 0, y: 20 },
+    whileInView: { opacity: 1, y: 0 },
+    viewport: { once: true, amount: 0.2 },
+    transition: { delay, duration, ease: "easeOut" }
+  });
+
+  const features = [
+    {
+      title: "Create user interfaces from components",
+      description: "React lets you build user interfaces out of individual pieces called components. Create your own React components like Thumbnail, LikeButton, and Video. Then combine them into entire screens, pages, and apps.",
+      code: `function Video({ video }) {
+  return (
+    <div>
+      <Thumbnail video={video} />
+      <a href={video.url}>
+        <h3>{video.title}</h3>
+        <p>{video.description}</p>
+      </a>
+      <LikeButton video={video} />
+    </div>
+  );
+}`,
+      note: "Whether you work on your own or with thousands of other developers, using React feels the same. It is designed to let you seamlessly combine components written by independent people, teams, and organizations."
+    },
+    {
+      title: "Write components with code and markup",
+      description: "React components are JavaScript functions. Want to show some content conditionally? Use an if statement. Displaying a list? Try array map(). Learning React is learning programming.",
+      code: `function VideoList({ videos, emptyHeading }) {
+  const count = videos.length;
+  let heading = emptyHeading;
+  if (count > 0) {
+    const noun = count > 1 ? 'Videos' : 'Video';
+    heading = count + ' ' + noun;
+  }
+  return (
+    <section>
+      <h2>{heading}</h2>
+      {videos.map(video =>
+        <Video key={video.id} video={video} />
+      )}
+    </section>
+  );
+}`,
+      note: "This markup syntax is called JSX. It is a JavaScript syntax extension popularized by React. Putting JSX markup close to related rendering logic makes React components easy to create, maintain, and delete."
+    },
+    {
+      title: "Add interactivity wherever you need it",
+      description: "React components receive data and return what should appear on the screen. You can pass them new data in response to an interaction, like when the user types into an input. React will then update the screen to match the new data.",
+      code: `import { useState } from 'react';
+
+function SearchableVideoList({ videos }) {
+  const [searchText, setSearchText] = useState('');
+  const foundVideos = filterVideos(videos, searchText);
+  return (
+    <>
+      <SearchInput
+        value={searchText}
+        onChange={newText => setSearchText(newText)} />
+      <VideoList
+        videos={foundVideos}
+        emptyHeading={\`No matches for "\${searchText}"\`} />
+    </>
+  );
+}`,
+      note: "You don't have to build your whole page in React. Add React to your existing HTML page, and render interactive React components anywhere on it.",
+      cta: "Add React to your page"
+    }
+  ];
+
+  if (shouldReduceMotion) {
+    return (
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          {features.map((feature, index) => (
+            <div key={index} className="mb-20 last:mb-0">
+              <div className="grid lg:grid-cols-2 gap-12 items-center">
+                <div className="space-y-6">
+                  <h2 className="text-3xl md:text-4xl font-bold text-react-dark leading-tight">
+                    {feature.title}
+                  </h2>
+                  <p className="text-lg text-react-gray leading-relaxed">
+                    {feature.description}
+                  </p>
+                  {feature.note && (
+                    <p className="text-react-gray leading-relaxed">
+                      {feature.note}
+                    </p>
+                  )}
+                  {feature.cta && (
+                    <button className="text-react-blue font-semibold hover:underline">
+                      {feature.cta}
+                    </button>
+                  )}
+                </div>
+                <div className="bg-white rounded-xl shadow-lg p-6">
+                  <div className="bg-gray-900 rounded-lg p-6 font-mono text-sm text-gray-100 overflow-x-auto">
+                    <pre className="whitespace-pre-wrap">{feature.code}</pre>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="py-20 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {features.map((feature, index) => (
+          <motion.div 
+            key={index} 
+            {...fadeUpPreset(index * 0.1, 0.8)}
+            className="mb-20 last:mb-0"
+          >
+            <div className="grid lg:grid-cols-2 gap-12 items-center">
+              <div className="space-y-6">
+                <h2 className="text-3xl md:text-4xl font-bold text-react-dark leading-tight">
+                  {feature.title}
+                </h2>
+                <p className="text-lg text-react-gray leading-relaxed">
+                  {feature.description}
+                </p>
+                {feature.note && (
+                  <p className="text-react-gray leading-relaxed">
+                    {feature.note}
+                  </p>
+                )}
+                {feature.cta && (
+                  <button className="text-react-blue font-semibold hover:underline">
+                    {feature.cta}
+                  </button>
+                )}
+              </div>
+              <div className="bg-white rounded-xl shadow-lg p-6">
+                <div className="bg-gray-900 rounded-lg p-6 font-mono text-sm text-gray-100 overflow-x-auto">
+                  <pre className="whitespace-pre-wrap">{feature.code}</pre>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default Features;

src/components/Footer.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Facebook, Twitter, Github } from 'lucide-react';
+
+function Footer() {
+  const footerSections = [
+    {
+      title: "Learn React",
+      links: [
+        "Quick Start",
+        "Installation",
+        "Describing the UI",
+        "Adding Interactivity",
+        "Managing State",
+        "Escape Hatches"
+      ]
+    },
+    {
+      title: "API Reference",
+      links: [
+        "React APIs",
+        "React DOM APIs"
+      ]
+    },
+    {
+      title: "Community",
+      links: [
+        "Code of Conduct",
+        "Meet the Team",
+        "Docs Contributors",
+        "Acknowledgements"
+      ]
+    },
+    {
+      title: "More",
+      links: [
+        "Blog",
+        "React Native",
+        "Privacy",
+        "Terms"
+      ]
+    }
+  ];
+
+  return (
+    <footer className="bg-react-dark text-white py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-8">
+          {/* Logo and Meta */}
+          <div className="lg:col-span-1">
+            <div className="flex items-center space-x-2 mb-6">
+              <div className="w-8 h-8 bg-react-blue rounded-full flex items-center justify-center">
+                <div className="w-6 h-6 border-2 border-white rounded-full relative">
+                  <div className="absolute inset-0 border-2 border-white rounded-full transform rotate-45"></div>
+                  <div className="absolute inset-0 border-2 border-white rounded-full transform -rotate-45"></div>
+                  <div className="absolute top-1/2 left-1/2 w-2 h-2 bg-white rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
+                </div>
+              </div>
+              <span className="text-xl font-bold">React</span>
+            </div>
+            <div className="space-y-4">
+              <div className="flex items-center space-x-2">
+                <span className="text-react-light-blue">Meta Open Source</span>
+              </div>
+              <p className="text-sm text-gray-400">
+                Copyright © Meta Platforms, Inc
+              </p>
+              <div className="flex items-center space-x-2">
+                <img 
+                  src="https://react.dev/images/uwu.png" 
+                  alt="logo by @sawaratsuki1004"
+                  className="w-6 h-6"
+                />
+                <span className="text-sm text-gray-400">uwu?</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer Links */}
+          {footerSections.map((section, index) => (
+            <div key={index} className="space-y-4">
+              <h3 className="font-semibold text-lg">{section.title}</h3>
+              <ul className="space-y-2">
+                {section.links.map((link, linkIndex) => (
+                  <li key={linkIndex}>
+                    <a 
+                      href="#" 
+                      className="text-gray-400 hover:text-white transition-colors text-sm"
+                    >
+                      {link}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Social Links */}
+        <div className="mt-12 pt-8 border-t border-gray-700">
+          <div className="flex items-center justify-between">
+            <div className="flex space-x-6">
+              <Facebook className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer transition-colors" />
+              <Twitter className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer transition-colors" />
+              <Github className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer transition-colors" />
+            </div>
+            <div className="flex items-center space-x-2 text-sm text-gray-400">
+              <span>Made with</span>
+              <Heart className="w-4 h-4 text-red-500" />
+              <span>by the React team</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+function Heart({ className }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clipRule="evenodd" />
+    </svg>
+  );
+}
+
+export default Footer;

src/components/Header.js

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { Search, Menu, X, Github } from 'lucide-react';
+
+function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  return (
+    <header className="fixed top-0 left-0 right-0 bg-white border-b border-react-border z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <div className="flex items-center space-x-4">
+            <div className="flex items-center space-x-2">
+              <div className="w-8 h-8 bg-react-blue rounded-full flex items-center justify-center">
+                <div className="w-6 h-6 border-2 border-white rounded-full relative">
+                  <div className="absolute inset-0 border-2 border-white rounded-full transform rotate-45"></div>
+                  <div className="absolute inset-0 border-2 border-white rounded-full transform -rotate-45"></div>
+                  <div className="absolute top-1/2 left-1/2 w-2 h-2 bg-white rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
+                </div>
+              </div>
+              <span className="text-xl font-bold text-react-dark">React</span>
+              <span className="text-sm text-react-gray bg-react-light-gray px-2 py-1 rounded">v19.2</span>
+            </div>
+          </div>
+
+          {/* Search */}
+          <div className="hidden md:flex items-center flex-1 max-w-md mx-8">
+            <div className="relative w-full">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-react-gray w-4 h-4" />
+              <input
+                type="text"
+                placeholder="Search"
+                className="w-full pl-10 pr-12 py-2 border border-react-border rounded-lg focus:outline-none focus:ring-2 focus:ring-react-blue focus:border-transparent"
+              />
+              <div className="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center space-x-1">
+                <kbd className="px-2 py-1 text-xs bg-react-light-gray border border-react-border rounded">Ctrl</kbd>
+                <kbd className="px-2 py-1 text-xs bg-react-light-gray border border-react-border rounded">K</kbd>
+              </div>
+            </div>
+          </div>
+
+          {/* Navigation */}
+          <nav className="hidden md:flex items-center space-x-8">
+            <a href="#" className="text-react-dark hover:text-react-blue font-medium">Learn</a>
+            <a href="#" className="text-react-dark hover:text-react-blue font-medium">Reference</a>
+            <a href="#" className="text-react-dark hover:text-react-blue font-medium">Community</a>
+            <a href="#" className="text-react-dark hover:text-react-blue font-medium">Blog</a>
+            <Github className="w-5 h-5 text-react-gray hover:text-react-dark cursor-pointer" />
+          </nav>
+
+          {/* Mobile menu button */}
+          <button
+            className="md:hidden p-2"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {isMenuOpen && (
+        <div className="md:hidden bg-white border-t border-react-border">
+          <div className="px-4 py-2 space-y-2">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-react-gray w-4 h-4" />
+              <input
+                type="text"
+                placeholder="Search"
+                className="w-full pl-10 pr-4 py-2 border border-react-border rounded-lg focus:outline-none focus:ring-2 focus:ring-react-blue focus:border-transparent"
+              />
+            </div>
+            <a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Learn</a>
+            <a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Reference</a>
+            <a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Community</a>
+            <a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Blog</a>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}
+
+export default Header;

src/components/Hero.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function Hero() {
+  const shouldReduceMotion = useReducedMotion();
+
+  const fadeUpPreset = (delay = 0, duration = 0.8) => ({
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { delay, duration, ease: "easeOut" }
+  });
+
+  if (shouldReduceMotion) {
+    return (
+      <section className="pt-24 pb-16 bg-gradient-to-b from-blue-50 to-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="mb-8">
+            <div className="w-20 h-20 bg-react-blue rounded-full flex items-center justify-center mx-auto mb-6">
+              <div className="w-16 h-16 border-4 border-white rounded-full relative react-logo">
+                <div className="absolute inset-0 border-4 border-white rounded-full transform rotate-45"></div>
+                <div className="absolute inset-0 border-4 border-white rounded-full transform -rotate-45"></div>
+                <div className="absolute top-1/2 left-1/2 w-4 h-4 bg-white rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
+              </div>
+            </div>
+            <h1 className="text-5xl md:text-6xl font-bold text-react-dark mb-4">React</h1>
+            <p className="text-xl md:text-2xl text-react-gray mb-8">The library for web and native user interfaces</p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <button className="bg-react-blue text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors">
+                Learn React
+              </button>
+              <button className="border border-react-border text-react-dark px-8 py-3 rounded-lg font-semibold hover:bg-gray-50 transition-colors">
+                API Reference
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 0.8)}
+      className="pt-24 pb-16 bg-gradient-to-b from-blue-50 to-white"
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <motion.div {...fadeUpPreset(0.2, 0.8)} className="mb-8">
+          <div className="w-20 h-20 bg-react-blue rounded-full flex items-center justify-center mx-auto mb-6">
+            <div className="w-16 h-16 border-4 border-white rounded-full relative react-logo">
+              <div className="absolute inset-0 border-4 border-white rounded-full transform rotate-45"></div>
+              <div className="absolute inset-0 border-4 border-white rounded-full transform -rotate-45"></div>
+              <div className="absolute top-1/2 left-1/2 w-4 h-4 bg-white rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
+            </div>
+          </div>
+          <h1 className="text-5xl md:text-6xl font-bold text-react-dark mb-4">React</h1>
+          <p className="text-xl md:text-2xl text-react-gray mb-8">The library for web and native user interfaces</p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <button className="bg-react-blue text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors">
+              Learn React
+            </button>
+            <button className="border border-react-border text-react-dark px-8 py-3 rounded-lg font-semibold hover:bg-gray-50 transition-colors">
+              API Reference
+            </button>
+          </div>
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+}
+
+export default Hero;

src/components/News.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { Calendar, TrendingUp } from 'lucide-react';
+
+function News() {
+  const shouldReduceMotion = useReducedMotion();
+
+  const fadeUpPreset = (delay = 0, duration = 0.8) => ({
+    initial: { opacity: 0, y: 20 },
+    whileInView: { opacity: 1, y: 0 },
+    viewport: { once: true, amount: 0.2 },
+    transition: { delay, duration, ease: "easeOut" }
+  });
+
+  const newsItems = [
+    {
+      title: "Additional Vulnerabilities in RSC",
+      date: "December 11, 2025"
+    },
+    {
+      title: "Vulnerability in React Server Components",
+      date: "December 3, 2025"
+    },
+    {
+      title: "React Conf 2025 Recap",
+      date: "October 16, 2025"
+    },
+    {
+      title: "React Compiler v1.0",
+      date: "October 7, 2025"
+    }
+  ];
+
+  if (shouldReduceMotion) {
+    return (
+      <section className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-16">
+            {/* Upgrade Section */}
+            <div className="space-y-8">
+              <div className="flex items-center mb-6">
+                <TrendingUp className="w-6 h-6 text-react-blue mr-3" />
+                <h2 className="text-3xl font-bold text-react-dark">
+                  Upgrade when the future is ready
+                </h2>
+              </div>
+              <p className="text-lg text-react-gray leading-relaxed">
+                React approaches changes with care. Every React commit is tested on business-critical surfaces with over a billion users. Over 100,000 React components at Meta help validate every migration strategy.
+              </p>
+              <p className="text-react-gray leading-relaxed">
+                The React team is always researching how to improve React. Some research takes years to pay off. React has a high bar for taking a research idea into production. Only proven approaches become a part of React.
+              </p>
+              <button className="text-react-blue font-semibold hover:underline">
+                Read more React news
+              </button>
+            </div>
+
+            {/* News Section */}
+            <div className="space-y-6">
+              <div className="flex items-center mb-6">
+                <Calendar className="w-6 h-6 text-react-blue mr-3" />
+                <h3 className="text-xl font-bold text-react-dark">LATEST REACT NEWS</h3>
+              </div>
+              <div className="space-y-4">
+                {newsItems.map((item, index) => (
+                  <div key={index} className="border-l-4 border-react-blue pl-4 py-2">
+                    <h4 className="font-semibold text-react-dark hover:text-react-blue cursor-pointer">
+                      {item.title}
+                    </h4>
+                    <p className="text-sm text-react-gray">{item.date}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 0.8)}
+      className="py-20 bg-white"
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid lg:grid-cols-2 gap-16">
+          {/* Upgrade Section */}
+          <motion.div {...fadeUpPreset(0.2, 0.8)} className="space-y-8">
+            <div className="flex items-center mb-6">
+              <TrendingUp className="w-6 h-6 text-react-blue mr-3" />
+              <h2 className="text-3xl font-bold text-react-dark">
+                Upgrade when the future is ready
+              </h2>
+            </div>
+            <p className="text-lg text-react-gray leading-relaxed">
+              React approaches changes with care. Every React commit is tested on business-critical surfaces with over a billion users. Over 100,000 React components at Meta help validate every migration strategy.
+            </p>
+            <p className="text-react-gray leading-relaxed">
+              The React team is always researching how to improve React. Some research takes years to pay off. React has a high bar for taking a research idea into production. Only proven approaches become a part of React.
+            </p>
+            <button className="text-react-blue font-semibold hover:underline">
+              Read more React news
+            </button>
+          </motion.div>
+
+          {/* News Section */}
+          <motion.div {...fadeUpPreset(0.3, 0.8)} className="space-y-6">
+            <div className="flex items-center mb-6">
+              <Calendar className="w-6 h-6 text-react-blue mr-3" />
+              <h3 className="text-xl font-bold text-react-dark">LATEST REACT NEWS</h3>
+            </div>
+            <div className="space-y-4">
+              {newsItems.map((item, index) => (
+                <motion.div 
+                  key={index} 
+                  {...fadeUpPreset(0.4 + index * 0.05, 0.6)}
+                  className="border-l-4 border-react-blue pl-4 py-2"
+                >
+                  <h4 className="font-semibold text-react-dark hover:text-react-blue cursor-pointer">
+                    {item.title}
+                  </h4>
+                  <p className="text-sm text-react-gray">{item.date}</p>
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </motion.section>
+  );
+}
+
+export default News;

src/components/Platforms.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { Globe, Phone } from 'lucide-react';
+
+function Platforms() {
+  const shouldReduceMotion = useReducedMotion();
+
+  const fadeUpPreset = (delay = 0, duration = 0.8) => ({
+    initial: { opacity: 0, y: 20 },
+    whileInView: { opacity: 1, y: 0 },
+    viewport: { once: true, amount: 0.2 },
+    transition: { delay, duration, ease: "easeOut" }
+  });
+
+  const platforms = [
+    {
+      icon: Globe,
+      title: "Stay true to the web",
+      description: "People expect web app pages to load fast. On the server, React lets you start streaming HTML while you're still fetching data, progressively filling in the remaining content before any JavaScript code loads. On the client, React can use standard web APIs to keep your UI responsive even in the middle of rendering.",
+      image: "https://react.dev/images/home/videos/documentary.webp"
+    },
+    {
+      icon: Phone,
+      title: "Go truly native",
+      description: "People expect native apps to look and feel like their platform. React Native and Expo let you build apps in React for Android, iOS, and more. They look and feel native because their UIs are truly native. It's not a web view—your React components render real Android and iOS views provided by the platform.",
+      image: "https://react.dev/images/home/videos/rn.jpg"
+    }
+  ];
+
+  if (shouldReduceMotion) {
+    return (
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-react-dark mb-6">
+              Use the best from every platform
+            </h2>
+            <p className="text-lg text-react-gray max-w-3xl mx-auto">
+              People love web and native apps for different reasons. React lets you build both web apps and native apps using the same skills. It leans upon each platform's unique strengths to let your interfaces feel just right on every platform.
+            </p>
+          </div>
+          
+          <div className="grid md:grid-cols-2 gap-12">
+            {platforms.map((platform, index) => {
+              const IconComponent = platform.icon;
+              return (
+                <div key={index} className="bg-white rounded-xl shadow-lg overflow-hidden">
+                  <div className="h-48 bg-gradient-to-br from-blue-500 to-purple-600 relative overflow-hidden">
+                    <img 
+                      src={platform.image} 
+                      alt={platform.title}
+                      className="w-full h-full object-cover opacity-80"
+                    />
+                  </div>
+                  <div className="p-8">
+                    <div className="flex items-center mb-4">
+                      <IconComponent className="w-6 h-6 text-react-blue mr-3" />
+                      <h3 className="text-xl font-bold text-react-dark">{platform.title}</h3>
+                    </div>
+                    <p className="text-react-gray leading-relaxed">{platform.description}</p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          
+          <div className="text-center mt-16">
+            <p className="text-lg text-react-gray mb-8 max-w-4xl mx-auto">
+              With React, you can be a web and a native developer. Your team can ship to many platforms without sacrificing the user experience. Your organization can bridge the platform silos, and form teams that own entire features end-to-end.
+            </p>
+            <button className="text-react-blue font-semibold hover:underline">
+              Build for native platforms
+            </button>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 0.8)}
+      className="py-20 bg-gray-50"
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div {...fadeUpPreset(0.2, 0.8)} className="text-center mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold text-react-dark mb-6">
+            Use the best from every platform
+          </h2>
+          <p className="text-lg text-react-gray max-w-3xl mx-auto">
+            People love web and native apps for different reasons. React lets you build both web apps and native apps using the same skills. It leans upon each platform's unique strengths to let your interfaces feel just right on every platform.
+          </p>
+        </motion.div>
+        
+        <div className="grid md:grid-cols-2 gap-12">
+          {platforms.map((platform, index) => {
+            const IconComponent = platform.icon;
+            return (
+              <motion.div 
+                key={index} 
+                {...fadeUpPreset(0.3 + index * 0.1, 0.8)}
+                className="bg-white rounded-xl shadow-lg overflow-hidden"
+              >
+                <div className="h-48 bg-gradient-to-br from-blue-500 to-purple-600 relative overflow-hidden">
+                  <img 
+                    src={platform.image} 
+                    alt={platform.title}
+                    className="w-full h-full object-cover opacity-80"
+                  />
+                </div>
+                <div className="p-8">
+                  <div className="flex items-center mb-4">
+                    <IconComponent className="w-6 h-6 text-react-blue mr-3" />
+                    <h3 className="text-xl font-bold text-react-dark">{platform.title}</h3>
+                  </div>
+                  <p className="text-react-gray leading-relaxed">{platform.description}</p>
+                </div>
+              </motion.div>
+            );
+          })}
+        </div>
+        
+        <motion.div {...fadeUpPreset(0.5, 0.8)} className="text-center mt-16">
+          <p className="text-lg text-react-gray mb-8 max-w-4xl mx-auto">
+            With React, you can be a web and a native developer. Your team can ship to many platforms without sacrificing the user experience. Your organization can bridge the platform silos, and form teams that own entire features end-to-end.
+          </p>
+          <button className="text-react-blue font-semibold hover:underline">
+            Build for native platforms
+          </button>
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+}
+
+export default Platforms;

src/index.css

@@ -0,0 +1,62 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    color: #1f2937;
+  }
+}
+
+@layer components {
+  .code-block {
+    @apply bg-gray-900 text-gray-100 p-6 rounded-lg font-mono text-sm leading-relaxed overflow-x-auto;
+  }
+  
+  .code-line {
+    @apply block;
+  }
+  
+  .code-comment {
+    @apply text-gray-400;
+  }
+  
+  .code-keyword {
+    @apply text-purple-400;
+  }
+  
+  .code-string {
+    @apply text-green-400;
+  }
+  
+  .code-function {
+    @apply text-blue-400;
+  }
+  
+  .code-variable {
+    @apply text-yellow-400;
+  }
+  
+  .gradient-bg {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  }
+  
+  .react-logo {
+    animation: spin 20s linear infinite;
+  }
+  
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

src/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

tailwind.config.js

@@ -0,0 +1,27 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./public/index.html"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'react-blue': '#087ea4',
+        'react-light-blue': '#58c4dc',
+        'react-dark': '#23272f',
+        'react-gray': '#6b7280',
+        'react-light-gray': '#f3f4f6',
+        'react-border': '#e5e7eb'
+      },
+      fontFamily: {
+        'sans': ['system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif']
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'meta-gradient': 'url("https://react.dev/images/meta-gradient.png")'
+      }
+    }
+  },
+  plugins: []
+}

vercel.json

@@ -0,0 +1,5 @@
+{
+  "installCommand": "npm install",
+  "buildCommand": "CI=false npm run build",
+  "outputDirectory": "build"
+}