initial commit

package.json

@@ -3,12 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@next/font": "^14.2.15",
+    "@react-spring/web": "^9.7.5",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.9",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "framer-motion": "^11.11.10",
+    "gsap": "^3.12.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-feather": "^2.0.10",
+    "react-intersection-observer": "^9.13.1",
+    "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
+    "react-scroll": "^1.9.0",
+    "react-type-animation": "^3.2.0",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +46,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.14"
   }
 }

src/App.js

@@ -1,25 +1,38 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Navbar from './components/Navbar';
+import Hero from './components/Hero';
+import About from './components/About';
+import Themes from './components/Themes';
+import Departments from './components/Departments';
+import Speakers from './components/Speakers';
+import Contact from './components/Contact';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <div className="min-h-screen bg-white">
+        <Navbar />
+        <Routes>
+          <Route path="/" element={
+            <>
+              <Hero />
+              <About />
+              <Themes />
+              <Departments />
+              <Speakers />
+              <Contact />
+            </>
+          } />
+          <Route path="/about" element={<About />} />
+          <Route path="/themes" element={<Themes />} />
+          <Route path="/departments" element={<Departments />} />
+          <Route path="/speakers" element={<Speakers />} />
+          <Route path="/contact" element={<Contact />} />
+        </Routes>
+      </div>
+    </Router>
   );
 }
 
-export default App;
+export default App;

src/components/About.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+
+const About = () => {
+  const [ref, inView] = useInView({
+    triggerOnce: true,
+    threshold: 0.2,
+  });
+
+  const features = [
+    {
+      title: 'Innovation',
+      description: 'Showcasing cutting-edge sustainable technologies and solutions',
+      icon: '🚀',
+      image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80',
+    },
+    {
+      title: 'Collaboration',
+      description: 'Bringing together experts, researchers, and industry leaders',
+      icon: '🤝',
+      image: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80',
+    },
+    {
+      title: 'Impact',
+      description: 'Driving meaningful change for a sustainable future',
+      icon: '🌍',
+      image: 'https://images.unsplash.com/photo-1536697246787-1f7ae568d89a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+    },
+  ];
+
+  return (
+    <section ref={ref} className="py-24 bg-green-100" id="about">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={inView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.8 }}
+          className="text-center max-w-3xl mx-auto"
+        >
+          <h2 className="text-4xl font-bold text-green-800 mb-8">About Crest Conference</h2>
+          <p className="text-xl text-green-700 leading-relaxed">
+            CREST (Conference on Renewable Energy and Sustainable Technologies) is NITK's flagship conference dedicated to
+            addressing global environmental challenges through innovative solutions and collaborative discussions.
+          </p>
+        </motion.div>
+
+        <div className="mt-20 grid grid-cols-1 md:grid-cols-3 gap-12">
+          {features.map((feature, index) => (
+            <motion.div
+              key={feature.title}
+              initial={{ opacity: 0, y: 50 }}
+              animate={inView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.8, delay: index * 0.2 }}
+              className="bg-white rounded-xl shadow-lg overflow-hidden group"
+            >
+              <div className="relative h-48 overflow-hidden">
+                <img
+                  src={feature.image}
+                  alt={feature.title}
+                  className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-300"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-green-600/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                <div className="absolute bottom-4 left-4 text-4xl">{feature.icon}</div>
+              </div>
+              <div className="p-6">
+                <h3 className="text-2xl font-semibold text-green-700 mb-4">{feature.title}</h3>
+                <p className="text-green-600">{feature.description}</p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default About;

src/components/Contact.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+import { Mail, Phone, MapPin } from 'react-feather';
+
+const Contact = () => {
+  const [ref, inView] = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+  });
+
+  return (
+    <section ref={ref} className="py-24 bg-green-100" id="contact">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={inView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.8 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-4xl font-bold text-green-800 mb-4">Contact Us</h2>
+          <p className="text-xl text-green-700">Get in touch with our team</p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={inView ? { opacity: 1, x: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="space-y-8"
+          >
+            <div className="flex items-center space-x-4">
+              <div className="flex-shrink-0">
+                <Mail className="w-6 h-6 text-green-600" />
+              </div>
+              <div>
+                <h3 className="text-lg font-medium text-green-800">Email</h3>
+                <p className="mt-1 text-green-600">[email protected]</p>
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-4">
+              <div className="flex-shrink-0">
+                <Phone className="w-6 h-6 text-green-600" />
+              </div>
+              <div>
+                <h3 className="text-lg font-medium text-green-800">Phone</h3>
+                <p className="mt-1 text-green-600">+91 1234567890</p>
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-4">
+              <div className="flex-shrink-0">
+                <MapPin className="w-6 h-6 text-green-600" />
+              </div>
+              <div>
+                <h3 className="text-lg font-medium text-green-800">Address</h3>
+                <p className="mt-1 text-green-600">NITK, Surathkal, Mangalore - 575025</p>
+              </div>
+            </div>
+          </motion.div>
+
+          <motion.form
+            initial={{ opacity: 0, x: 50 }}
+            animate={inView ? { opacity: 1, x: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="space-y-6"
+          >
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-green-700">
+                Name
+              </label>
+              <input
+                type="text"
+                id="name"
+                className="mt-1 block w-full rounded-md border-green-300 shadow-sm focus:border-green-500 focus:ring-green-500"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-green-700">
+                Email
+              </label>
+              <input
+                type="email"
+                id="email"
+                className="mt-1 block w-full rounded-md border-green-300 shadow-sm focus:border-green-500 focus:ring-green-500"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="message" className="block text-sm font-medium text-green-700">
+                Message
+              </label>
+              <textarea
+                id="message"
+                rows={4}
+                className="mt-1 block w-full rounded-md border-green-300 shadow-sm focus:border-green-500 focus:ring-green-500"
+              />
+            </div>
+
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              type="submit"
+              className="w-full bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300"
+            >
+              Send Message
+            </motion.button>
+          </motion.form>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Contact;