DEV Community

Abdur Rakib Rony
Abdur Rakib Rony

Posted on

Building a Modern Survey Landing Page with Next.js and Tailwind CSS 🎨

#nextjs #react #tailwindcss #webdev

🛠️ Tech Stack

  • Next.js 13+ with App Router
  • React 18 with hooks
  • Tailwind CSS
  • react-confetti
  • Embedded forms integration

✨ Key Features

1. Smooth Loading Animation

The page uses a subtle fade-in effect that makes the content feel more polished:

const [isLoaded, setIsLoaded] = useState(false);

useEffect(() => {
  setIsLoaded(true);
}, []);

// In JSX
<div className={`transition-all duration-1000 ease-out ${
  isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'
}`}>
Enter fullscreen mode Exit fullscreen mode

2. Celebratory Confetti Effect 

const [showConfetti, setShowConfetti] = useState(false);

useEffect(() => {
  const confettiTimer = setTimeout(() => {
    setShowConfetti(true);
    setTimeout(() => setShowConfetti(false), 4000);
  }, 1000);

  return () => clearTimeout(confettiTimer);
}, []);
Enter fullscreen mode Exit fullscreen mode

3. Responsive Window Dimensions 

const [windowDimensions, setWindowDimensions] = useState({
  width: 0,
  height: 0,
});

useEffect(() => {
  const updateWindowDimensions = () => {
    setWindowDimensions({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };

  updateWindowDimensions();
  window.addEventListener('resize', updateWindowDimensions);

  return () => window.removeEventListener('resize', updateWindowDimensions);
}, []);
Enter fullscreen mode Exit fullscreen mode

🎨 Design Implementation

Color Palette 

bg-[#fdf8f3]  /* Warm cream background */
text-[#5e3c27] /* Rich brown for headings */
text-[#7a5b4a] /* Medium brown for subtext */
Enter fullscreen mode Exit fullscreen mode

Typography 

<h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold text-[#5e3c27] mb-2 md:mb-3 leading-tight">
  Fashion That Feels Like You
</h1>

<p className="text-lg md:text-xl text-[#7a5b4a] mb-6 md:mb-8">
  Where Style Meets Comfort
</p>
Enter fullscreen mode Exit fullscreen mode

📱 Responsive Design 

<div className="max-w-4xl mx-auto px-5 md:px-10 py-10 md:py-20 text-center">
  <Image
    className="w-full h-auto rounded-xl shadow-lg shadow-[#5e3c27]/10"
    // ... other props
  />
</div>
Enter fullscreen mode Exit fullscreen mode

🔗 Form Integration 

<iframe 
  src="https://your-form-provider.com/embed/survey-id"
  allowFullScreen
  className="w-full h-[800px] md:h-[1000px] border-0 bg-white"
  title="Survey Form"
  frameBorder="0"
  marginWidth="0"
  marginHeight="0"
/>
Enter fullscreen mode Exit fullscreen mode

Integration Tips:

  • Set allowFullScreen for better UX
  • Use responsive heights (h-[800px] md:h-[1000px])
  • Remove borders for seamless integration
  • Include title attribute for accessibility

🚀 Performance & SEO

Image Optimization 

<Image 
  src={logoImage} 
  alt="Company Logo" 
  width={200} 
  height={120}
  className="mx-auto max-w-[200px] h-auto"
  priority // For above-the-fold images
/>
Enter fullscreen mode Exit fullscreen mode

Meta Tags 

<Head>
  <title>Your Landing Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Your page description..." />
</Head>
Enter fullscreen mode Exit fullscreen mode

🎯 Key Takeaways

✅ Smooth animations enhance user experience

✅ Warm color palettes create emotional connection

✅ Responsive design works across all devices

✅ Next.js optimizations improve performance

🔧 Component Structure 

const SurveyLanding = () => {
  // State management
  const [isLoaded, setIsLoaded] = useState(false);
  const [showConfetti, setShowConfetti] = useState(false);

  // Effects for animations
  useEffect(() => {
    setIsLoaded(true);
    // Confetti timer logic
  }, []);

  return (
    <div className="min-h-screen bg-[#fdf8f3]">
      {/* Content with animations */}
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.